SSR의 동작 과정

• 사용자 요청
• 서버가 그때서야 페이지의 HTML 파일 생성
• 서버가 HTML을 반환
• 브라우저가 HTML을 렌더링

SSG(Static Generation)의 동작 과정

• 빌드 시에 미리 각각의 페이지에 맞는 HTML 문서 생성
• 요청 시 이에 해당하는 HTML 문서 반환

그럼 NextJS는?

기본적으로 브라우저에 렌더링 할 때 pre-rendering, 즉 SSG를 디폴트로 한다. 각 페이지들을 사전에 미리 HTML 문서로 생성해서 가지고 있는 것이다. CSR이 자바스크립트 번들을 클라이언트 단에서 받은 후에 렌더링해 줬다면, Next의 pre-rendering은 빌드 시에 각각의 페이지 별로 미리 HTML 문서를 만들어 가지고 있다가 서버에 요청이 들어오면 알맞은 페이지를 응답해준다.

NextJS에서 사용하는 Pre-rendering 방법

• SSR : 요청이 들어오면 그때그때 HTML 문서를 만들어 응답한다.
• SSG : 빌드 시에 미리 각각의 페이지에 맞는 HTML 문서들을 만들어 놓고 요청 시에 각각 반환한다.

그 외

• CSR : <Link />를 통해 페이지를 연결해서 네트워크 개입을 없애면서 페이지를 이동한다(pre-fetch)