[NextJS] useSearchParams 와 Suspense

NextJS 14버전으로 프로젝트를 배포하는 중 알 수 없는 빌드에러가 발생하여 확인해보니
원인은 클라이언트 컴포넌트에서 사용한 useSearchParams 이었다.

이 이슈는 NextJS 공식문서 에서도 확인할 수 있었다.
오류가 발생한 이유는 클라이언트 컴포넌트에서 useSearchParams()를 통해 검색 매개 변수를 읽을 경우 전체 페이지를 클라이언트 사이드로 렌더링한다고 한다.
쉽게 말하면 클라이언트에서 자바스크립트가 로드될 때까지의 화면이 없어서 경고 차원에서 오류를 뱉은것이라고 판단했다.

따라서 Suspense를 컴포넌트에 입혀서 간단하게 오류를 해결했다.

export default function Page() {
  return (
    <Suspense fallback={<Loading />}>
      <Home />
    </Suspense>
  );
}