Hydration 오류란?

서버에서 렌더링된 HTML과 클라이언트에서 React가 다시 렌더링하려는 내용이 일치하지 않을 때 발생합니다.

❓ 하이드레이션이란?

• Next.js는 SSR을 통해 서버에서 먼저 HTML 생성
• 이후 클라이언트에서 React가 이를 잡고 인터랙티브하게 만드는 과정 → 이걸 Hydration이라고 함
• 이 과정에서 불일치가 발생하면 오류가 발생함

🔥 하이드레이션 오류 주요 원인

1. 비결정적 값 사용 (랜덤/시간 등)

export default function Page() {
  return <div>{Math.random()}</div>; // ❌ 오류 가능
}

• 서버와 클라이언트에서 다른 값이 생성되므로 mismatch 발생

✅ 해결: useEffect 안에서 처리하거나 클라이언트 전용 렌더링

2. 브라우저 전용 API 직접 사용 (window, localStorage 등)

export default function Page() {
  return <div>{window.innerWidth}</div>; // ❌ SSR 시 오류
}

✅ 해결:

'use client';

import { useEffect, useState } from 'react';

export default function Page() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    setWidth(window.innerWidth);
  }, []);

  return <div>{width}</div>;
}

3. 조건부 렌더링의 불일치