[Next.js] SSR, Hydration

 

- Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.

 

Pre-rendering 이란?

: Next.js에서는 Client-side로 페이지를 로드하기 전, 각 페이지에서 Pre-rendering을 한다.

 

이를 통해 얻을 수 있는 이점

• 초기 로딩이 빨라짐 (성능 향상)
• 검색 엔진에 최적화가 됨

 

React의 렌더링 방식

텅 빈 HTML을 받아와서 추후에 javascript로 페이지 컴포넌트를 생성

 

 

Next.js의 렌더링 방식

1. 사전에 각 페이지를 만들어놓음 -> 이때 각 HTML은 해당 페이지에 최소한으로 필요한 자바스크립트 코드와 결합되어 있음
2. 정적 페이지에서 hydration이라는 프로세스를 거치며 인터렉티브한 페이지가 됨

 

프리렌더링의 방식

- 정적 생성 (Static Generation)

: 빌드하는 시점에 HTML을 렌더링 하는 방식

: 소스코드를 빌드하면서 파일로 미리 만들어놓았다가, HTML을 로드할 때 만들어둔 페이지를 보여줌

- 서버 사이드 렌더링 (Server-side-rendering)

: 웹 브라우저가 GET 리퀘스트를 보낼 때마다, 사이트를 렌더링 함 (리퀘스트가 들어오면 렌더링)

 

서버 사이드 렌더링을 고려하는 상황

• 항상 최신 데이터를 보여줘야 하는 경우
• 데이터가 자주 바뀌는 경우
• 리퀘스트의 데이터를 사용해야하는 경우

그 외에 특별한 이유가 없다면, 정적 생성을 하는 것이 좋다.

 

 

hydration이란?
서버에서 렌더링 된 HTML에 기반하여, 클라이언트에서 JavaScript 이벤트와 상태를 연결하는 과정

 

출처

프리렌더링
코드잇 Next.js로 웹사이트 만들기 강좌