[Next.js] Next.js Hydration

Next.js !== SSR

• Next.js는 SPA이며 SSG를 기본으로 사용하고, SSR를 사용할 수 있음

• SSG(static site generation)

개발자가 빌드 시 사전생성페이지(pre-render page)를 만들어 static 페이지로 가지고 있다. 클라이언트에서 페이지 요청 시 사전생성페이지를 로드하여 보여 준다. 페이지를 사전 생성하여 가지고 있기 때문에 클라이언트 요청에 대한 응답이 빠르다. 빌드 할 때 페이지가 생성되므로 변경사항이 생기게 되었을 때는 next.js의 특정 함수를 활용하여 변경사항을 읽은 다음 페이지를 생성 한다.

• Next.js는 기본적으로 SSG를 사용하기 때문에 빌드 시점에만 서버 사이드에서 pre-render한 파일들을 보내주고, 그 이후에는 CSR로 페이지를 이동
• → 결론적으로 CSR를 사용하여 페이지 이동 처리, 필요한 경우에만 서버에 추가적인 데이터를 요청한다. 따라서 SSR를 사용하더라도 페이지 이동 시마다 HTML과 JS파일을 전체적으로 다시 불러오는 것이 아님

pre-rendering

• Next.js는 모든 페이지를 미리 렌더링 한다.
• → 각 페이지의 HTML을 미리 생성 → 생성된 HTML에 JS코드 연결

HTML에 JS가 연결되는 것을 Hydration

Next.js가 Hydration하기까지의 과정 정리

1. 서버에서 전달된 HTML 수신
2. 클라이언트 측 렌더링 (render())클라이언트는 수신된 HTML을 우선 렌더링하고, 인터렉션을 위한 JS파일을 로드
3. hydrate() 호출전달된 HTML에 이벤트 핸들러를 연결
4. 클라이언트 측 렌더링 완료hydrate 과정이 완료되면 클라이언트에서 페이지의 렌더링과 인터렉션을 관리