Missing Suspense boundary with useSearchParams

Next.js에서 빌드 시 

useSearchParams() should be wrapped in a suspense boundary at page ~ . Read more : Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
    at a ~

 

이런 에러 메시지가 나왔다

 

next.js 13+ 에서 useSearchParams()는 next/nevigation을 통해 제공되는 훅이라 굳이 React Suspense로 감쌀 필요가 없다는 GPT의 답변이 있었다

 

하지만 예외적으로

 

1. 서버 컴포넌트에서 searchParams를 기반으로 데이터 fetch

- 서버 컴포넌트 자체가 async라면 Next.js가 내부적으로 Streaming + Suspense 사용

 

2. 동적 import한 컴포넌트에서 searchParams 활용

- 동적 import로 로딩되는 동안 Suspense로 fallback표시 가능

 

위 두 가지 경우에서는 필요하다고 명시를 하였다

 

또한 Next doc에서는 해당 에러에 대해 suspense boundary 없이 useSearchParams 를 사용하여 매개변수를 받으면 전체 페이지가 클라이언트 렌더링으로 전환되며 이로 인해 클라이언트 javascript가 로드될 때까지 페이지가 비어 있을 수 있다고 명시했다

 

GPT와 Doc에서 말한 내용을 종합하여 내 경우는 GPT의 2번째 예외에 해당돼서 로딩창을 동적으로 사용한다던가 동적으로 렌더링을 진행하며 searchParams를 사용하는 부분에서 suspense를 적용하였더니 빌드 시 발생하는 에러가 사라졌다