Unhandled Runtime Error: Hydration failed because the initial UI does not match what was rendered on the server. Next.js 에러 해결

 

✔️ 에러 코드

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

 

next.js 오류

 

✔️ 에러가 나온 이유

Hydrate는 서버사이드에서 rendering된 정적 페이지와 번들링된 js코드를 클라이언트에게 보낸 후 js코드가 HTML DOM 위에서 다시 rendering 되면서 서로 매칭되는 과정인데 이 과정 중에서 문제가 발생해서 생긴 문제였습니다. 

 

이 에러를 해결하기 위해서 구글링을 하다가 stackover flow에 나와 비슷한 오류를 가진 사람의 글을 보게 되었고, 결국에는 Next.js 공식 문서를 통해 해결하게 되었습니다. (Next.js는 친절하다! 에러 메세지 아래 있는 링크로 갔더니 친절하게 설명해주고 있었다.)

 

이 에러가 나오는 경우는 많은데 나의 경우에는 잘못된 HTML 태그 사용이 원인이였다.

p 내부에 div 태그가 있는지 확인하였고 바로 이 에러를 없앨 수 있었다. 😅

 

👇에러코드 👇

 <p className='lg:w-4/5 xl:text-lg leading-relaxed mb-8 md:mb-12'>
                <div className='pb-3'>
                  💜 어쩌고 저쩌고
                </div>
                <div className='pb-3'>
                  💜 어쩌고 저쩌고
                </div>
                <div className='pb-3'>
                  💜 어쩌고 저쩌고
                </div>
 </p>

---

👇에러  수정 코드 👇

 <div className='lg:w-4/5 xl:text-lg leading-relaxed mb-8 md:mb-12'>
                <div className='pb-3'>
                  💜 어쩌고 저쩌고
                </div>
                <div className='pb-3'>
                  💜 어쩌고 저쩌고
                </div>
                <div className='pb-3'>
                  💜 어쩌고 저쩌고
                </div>
 </div>

 

 

참고)

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

React 18: Hydration failed because the initial UI does not match what was rendered on the server

https://nextjs.org/docs/messages/react-hydration-error

react-hydration-error | Next.js

 

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓