[TIL] nextjs - Entire page deopted into client-side rendering 이슈
nextjs13을 사용하다 보면 다음과 같은
Entire page deopted into client-side rendering 에러 메시지가 발생하는 경우가 있다. 해당 에러가 발생하는 이유는 무엇이며? 도대체 왜 발생한 것일까?
공식문서에 따르면 발생하는 이유와 해결 할 수 있는 방법을 제시하고 있다.
에러 발생 이유
정적 렌더링이 되는 동안 Suspense boundary가 없으면
useSearchParams 훅에 의해 전체페이지가 클라이언트 사이드 랜더링이 된다고 한다.만약 라우트가 정적 렌더링 되는 경우
useSearchParams 훅을 호출하면 가장 가까운 Suspense boundary 까지 트리가 클라이언트 사이드 랜더링이 된다. 이를 통해 페이지의 일부는 정적으로 렌더링 되는 반면 searchParams 를 사용하는 동적인 부분은 클라이언트 사이드 랜더링이 되게 된다고 한다. 해결 가능 방법
방법은 간단하다
useSearchParams 훅을 사용하는 컴포넌트를 Suspense 컴포넌트로 감싸주면 된다.