Hydration 오류는 서버 HTML과 클라이언트 첫 렌더의 차이를 찾는 문제다
원인은 대부분 시간·난수·브라우저 전용 객체·잘못된 태그 구조처럼 두 환경에서 결과가 달라지는 코드에 있다.
| 불일치 원인 | 나쁜 코드 신호 | 수정 방향 | 확인 방법 |
|---|---|---|---|
| 시간/난수 | Date, Math.random 직접 렌더 | 서버에서 문자열 고정 또는 useEffect 이동 | 새로고침마다 HTML 비교 |
| 브라우저 전용 API | window, localStorage 즉시 참조 | client component 또는 dynamic ssr:false | 서버 로그와 브라우저 콘솔 분리 |
| 잘못된 태그 중첩 | p 안의 div, table 구조 오류 | 유효한 HTML 구조로 수정 | Elements 탭에서 DOM 보정 확인 |
| 데이터 직렬화 | Date, Map, 함수 props 전달 | JSON 가능한 값으로 변환 | 서버 props 형태 점검 |