[NextJS] NextJS(14.1) | Warning: Extra attributes from the server: style 해결 방법과 팁

에러  이미지

개발 하면서 오랫동안 거슬렸던 경고 에러(보다는 경고)가 있습니다. 개발 환경에서만 뜨고, 프로덕션에서는 뜨지 않아서 별 신경도 쓰지 않았지만, 루트 페이지에 접속할 때 마다 뜨는게 거슬려서 해결하기로 하였습니다. 해당 관련 이미지는 다음과 같습니다.

 

루트 레이아웃 파일

루트 페이지 접속 시 뜨는 경고

 

원인 및 해결 방법

해당 에러의 원인이 무엇인지 검색을 해서 찾아 봤을 때는 서버로 부터 전달 받은 속성과 클라이언트에서 렌더링되는 속성 간의 불일치가 발생하여 이에 대한 경고를 띄우고 있는 것이 원인으로 보입니다

 

이에 대한 자세한 예시는 NextJS 공식 사이트(https://nextjs.org/docs/messages/react-hydration-error) 에서 확인해 보세요(무려 공식 사이트에서 해당 에러에 대해 정리 해주었습니다.)

 

또한 많은 분들이 유사한 사례를 경험해서 이에 대한 대화가 오갔었네요(https://github.com/vercel/next.js/discussions/22388)

 

암튼, 가장 단순한 해결 방법은  body 태그의 속성으로 suppressHydrationWarning 을 추가하는 것 뿐 입니다.

 

TMI) 공식 사이트에 대한 언급이 없는 것 같아서 혹시나 도움이 될까 싶어 해당 이슈에 저도 코멘트를 남겨보았습니다.

 

 

 

 

[그 외] 호기심 해결

호기심에 아래 와 같이 기존 body 속성에 style 속성을 따로 적용하면 어떻게 될까 궁금해서 추가했더니, 색다른 에러가 뜨는 것을 볼 수 있었습니다.

 

 

에러 구문만 보면 서버에서 받아온 스타일 속성의 값과 클라이언트에서 인식한 스타일 속성 간에 불일치로 인해 경고를 띄우는 것 같습니다.

 

 

참고로 아래와 같이 ▶ 단추를 클릭하면 추가적인 에러 콘솔의 발생 경로 등 추가 정보를 확인할 수 있습니다.

단추를 클릭하면

 

하단에 프레임 00 개 더 표시 구문이 추가로 보입니다.

 

 

해당 프레임 더 표시 를 클릭하면, 아래와 같이 에러가 어떠한 과정을 거쳐서 처리되고 있는지 알 수 있어서 만일 막히는 에러가 있고, 그 원인이 상단에 표시된 내용으로는 찾기가 어려운 경우에는 해당 에러 경계를 따라가며 찾아보는 것도 좋은 공부? 가 될 것 같습니다.