[Next][Error] Hydration failed because the initial UI does not match what was rendered on the server. 발생 시

 

보통 이 에러는 서버에서 pre-rendering 된 html과 브라우저에 처음 렌더링 되는 html이 다를 때 발생한다.

하이드레이션이란건 간단하게 nextJS가 pre-rendering한 html에 js코드로 기능을 적셔서 완성하는 것을 말한다.

그래서 순서는 pre-rendering한 html -> js코드 로드 -> hydration => 사용자가 사용할 수 있는 화면 완성 이다.

이 때 pre-rendering한 html의 DOM구조가 hydration중에 발생하는 html DOM구조와 달라서, 이 둘의 구조가 불일치하여 더 이상 하이드레이션을 진행할 수 없다는 에러인데,

나 같은 경우는 이 에러가 전혀 상관 없는 상황에서 발생했다. 그리고 원인은 어이없게도 p태그 안에 p태그 또는 Link컴포넌트를 사용했을 때 발생했다. 물론 아래와 같은 구조로 html을 짜는건 올바르지 않은 방법이지만, 그렇다고 크리티컬한 에러를 발생하는 것은 아니기 때문에 에러 원인을 찾는 데 한참이 걸렸다. 무엇보다 에러 메세지가 저런식이니 이게 p태그 안에 뭘 잘못 써서 나는 에러라고는 상상도 못했다.

<p>
  <p>에러발생</p>
</p>

<!-- 또는 -->
<p>
   <Link href="#"><a>에러발생</a></Link>
</p>

 

문제 해결은 아래와 같이 하였다.

<p>에러 안 발생</p>

<!-- 또는 -->
<div>
   <Link href="#"><a>에러 안 발생</a></Link>
</div>