Next.js 개발 중 마주한 Hydration Error와 원인

간단 소개

Next.js Hydration Error 발생 원인 분석 및 해결 방법, 실제 해결 사례를 통해 SSR과 Hydration의 이해를 높입니다.

AI Summary

Hydration Error 발생 원인
- Next.js의 SSR 환경에서 서버와 클라이언트의 렌더링 결과가 달라 발생하는 오류이며, UI 깨짐, 깜빡임 등 사용자 경험 저하를 야기합니다.
- 비동기 처리 데이터, 시간, 랜덤 값, 브라우저 API 등을 서버 렌더에서 그대로 사용할 경우 발생하기 쉽습니다.
해결 방법 및 주의사항
- SSR과 CSR에서 값이 달라지는 코드 패턴을 찾아 수정하고, 날짜, 시간, 랜덤 값 사용에 주의해야 합니다.
- 상태 관리 초기값의 일관성을 확인하고, 필요시 Hydration 대체 전략을 고려해야 합니다.
- dayjs와 같은 라이브러리 사용 시 locale 설정이 글로벌하게 적용되므로, SSR 진입점에서 locale을 설정하거나 서버 전용 formatter를 사용하는 것이 안전합니다.
실제 해결 사례
- 서버와 클라이언트의 locale 설정 차이로 인해 dayjs를 사용한 날짜 포맷팅 결과가 달라 Hydration Error가 발생했습니다.
- 클라이언트 환경에서만 필요한 포맷은 useEffect에서 처리하거나, 서버에서 처리해야 한다면 서버의 locale과 timezone을 명시적으로 지정해야 합니다.