[Next.js] SSR Hydration

하이드레이션(Hydration)이란?

하이드레이션은 서버에서 렌더링된 HTML을 클라이언트에서 React와 연결하는 과정을 의미합니다.

즉, 서버에서 생성된 정적인 HTML을 클라이언트에서 React 컴포넌트로 변환하여 인터랙티브하게 만드는 과정입니다.

하이드레이션 과정 (SSR & CSR)

Next.js에서는 서버에서 HTML을 미리 생성(SSR) 한 후,

클라이언트에서 React가 해당 HTML을 다시 검사하고 이벤트 핸들러를 연결하는 방식으로 작동합니다.

이 과정이 하이드레이션이며, Next.js는 이를 통해 빠른 초기 로딩 속도를 제공합니다.

하이드레이션 과정의 동작 방식

export default function Home() {
  return <h1>Hello, Next.js!</h1>
}

서버 렌더링 (SSR)

• Next.js가 서버에서 h1 HTML을 생성해 클라이언트에 전송.

클라이언트에서 React가 실행됨

• 브라우저가 HTML을 렌더링한 후, React가 내부적으로 해당 요소와 동일한 가상 DOM을 생성.

하이드레이션 진행

• React가 기존 HTML과 자신의 가상 DOM을 비교하여 변경 사항 없이 바로 사용.

• 이벤트 핸들러가 연결되어 클라이언트에서 인터랙티브 기능이 작동.

---

하이드레이션 오류 (Hydration Mismatch)

하이드레이션 시 서버에서 생성된 HTML과 클라이언트에서 생성된 React 요소가 다르면 오류 발생할 수 있습니다.
이러한 문제를 Hydration Mismatch(하이드레이션 불일치) 라고 합니다.

(예제 문제 발생 코드)

export default function Home() {
  return <h1>{Math.random()}</h1>
}

오류 이유

• 서버에서 HTML을 생성할 때 Math.random()이 실행되어 랜덤 숫자가 포함됨.

• 클라이언트에서 다시 랜덤 숫자가 생성되면서 서버와 다른 값이 렌더링됨.

• React가 서버 HTML과 클라이언트 렌더링 결과가 다르다고 감지하여 Hydration Mismatch 경고 발생.

해결 방법

useEffect를 활용하여 클라이언트에서만 실행하도록 변경

import { useEffect, useState } from "react"

export default function Home() {
  const [randomNumber, setRandomNumber] = useState(0)

  useEffect(() => {
    setRandomNumber(Math.random()) // 클라이언트에서만 실행됨
  }, [])

  return <h1>{randomNumber}</h1>
}

"use client" 지시어 사용

"use client"

export default function Home() {
  return <h1>{Math.random()}</h1> // 클라이언트에서만 랜더링됨
}

하이드레이션 성능 최적화 방법

서버와 클라이언트에서 동일한 데이터 사용

• useEffect를 활용하여 클라이언트에서만 특정 데이터를 설정하도록 함.

클라이언트 전용 컴포넌트는 "use client" 선언

• 서버에서 렌더링할 필요가 없는 컴포넌트는 클라이언트 전용으로 설정.

React의 suppressHydrationWarning 사용

• 특정 요소에서 하이드레이션 경고를 무시하고 싶을 때 사용.

---

정리

하이드레이션은 서버에서 생성된 HTML을 클라이언트에서 React와 연결하는 과정.

SSR에서 미리 렌더링된 HTML을 클라이언트가 그대로 재사용하여 성능 향상.

서버와 클라이언트의 렌더링 결과가 다르면 하이드레이션 오류 발생 (Hydration Mismatch).

클라이언트 전용 컴포넌트는 "use client" 사용.

동적인 데이터는 useEffect에서 처리하여 하이드레이션 오류 방지.