Error: Hydration failed because the initial UI does not match what was rendered on the server.

0. 문제 발생

React와 Next.js 환경에서 개발 도중 다음과 같은 에러가 발생

Error: Hydration failed because the initial UI does not match what was rendered on the server.

---

1. Hydration 이란?

• https://velog.io/@huurray/React-Hydration-%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC
• https://ko.reactjs.org/docs/react-dom.html#hydrate

---

2. Hydration Error

Next.js 공식 문서에서 설명하는 Hydration Error는 다음과 같다.

React Hydration Error

While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a feature of React.
This can cause the React tree to be out of sync with the DOM and result in unexpected content/attributes being present.

즉, 사전 렌더링(SSR/SSG)된 트리와 브라우저에서 첫번째 렌더링된 트리 사이에 차이가 있을 때 해당 에러가 발생할 수 있다.
후자는 위에서 언급한 하이드레이션(Hydration)이다.

---

3. 해결방법

https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render

스택오버플로우에서 나와 같은 문제를 발견하였다.
다양한 답변들이 있었고 하나씩 적용해 보았다.

3.1 MUI로 감싸는 태그 구조 없애기

• 우선, p태그 또는 MUI 컴포넌트 등으로 감싸는 태그를 사용할 경우 해당 이슈가 발생할 수도 있다는 답변이 있었다.
• 실제로 문제가 발생한 해당 컴포넌트는 아래와같이 MUI의 Box 컴포넌트로 감싸고있는 구조였다.

	<Box>
      <하위 컴포넌트 />
    </Box>

• Box 컴포넌트를 지우고 아래와같이 빈태그로 감싸주니 해당 에러가 사라지는걸 확인할 수 있었다.

	<>
      <하위 컴포넌트 />
    </>

• 그런데 문제는, <> 가 아닌 div태그로 감싸주니 다시 해당 에러가 발생하는 것이었다.
  

	<div>
      <하위 컴포넌트 />
    </div>

• <></> 를 통해 일시적으로 문제를 해결했지만, 문제의 원인과 근본적 해결책은 찾지못하였다.

  ---

  3.2 DOM이 로드된 후에 구성요소 렌더링 하기

  const Index = () => {
   const [domLoaded, setDomLoaded] = useState(false);
  
   useEffect(() => {
     setDomLoaded(true);
   }, []);
  
   return (
     <>
       {domLoaded && (
         <div>
           <하위 컴포넌트 />
         </div>
       )}
     </>
   );
  };
  export default Index;
  

• 다음과 같은 구조로 DOM이 로드된 이후에 렌더링 하도록 구조를 만들어보았고, 문제가 바로 해결된 것을 확인하였다.

• 해당 방법으로 해결이 된것을 보니, next에서 ssr을 막는 설정을 통해서도 해결이 가능할 것 같다.

• 해당 컴포넌트는 ssr처리가 필요없어서 쉽게 해결할 수 있었지만, 추후에 ssr시점에서부터 컴포넌트를 읽어와야한다면 다른 방법으로 해결할 수 있도록 공부가 필요할 것 같다.