next.js 하이드레이션 에러는 주로 어떤 상황에서 발생하나요?

Question

페이지에서 자꾸 하이드레이션 에러가 뜨는데혹시 해결해보신분 계실까요?뭐가 잘 못되서 이러는건지 못찾고있어서 도움 요청해봅니다..ㅠ

홈프로텍터 · Answer

저도 정확히 아는 것은 아니지만 지난 프로젝트때 자주 본 에러인데, next js를 쓸때 서버에서 생성한 렌더링이랑 클라이언트쪽에서 생성한 렌더링이 일치하지 않을 경우 난다고 들었습니다. ('use client'를 넣어서 CSR로 만들어도 서버측 렌더링은 발생해서) 저 같은 경우는 같은 페이지를 조건문에 따라 다른 방식으로 보여주는 걸 넣었을때 생겼던 오류로 기억합니다. 막상 배포 후에 문제가 되지는 않았던 것 같기는 합니다만.. 명확한 해결책을 드리지 못해서 죄송합니다.

NonamedBread · Answer

홈프로텍터 님이 적어주신 댓글처럼 서버에서 생성한 랜더링과 클라이언트 쪽에서 생성한 랜더링이 일치하지 않을 경우 발생합니다. 예를 들어, 다크 모드의 서버 상태값이 기본값으로 라이트로 지정되어 있고, 브라우저의 다크 모드 상태를 읽어서 반영하는 로직이 있다고 했을 때, 낮에는 서버에 설정된 값과 같아서 에러가 발생하지 않지만 밤에는 자동으로 브라우저가 다크 모드로 변경되어서 하이드레이션 에러가 발생할 수 있습니다. ISR이나 SSR을 사용하는 컴포넌트의 UI 관련 state를 핸들링하는 부분을 잘 찾아보시면 해결하실 수 있을 겁니다.

next.js 하이드레이션 에러는 주로 어떤 상황에서 발생하나요?

2개의 답변

Q&A 목록