Rendering

SPA 이전에 생긴 개념...

• 변천사
  • Static Sites
  • iframe
  • XMLHttpRequest
  • AJAX

SPA (Single Page Application)

• AJAX등을 이용하여, 하나의 어플리케이션을 이용하듯 사용자가 하나의 페이지에 머무르면서 필요한 데이터를 부분적으로 받아와 업데이트를 해줌.

CSR (Client Side Rendering)

• 특징
  • 클라이언트에서 전반적인 렌더링을 전부 전담함.
  • HTML의 body 태그 내부가 비어있음.
    • (id=”root” 와 어플리케이션에서 필요한 자바스크립트의 링크만 들어 있음)
  • 웹사이트에 처음 접속하면 빈화면이 보이고, 링크된 자바스크립트를 서버로부터 다운로드 받고, 이 내부에는 필요한 로직뿐만 아니라 어플리케이션을 구동하는 프레임워크와 라이브러리의 소스코드도 포함이 되어있음.
    • 따라서 사이즈가 크기 때문에 다운로드 소요 시간이 걸리게 됨.
  • 추가로 필요한 데이터는 서버에 요청후 데이터를 다시 받아온후 이를 기반으로 동적으로 HTML을 생성한뒤 사용자에게 최종 어플리케이션을 보여줌.
• 문제점
  • 사용자가 첫 화면을 보기까지 시간이 많이 소요될 수 있음.
  • 좋지 않은 SEO (Search Engine Optimization)
    • 검색엔진이 웹사이트를 돌아다니면서 해당 웹사이트의 html을 분석한뒤, 검색엔진에 등록을 하는데 CSR 로 만들어진 웹페이지는 상기한대로 HTML의 body 내부가 비어있으므로 검색엔진이 이를 분석하기 어려움.

SSR (Server Side Rendering)

• 참조 : SSR - Next.js
• 특징
  • 웹사이트에 처음 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML파일을 만든뒤 클라이언트에 보냄.
    • 따라서 첫번째 페이지 로딩이 빨라짐
  • 모든 컨텐츠가 HTML에 담겨 있기 때문에 효율적인 SEO를 수행 가능
• 문제점
  • Static Site에서 발생하던 깜빡임 이슈가 있을수 있음.
    • 사용자가 버튼 클릭등으로 페이지를 요청하면, 전체적인 웹사이트를 다시 서버에서 받아 오는것과 동일 하므로 발생. → 좋지 않은 UX
  • 사용자가 많은 웹페이지의 경우 과도한 요청으로 서버에 과부하가 걸리기 쉬움
  • 사용자가 빠르게 웹페이지를 확인 가능하지만, 동적으로 데이터를 처리하는 자바스크립트를 다운로드 받지 못한 상태에서는 사용자의 클릭에 대한 이벤트처리가 일어나지 않음.

SSG (Static Site Generation / Static Site Generator)

• 리액트 라이브러리
  • Gatsby
    • 리액트로 만들어진 웹 어플리케이션을 정적으로 만들어서 (각 페이지의 HTML 파일들을 미리 생성) 서버에 미리 배포 해놓을수 있음.
    • 자바스크립트 파일을 함께 가질수 있기 때문에, 추가적으로 데이터를 서버에서 받아오거나, 동적으로 다룰 로직들을 처리 가능.
  • Next.js
    • 참조 : SSR - Next.js
    • 강력한 서버 사이드 렌더링을 지원하며, CSR과 SSR을 섞어서 유연하게 사용 할 수 있도록 해주는 라이브러리.