⚠ Entire page /page... deopted into client-side rendering.

🤔 매 페이지 마다 선언했던 Header를 layout.tsx에 적용했다

build 시 나오는 수많은 SSR을 거부하는 경고들

🧐 SSR 안에 RCC를 선언하는건 문제가 되지않는다

RSC와 RCC:

SSR 페이지 내에 RSC와 RCC를 모두 포함할 수 있습니다.
RSC는 서버에서만 렌더링되고, 클라이언트로 JavaScript를 전송하지 않습니다.
RCC는 클라이언트에서 실행되고 사용자 상호작용을 처리합니다.

 

하지만 어떠한 문제로 SSR로 랜더링 되는것을 거부하고 CSR로 랜더링한다고 경고를 하는것...

😆  CSR에서 선언한 useSearchParams 때문 

https://nextjs.org/docs/messages/deopted-into-client-rendering

이 오류가 발생한 이유
정적 렌더링 중(SSR)에는 이를 포함하는 Suspense 경계가 useSearchParams 없었기 때문에 전체 페이지가 클라이언트 측 렌더링으로 결정된것이다.

경로가 정적으로 렌더링되게 하려면 가장 가까운 Suspense 경계를 useSearchParams() 까지의 감싸서 클라이언트 렌더링 부분을 제한할 수 있다

이를 통해 페이지의 일부는 정적으로 렌더링되는 반면 사용되는 동적 부분은 searchParams클라이언트 측에서 렌더링될 수 있습니다.

가능한 해결 방법
useSearchParams를 사용하는 구성 요소를 Suspense 경계에 래핑하여 클라이언트 측에서 렌더링되는 경로 부분을 줄일 수 있습니다.

 

💪 출처 및 도움주신분들

 

a

​