Hydration failed 에러

Next.js 에서 새로 고침 하면 아래와 같은 오류가 발생했다.

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

 

Next.js 공식 문서에 따르면 오류가 발생한 이유로는

“ 텍스트 내용이 서버에서 렌더링 된 HTML과 일치하지 않습니다. "

렌더 시점에 대한 이유로 발생한 거 같다.

 

여러 해결 방법 중 useEffect를 활용해서 해결했다.

 

import { useState, useEffect } from 'react'
 
export default function App() {
  const [mounted, setMounted] = useState(false)
 
  useEffect(() => {
    setMounted(true)
  }, [])
 
  return <>{mounted && <p>'This is never prerendered'</p>}</>
}

 

 

참고

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