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>}</>
}
참고
'에러 일지' 카테고리의 다른 글
Notion api 100개 초과일 때 (0) | 2024.09.06 |
---|---|
NotionAPI - LargePageDataBytes (0) | 2024.09.06 |
CORS 에러 (0) | 2024.08.30 |
ReferenceError: window is not defined (0) | 2024.08.25 |