Next.js Page Router에서 @tanstack/react-query suspense 옵션이 제대로 동작하지 않는다.

React, Suspense

Next.js, TanStack Query와의 문제점

예시 1. 일반 Suspense 사용

type User = {
  name: string;
  phone: string;
};

const mockApi: () => Promise<User[]> = async () => {
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const result: User[] = await response.json();
  return result;
};

// List.tsx
import { mockApi } from "@/api/mockApi";
import { useSuspenseQuery } from "@tanstack/react-query";

function List() {
  const { data } = useSuspenseQuery({
    queryKey: ["mock"],
    queryFn: () => mockApi(), 
  });

  return (
    <ul>
      {data.map(({ name, phone }) => (
        <li key={name}>
          <p>name: {name}</p>
          <p>phone: {phone}</p>
        </li>
      ))}
    </ul>
  );
}


// Page.tsx
function Page() {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <List />
    </Suspense>
  );
}

하지만 실제 동작을 확인해보면, Suspense fallback이 동작하지 않는다.

오히려 API 응답이 반영된 HTML이 바로 브라우저에 곧 바로 보여진다.

Network 탭을 통해 HTML을 확인해보자. TanStack Query의 Prefetch 기능을 사용하지 않았는데도 API 응답 데이터가 채워져 있다.

이를 통해 Next.js(SSR) Suspense 내부에 useQuery(suspense option)를 이용하면 의도치 않게 Server Side에서 데이터 요청을 미리 불러오는 것을 확인할 수 있다.

 

예시 2. SSRSuspense 사용

function SSRSuspense(props: ComponentProps<typeof Suspense>) {
  const [mount, setMount] = useState(false);
  useEffect(() => {
    setMount(true);
  }, []);

  if (!mount) return <>{props?.fallback}</>;
  return <Suspense {...props} />;
}

const nextConfig = {
  experimental: {
		scrollRestoration: true,
  },
};

예시 3. App Router 사용

마치며