Next.js의 작동원리

• Next.js는 브라우저에 렌더링 할때 기본적으로 Pre-rendering(사전 렌더링)을 한다.
• 사전 렌더링이란? Server단에서 DOM 요소들을 Build하여 HTML문서를 렌더링 하는것

• 위 사진을 보게 되면 순수 React는 최초에 렌더되었을때 JS파일을 받아오느라 아무것도 보이지 않는다.
  • 오직 <div id=’root’></div> 비어있는 html 만 받아오기 때문.
• JS load가 끝나고 나서 화면이 그려지고 바로 버튼 인터렉션같은 것들도 동작 할 수 있게 만든다.
• Next.js를 활용하게 되면, JS파일이 입혀지지 않은 HTML파일만 처음 서버에서 만들어진 html파일을 클라이언트에서 보여주고, 그 뒤에 Chunk단위의 js파일들을 html파일에 입혀지면서 이벤트들이 작동하게된다 이 과정을 Hydration 이라고 한다.

<aside> 💡 이러한 빌드 과정, 웹 페이지 요청 과정이 SSR인 것은 아니다..

</aside>

• 서버에서 기본적으로 pre-rendering 하는 것 까지가 Next.js 의 특징인 것이고,
• pre-rendering을 동적으로 해서 페이지를 생성하느냐, 정적으로 페이지를 생성하느냐가 SSR과 SSG의 차이라고 생각하면 된다.

2. SSG (Static Site Generation)

• SSG는 빌드를 진행할 때 pages 폴더에서 작성한 각 페이지들에 대해 각각의 문서를 생성해 Static한 파일로 생성한다.
• 만약 해당 페이지에 대한 요청이 발생하면, 이 페이지들을 재 생성하는 것이 아니라 이미 생성되 있는 페이지를 반환하는 형태로 동작한다.
  • 장점 : React CSR보다 응답속도가 빠르다.
  • Next.js에서도 SSG 형태로 사용하는 것을 지향하고 있다.
• 사용처 : 마케팅 페이지, 블로그 게시물, 제품의 목록과 같이 “정적 생성된 정보를 각 요청에 동일한 정보로 반환하는 경우” SSG 사용