Next.js 프로젝트를 진행 중인데 계속 하이드레이션 오류가 발생합니다. 내가 본 구체적인 오류 메시지는 다음과 같습니다.
오류: 초기 UI가 서버 측에서 렌더링될 때 렌더링되는 것과 일치하지 않아 하이드레이션에 실패했습니다.
경고: 서버 HTML에서 <div> 일치가 필요합니다.
이 문제는 서버 측 렌더링(SSR) HTML과 클라이언트 측의 하이드레이션 중에 React에서 생성된 HTML 간의 불일치로 인한 것일 수 있다는 점을 이해합니다. 경고: 서버 렌더링 HTML에 <div> 태그가 필요했지만 찾을 수 없습니다.
으아아아NextJS 13에서 이 오류를 어떻게 해결하나요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이 문제는 Next.js의 구성 요소로 인해 발생합니다. 구성요소를 표준 <a> 태그로 교체하여 문제를 해결했습니다. 으아아아
이 구성 요소처럼 클라이언트 측 탐색을 활성화하는 대신 링크를 클릭하면 전체 페이지를 강제로 새로 고칩니다. 이는 해결 방법이며 페이지 새로고침으로 인해 성능에 영향을 미칠 수 있습니다.