프론트엔드
Next.js 개발 중 마주한 Hydration Error와 원인
두줄요약
Next.js SSR 환경에서 Hydration Error가 발생한 원인과 점검 방법을 정리했습니다. dayjs locale 불일치로 서버와 클라이언트 렌더 결과가 달라진 사례를 설명했습니다.
문제 상황
- Next.js SSR 환경에서 QA 배포 후 Hydration Error 발생
- 로컬 빌드와 테스트는 정상이나 dev 서버 배포에서만 불일치 발생
원인 분석
- 서버와 클라이언트의 렌더링 결과 차이
- dayjs 날짜 포맷팅에서 서버 기본 locale en과 클라이언트 locale ko 불일치
- 기존 date 유틸과 신규 formatter가 섞여 원인 파악이 어려운 상태
해결 방법
- SSR과 CSR에서 값이 달라지는 코드 패턴 점검
- 날짜, 시간, 랜덤 값, 브라우저 API 사용 위치 재검토
- locale과 timezone을 명시적으로 맞추거나 useEffect, dynamic import ssr:false로 분리