Error When Using useSuspenseQuery with Dynamic Component Imports in Next.js Page Router

[tkp12345]

ENV

react v18
nextjs v14(page router)
tanstack/react-query v5

Overview

Error: The server could not finish this Suspense boundary, likely due to an error during server rendering

This post discusses the issue encountered when dynamically importing a component in the Next.js Page Router and using useSuspenseQuery within that component. The error message observed is:

This issue arises because useSuspenseQuery, when used with dynamically imported components, requires careful handling to ensure compatibility between server-side rendering (SSR) and React's Suspense boundary.

import dynamic from "next/dynamic";

const A = dynamic(
  () => import("@/A"),
  { ssr: false } 
);


export const AContainer = () => {
  return (
    <div>
      <Suspense fallback={<>Loading...</>}>
        <A  />
      </Suspense>
    </div>
  );
};

Dynamic Component Using useSuspenseQuery

The dynamically imported SupportPageContainer uses useSuspenseQuery to fetch data.

import { useSuspenseQuery } from "@tanstack/react-query";

export const useGetSuspenseAQuery = () => {
  const { data } = useSuspenseQuery({
    queryKey: ...,
    queryFn: ...,
  });

const A = () => {
  const {data} = useGetSuspenseAQuery(); // Suspense-based data fetching

  return (
    <>
      ...
    </>
  );
};

export default A;

Why Does This Error Occur?

[tkp12345]

Could the issue with the queryFn function used in useSuspenseQuery be that it points to an API under pages/api in Next.js Page Router?

  ... get(`/api/...)`

[TkDodo]

suspense on the server doesn’t work with the pages router. As far as I know, you need the app router.

[tkp12345]

@TkDodo
Thank you for your response!
I didn't simply use Suspense in the Page Router. Even though I'm using the Page Router, the specific code is fetched dynamically with { ssr: false }, so it operates as CSR. That's why I'm using Suspense.

In my opinion, the error might be occurring because the useSuspenseQuery inside Suspense is calling the API Router of the Page Router. Could that be the case?

Or, as you mentioned, is it simply that the Page Router and Suspense are incompatible?

[TkDodo]

no this should work imo; can you show a minimal sandbox please?