What does the `@tanstack/react-query-next-experimental` package do exactly?
From the docs:
The statement above is under the heading
- Is there a difference in the behaviour of
Without any additional setup, I would expect
I tried this by modifying the streaming suspense example and everything seems to work fine. The original example is at: https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-suspense-streaming
(Note that the example as embedded on this page uses StackBlitz, which causes an error. You can access the example on codesandbox here: https://codesandbox.io/p/devbox/github/tanstack/query/tree/main/examples/react/nextjs-suspense-streaming)
Here's my modified CodeSandbox: https://codesandbox.io/p/devbox/serene-leakey-dcvpmx
This modified version simply removes the
- What is the purpose of
This package will allow you to fetch data on the server (in a Client Component) by just callinguseSuspenseQueryin your component. Results will then be streamed from the server to the client as SuspenseBoundaries resolve. If you calluseSuspenseQuerywithout wrapping it in a<Suspense>boundary, the HTML response won't start until the fetch resolves. This can be when you want depending on the situation, but keep in mind that this will hurt your TTFB.
The statement above is under the heading
Experimental streaming without prefetching in Next.js on the Advanced SSR page. My first question is,- Is there a difference in the behaviour of
useSuspenseQuery when data is prefetched vs when data isn't?Without any additional setup, I would expect
useSuspenseQuery to just trigger suspense, and cause the parent tree (up to the closest <Suspense> if any) to suspend, while not affecting streaming of other streamable parts.I tried this by modifying the streaming suspense example and everything seems to work fine. The original example is at: https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-suspense-streaming
(Note that the example as embedded on this page uses StackBlitz, which causes an error. You can access the example on codesandbox here: https://codesandbox.io/p/devbox/github/tanstack/query/tree/main/examples/react/nextjs-suspense-streaming)
Here's my modified CodeSandbox: https://codesandbox.io/p/devbox/serene-leakey-dcvpmx
This modified version simply removes the
ReactQueryStreamedHydration used to wrap the app in providers.tsx. With this removal, everything still seems to still work fine. The parts wrapped in suspense are still streamed normally without prefetching. My second question is:- What is the purpose of
@tanstack/react-query-next-experimental, and in particular, the ReactQueryStreamedHydration component?
