Next.js hydration 불일치 에러 완벽 해결 가이드

Next.js SSR 사용 시 hydration 불일치 에러가 자주 발생합니다. 증상: Hydration failed because the initial UI does not match what was rendered on the server. 원인: 1. 서버와 클라이언트 렌더링 로직 차이 2. Date.now()나 Math.random() 같은 비결정적 값 사용 3. window, localStorage 등 브라우저 API를 SSR 단계에서 접근 해결방법: 1. useEffect 내에서만 클라이언트 전용 콘텐츠 렌더링 - isClient 상태로 분기 처리 2. suppressHydrationWarning 속성 사용 - 작은 불일치는 무시 (남용 금지) 3. force-dynamic으로 동적 렌더링 - 정적 생성 대신 매번 렌더링 4. localStorage 접근은 반드시 useEffect 안에서 처리 정리: 원인을 파악하면 대부분 useEffect 패턴으로 해결 가능합니다.