NEXT · DEBUG

Hydration 오류 진단 트리

Hydration 오류는 서버가 만든 HTML과 클라이언트 첫 렌더 결과가 달라질 때 발생하므로 원인 범위를 순서대로 좁혀야 합니다.

Hydration 오류 진단 트리 구조

hydration
시간/랜덤 값?Date, Math.random, locale 출력 확인
브라우저 API?window, localStorage 직접 접근 확인
DOM 구조?잘못된 중첩, 조건부 태그 비교
클라이언트 전용?useEffect 이후 렌더로 이동
시간/랜덤 값?→브라우저 API?→DOM 구조?→클라이언트 전용?

Hydration 오류 진단 트리 기준

점검
서버서버와 클라이언트 첫 출력이 같아야 hydration이 안정됩니다.
브라우저브라우저 전용 값은 mount 이후에 읽습니다.
테마,테마, 날짜, 권한 UI는 초기값 전략을 먼저 정합니다.
SuppressHydrationWarningSuppressHydrationWarning은 원인 해결이 아니라 예외 처리입니다.