A good pattern for Next.js streaming + suspense?

[stakbucks]

Hello. I wanted to use streaming with useSuspenseQuery.
I fetched data on the RSC using prefetchQuery which is a way introduced here on the docs, but I wasn't able to find any guide on using streaming other than ReactQueryStreamedHydration
I was wondering if the pattern below is a proper way to use streaming and suspense.
Thank you.

• ClientComponent.tsx

"use client";

export async function fetch(): Promise<string> {
  return new Promise((res) => {
    setTimeout(() => res("fetched!"), 2000);
  });
}

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

export function ClientComponent() {
  const { data } = useSuspenseQuery<string>({
    queryKey: ["fetch"],
    queryFn: fetch,
  });

  return <div>{data}</div>;
}

This component is a client component where useSuspenseQuery is used.

• FetchContainer.tsx (RSC)

export async function FetchContainer() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["fetch"],
    queryFn: fetch,
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ClientComponent />
    </HydrationBoundary>
  );
}

This is a server component that prefetches query for the ClientComponent, and is responsible for hydration.

• Home.tsx (RSC)

export default async function Home() {
  return (
    <main>
      <Suspense fallback={<h1>loading....</h1>}>
        <FetchContainer />
      </Suspense>
      <div>This renders first</div>
    </main>
  );
}

This component wraps the FetchContainer with suspense, and therefore the loading fallback shows while the query is being fetched.

2024-04-05.9.17.59.mov

[TkDodo]

you can do it like that, but with streaming, you don't need prefetching if you use the ReactQueryStreamedHydration component.

Have a look at the example:

https://github.com/TanStack/query/tree/main/examples/react/nextjs-suspense-streaming

[stakbucks]

I wanted to prefetch in order to prevent waterfall issues. Thanks for the reply