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

Next.js에서 useSearchParams() 사용 시 주의사항

javascript

문제 상황

다음과 같은 에러 메시지를 보신 적 있나요?

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

 

이 메시지는 "/loginPage"에서 useSearchParams()를 사용할 때 Suspense 경계로 감싸지 않아 발생하는 오류입니다.

 

Suspense는 리액트 18버전에서 도입이 되었습니다. 다음 링크를 참조해주세요.

-> https://ko.react.dev/reference/react/Suspense

원인 분석

1. useSearchParams()는 Next.js에서 제공하는 훅으로, URL의 검색 매개변수를 클라이언트 사이드에서 접근하고 조작할 수 있게 해줍니다.
2. 이 훅은 클라이언트 사이드 렌더링(CSR)을 필요로 하지만, Suspense 경계로 적절히 감싸지 않았을 때 문제가 발생합니다.
3. Suspense 경계는 React에서 비동기 작업을 처리하고 데이터 로딩 중 대체 콘텐츠를 표시하는 데 사용됩니다.

해결 방법

이 문제를 해결하려면 useSearchParams()를 사용하는 컴포넌트나 해당 부분을 Suspense 경계로 감싸야 합니다. 아래는 간단한 예시 코드입니다:

import { Suspense } from 'react';
import { useSearchParams } from 'next/navigation';

function SearchParamsComponent() {
  const searchParams = useSearchParams();
  // searchParams 사용
  return <div>{/* 컴포넌트 내용 */}</div>;
}

export default function LoginPage() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <SearchParamsComponent />
    </Suspense>
  );
}

이 코드에서는:

1. React에서 Suspense를 import 합니다.
2. useSearchParams()를 사용하는 별도의 컴포넌트를 만듭니다.
3. 메인 LoginPage 컴포넌트에서 이 컴포넌트를 Suspense로 감쌉니다.
4. 컴포넌트 로딩 중 표시될 대체 UI를 제공합니다.

제 코드에서도 Suspense로 감싸주어서 해결이 되었습니다.

ex.

<Suspense fallback={<div>Loading...</div>}>
    <GithubOauthBtn />
    <GoogleOauthBtn />
    <TwitterOauthBtn />
</Suspense>

마무리

이렇게 구성하면 useSearchParams()에 의존하는 페이지 부분이 적절히 처리되어 더 나은 성능과 사용자 경험을 제공할 수 있습니다.

Next.js를 사용하실 때 이런 점들을 주의하시면 더욱 효율적인 개발이 가능할 거예요. 여러분의 프로젝트에 도움이 되었길 바랍니다!