Hydration 오류

● Hydration 오류는 Next.js와 React에서 발생하는 일반적인 문제입니다.       

  Hydration이란?

  Hydration은 서버에서 렌더링된 정적 HTML을 클라이언트에서 React 컴포넌트로
   "활성화"하는 과정입니다.

  1. 서버: HTML 생성 → 브라우저로 전송
  2. 브라우저: HTML 표시 (정적 상태)
  3. React: JavaScript 로드 후 HTML에 이벤트 연결 (Hydration)

  Hydration 오류가 발생하는 경우

  1. 시간/날짜 표시

  // ❌ 문제: 서버와 클라이언트 시간이 다름
  <div>{new Date().toLocaleString()}</div>
  // 서버: "2025-07-26 12:26:14"
  // 클라이언트: "2025-07-26 12:26:17" (3초 후)

  // ✅ 해결: useEffect 사용
  const [time, setTime] = useState('');
  useEffect(() => {
    setTime(new Date().toLocaleString());
  }, []);

  2. Math.random() 사용

  // ❌ 문제: 서버와 클라이언트의 랜덤값이 다름
  <div>{Math.random()}</div>

  // ✅ 해결: useEffect 사용
  const [random, setRandom] = useState(0);
  useEffect(() => {
    setRandom(Math.random());
  }, []);

  3. 브라우저 전용 API 사용

  // ❌ 문제: window는 서버에 없음
  <div>{window.innerWidth}px</div>

  // ✅ 해결: useEffect 사용
  const [width, setWidth] = useState(0);
  useEffect(() => {
    setWidth(window.innerWidth);
  }, []);

  4. 조건부 렌더링

  // ❌ 문제: localStorage는 서버에 없음
  {localStorage.getItem('user') && <UserMenu />}

  // ✅ 해결: useEffect 사용
  const [user, setUser] = useState(null);
  useEffect(() => {
    setUser(localStorage.getItem('user'));
  }, []);

  오류가 문제가 되는 이유

  1. 사용자 경험 저하: 깜빡임, 레이아웃 변경
  2. 성능 문제: React가 전체 DOM을 다시 렌더링
  3. SEO 영향: 검색 엔진이 잘못된 콘텐츠 인덱싱

  디버깅 방법

  // suppressHydrationWarning 사용 (임시 해결책)
  <div suppressHydrationWarning>
    {new Date().toLocaleString()}
  </div>

  // 또는 동적 import 사용
  const DynamicComponent = dynamic(
    () => import('./TimeComponent'),
    { ssr: false }
  );