Suspense와 useSearchParams

문제발생 및 원인

useQueryParams 를 사용해 제품검색을 하는 기능을 만들었는데, useSearchParams() should be wrapped in a suspense boundary at page 라는 에러가 발생했다.
해당 에러는 useQueryParams을 사용하여 컴포넌트를 렌더링하면 검색하는도중 빈값일때 렌더링이 안되는 문제가 있으니 suspense로 감싸라는 에러메세지이다.

보통의 해결방법

보통 구글링을하면 useQueryParams을 사용한 컴포넌트 밖에 suspense만 감싸라고 할것이다.
하지만 나의 경우 이렇게 해도 해결이되지않았다.

const Component = () => {
  ...
};

const ComponentWrapper = () => {
	<Suspense fullback={null}>
  		<Component/>
	<Suspense>
};
      
export default ComponentWrapper;

• Suspense : useQueryParams를 사용한 컴포넌트를 감싼다.
• fullback : 값이 렌더링되지않을때 어떻게 표시할것인지
• children : 렌더링할 컴포넌트

Suspense 적용 위치가 잘못되었을 가능성

Suspense가 useSearchParams를 사용하는 페이지에서만 감싸져 있다면, 다른 페이지나 컴포넌트에서 useSearchParams를 사용할 때 제대로 처리되지 않아 오류가 발생할 수 있다.
예를 들어, useSearchParams를 사용하는 컴포넌트가 여러 곳에서 렌더링되고 있을 수 있다.

해결 방법:
Suspense를 전체 페이지 혹은 QueryClientProvider와 같은 상위 레벨에서 감싸주는 방법도 고려해볼 수 있다. 이렇게 하면 useSearchParams를 사용하는 컴포넌트가 다른 곳에서 렌더링될 때 오류가 발생하지 않았다.

해결 이유:
404페이지나 에러페이지가 있었으면 전체를 안감쌌을수도있을거같은데, 나의경우 에러가발생했을떄 보낼수있는 에러페이지가 없기때문에 발생했던 경우였다.

import { Suspense } from 'react';
import { QueryClientProvider } from '@tanstack/react-query';
import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient();

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <QueryClientProvider client={queryClient}>
        <YourComponent />
      </QueryClientProvider>
    </Suspense>
  );
}