Next.js Hydration Error, 원인과 해결책!
by DD
10개월 전
조회수 12
Next.js SSR 환경에서 Hydration Error 발생 원인 분석
서버와 클라이언트 간 렌더링 결과 불일치로 인한 문제점 지적
날짜/시간, locale 기반 포맷팅 시 SSR Safe하지 않은 경우 주의
Hydration Error의 근본 원리
Hydration Error는 Next.js의 SSR 과정에서 서버와 클라이언트 간 렌더링 결과가 다를 때 발생한다. 구체적으로, 서버에서 생성된 HTML을 클라이언트가 React로 'Hydrate'하는 과정에서 불일치가 감지되면 오류가 발생한다. 따라서 데이터 불일치가 핵심 원인이다.
Hydration Error 해결 전략
Hydration Error 해결을 위해 SSR과 CSR 간 값 차이를 유발하는 코드를 찾아야 한다. useEffect를 활용하여 클라이언트에서만 실행되는 코드를 분리하고, getServerSideProps를 통해 서버에서 데이터를 전달한다. dynamic import를 사용하여 특정 컴포넌트를 CSR로 렌더링하는 방법도 있다.
SSR Safe 코드 작성 가이드
날짜, 시간, locale 기반 포맷팅은 SSR Safe하지 않을 수 있으므로 주의해야 한다. dayjs와 같은 라이브러리 사용 시, 서버와 클라이언트의 locale 설정을 일치시켜야 한다. 서버 전용 formatter를 만들거나, useEffect를 활용하여 클라이언트에서 처리하는 것이 안전하다.
