CSR(Client Side Rendering)
- 클라이언트 측에서 화면을 직접 렌더링 합니다.
- 즉, 브라우저가 유저가 보는 UI 를 만듭니다.
<div>
만을 가지고 있을 것 입니다.브라우저가 HTML 을 가져올 때 비어있는 div 으로 가져옵니다.
그 후, 브라우저가 모든 자바스크립트를 요청해서 자바스크립트와 React.js 를 실행 시키고
그 다음 화면이 유저에게 보이게 됩니다.
사용자는 화면이 렌더링 되는 시간을 오래 동안 기다려야 할 것 입니다.
-> 브라우저는 자바스크립트 코드가 왔을 때에만 UI 를 만들 수 있습니다.
페이지의 소스코드 어딘가에 실제 HTML 이 존재 합니다.
Next 는
모든 페이지가 사용자에게 전해지기 전에 HTML을 미리 생성해서 Pre Rendering 을
수행 합니다.
JS 동작만 없는 HTML을 먼저 화면에 보여주는데, 아직 JS 파일이 로드가 되지 않았기에
<Link>
같은 컴포넌트는 동작하지 않습니다.
HTML 을 로드한 뒤 js 파일을 서버로부터 받아 HTML 과 연결시키는 과정 입니다.
해당 과정에서 react 컴포넌트는 초기화되고 사용자와 상호작용 할 준비를 합니다.
HTML 을 만드는 시점에 따라 달라집니다.
HTML 을 빌드 타임에 생성하고 각 요청에 따라서 재사용 합니다.
SSG의 2가지 상황
- Page 의 내용물이 외부 데이터에 의존적인 상황 => getStaticProps
- Page Paths 까지 외부 데이터에 의존적인 상황 => getStaticPaths
HTML을 각 리퀘스트가 일어날 때 마다 생성 합니다.
JS 전체가 로드되어야 하기 때문에 최초 Load에서 사용자에게 보여지지 않게 됩니다.
즉, 우리는 전체 페이지가 로드되기 전 까지 페이지를 볼 수 없다는 뜻이 되고 결국 UX는 낮은 평가를 받게 될 수 있습니다.