Error: Hydration failed because the initial UI does not match what was rendered on the server
눈물의 에러 모음집
문제
친구에게 이러한 에러로 인해 어려움을 겪고 있다는 메세지를 받았다.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
스택오버플로우를 참고해 친구와 함께 문제를 해결해보기로 했다.
https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render
원인
또한 에러 메세지에서 언급되듯 공식문서도 함께 확인해 보았는데 애플리케이션을 rendering 하는 동안 미리 rendered 된 React tree(SSR/SSG)와 브라우저에서 첫 번째 rendering 중에 rendered 된 React tree 간에 차이가 발생하여 생긴 문제라고 한다.
이 에러는 React tree가 DOM과 동기화되지 않아 예기치 않은 콘텐츠 또는 속성이 나타날 수 있다는 것을 알려주었다.
서버사이드 랜더링을 지원하는 Next.js 을 공부하다 보면 Hydration 이라는 말은 빼놓을 수 없다.
Hydration 이란, 정적 호스팅 혹은 서버사이드 렌더링을 통해 받은 HTML 웹 페이지를 동적인 웹페이지 로 만드는 과정을 말하며 보통은 이벤트 핸들러 같은 것들을 붙여서 동적인 웹페이지를 만들기도 한다.
Next.js 는 Hydration 과정에서 리액트가 작동하는데 필요한 데이터를 모두 넘겨준다.
그래서 서버사이드 렌더링 이후에 우리의 앱을 부드럽게 리액트로 연결시켜 SPA 처럼 동작하게 만들어준다.
해결 방법
친구의 프로젝트 코드들 리뷰해보니 <p> 태그의 child element 로 <div> 가 정의되는 부분이 있었고 이 부분에서 Hydration 에러가 발생하고 있었다.
Error 해결 방법에 따라 Next.js 의 공식 문서에서 제안한대로 <p> 내부에 <div>가 정의되어 있는 코드를 찾아서 다음과 같이 수정하였더니 문제가 해결되었다.
결론
- HTML 태그는 역할에 맞게 작성해야 한다.
<p>태그는 기본으로 줄간격이 있으며 Text 메세지를 표현하기 위한 태그이고<div>는 블럭 형태의 태그로<p>태그 안에는<div>가 있으면 좋은 예시는 아니다. - Hydration 이란 Component를 rendering 하고 event handler를 연결하는 프로세스이다.
