[Next.js] PreRendering 과 Hydration

PreRendering 이란?

HTML을 미리 만들어두는 과정이다. 

서버에서 React 컴포넌트를 실행하여 그 결과물인 HTML(DOM 문자열)을 브라우저에 먼저 보내는 것을 말한다.

이를 통해 사용자는 자바스크립트가 로딩되기 전에도 빠르게 콘텐츠를 볼 수 있고, 이는 SEO에 유리하며 초기 로딩 속도를 개선할 수 있다. 

 

Hydration 이란?

미리 렌더링된 HTML에 Javascript에 붙이는 과정이다. 

1. 서버는 React Component를 HTML로 렌더링한다.
2. 클라이언트(브라우저)는 이 HTML을 받아 React가 DOM 트리를 동일하게 다시 그려본다. (virtual DOM)
3. 그 후 이벤트 핸들러와 상태(state)를 연결해 실제로 작동 가능하게 만드는 것이 hydration이다.

❓Hydration이 왜 필요한가?

브라우저는 처음엔 HTML만 받아서 화면을 띄운다 → 이후 React 코드가 로드되며 "작동 가능하게" 만든다.
이 과정을 hydration 이라 부르며, 이때 성능 지표 중 TTI(Time to Interactive)가 개선된다.

 

❓Reconciler

Next.App Router 기본적으로 모든 컴포넌트를 Server Component로 가정하지만, 
클라이언트에서 인터렉션이 필요한 경우 'use client'를 명시하여 Client Component로 만든다.
이때 서버 컴포넌트에서 만들어진 결과물과 클라이언트 컴포넌트의 상태를 조화롭게 병합하기위해 내부적으로 Reconciler가 작동한다.

 

Hydration Error 란?

서버에서 렌더링한 HTML과 클라이언트가 다시 그린 HTML이 불일치할 때 발생한다. 

 

• 브라우저 전용 API를 사용한 경우 → window , document 등이 서버에서는 존재하지 않는다.
• 날짜와 시간을 사용했을때, 해당 날짜와 시간이 서버시간과 다른경우에 에러가 발생한다.
• Math.random() 과 같은 실행마다 다른 결과를 내는 비결정성 함수를 사용할 때 에러가 발생한다.
• 서로 다른 환경변수나, 전역 상태등을 사용하면 에러가 발생한다.

'use client'가 선언된 Client Component 안에서만 브라우저 전용 코드를 사용하거나

if (typeof window !== 'undefined') {
  // 브라우저에서만 실행
}

이와 같은 조건부 처리를 통해서 에러를 해결할 수 있다.