Ensure that calls to `useSearchParams()` are wrapped in a Suspense boundary.

 

> Ensure that calls to `useSearchParams()` are wrapped in a Suspense boundary.

https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

Missing Suspense boundary with useSearchParams

빌드 에러가 발생했다.

친절하게 해결방법까지 알려준다.

Reading search parameters through useSearchParams() without a Suspense boundary will opt the entire page into client-side rendering. This could cause your page to be blank until the client-side JavaScript has loaded.

 

상위 (부모) 컴포넌트에서 Suspense로 감싸주어야 한다.

  import { Suspense } from "react";

  ...
  return (
  <Suspense fallback={<LoadingSpinner />}>
      <div>
        {children}
      </div>
    </Suspense>
 )

useSearchParams 를 사용해 param을 가져오는 경우 suspense가 요구된다

클라이언트 사이드 자바스크립트 로드가 비동기적으로 진행되는 동안 fallback 에 전달한 JSX가 렌더된다.

---

항상 Suspense가 필요한건 아니다! 

 

useSearchParams()는 클라이언트 사이드 렌더링(CSR)을 사용하는 React 훅입니다. 이 훅은 URL의 쿼리 문자열을 읽고 이를 통해 검색 매개변수를 가져옵니다. Next.js와 같은 프레임워크에서 이 훅을 사용할 때, 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 간의 차이점으로 인해 Suspense 경계가 필요합니다.

왜 Suspense가 필요한가요?

1. CSR에서 비동기 데이터 처리: useSearchParams()는 기본적으로 클라이언트에서 실행되는 훅으로, 서버 측에서는 검색 매개변수를 알 수 없으므로 클라이언트에서만 유효합니다. 페이지가 로드될 때 서버에서는 해당 데이터가 없다가, 클라이언트에서 JavaScript가 실행되면서 데이터를 가져오기 때문에, 초기 렌더링은 데이터가 없는 상태에서 이루어집니다. 이런 비동기 데이터 처리에서 Suspense는 데이터를 기다리는 동안 fallback UI를 제공하도록 도와줍니다.