help with understanding useSuspenseQuery
hey guys, I wanted to ask for help to understand the hook.
When used with trpc in a next app router app, It’s suggested that we prefetch on the server and use useSuspenseQuery in client but Ive noticed that the hook works even without prefetching, is something I am missing or?
Also if we use both prefetch and useSuspenseQuery and the query needs params, do we send them both in server component and the client too? feels like a duplicate job to do.
thanks for your time
6 Replies
fascinating-indigo•10mo ago
Hi there. I'm still tinkering around with using of useSuspenseQuery with using this as the prime source of information Streaming with Server Components. The key take away I think you are talking about is:
"Note that you could also useQuery instead of useSuspenseQuery, and the Promise would still be picked up correctly. However, NextJs won't suspend in that case and the component will render in the pending status, which also opts out of server rendering the content."
If you are awaiting your prefetch then you most likely will just need
useQuery but take a look through those docs again and see if there is a specific situation for your case. In my project I use a mix of both useSuspenseQuery and useQuery depending on if I need the first paint client side to happen sooner but if the setup is not perfect you'll have a bunch of bad side effects. Hope this helpsAdvanced Server Rendering | TanStack Query React Docs
Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router. You might want to read the before this on...
xenial-blackOP•10mo ago
The docs suggest we prefetch in server and use suspense query in client, I just don't know what's the difference without prefetching in server because as you might have noticed, it works either way. Ofc there is something I'm not aware of, that's why I wanted someone to enlighten me why the docs suggest that.
fascinating-indigo•10mo ago
Just read through the trpc docs so I be in the same spot as you. Let me see if I can explain this in a different way which, hopefully, will add something to your understanding (and hopefully all correct).
Let's start with just the basic prefetching de/hydrate setup from tanstack query. When using this "basic" setup, you are awaiting the prefetching query (fetching server side) and hydrating the client side query cache before you the client side component are rendering, making the useQuery the correct choice as you are not rendering the client and still waiting for a server side query to complete. Basically, the server side loads all data into QueryCache before the components are rendered.
Next you have you have streaming with server components which delves into the useSuspenseQuery flow. When using this setup with dehyrdate and staletime options, the server is creating a promise for the prefetchQuery which the client is putting into the QueryCache. This is the example that trpc docs use. Notice that you are not awaiting the prefetch and that you now have access to using <Suspense> while also server rendering the content (that quote I left above in my first response).
To answer your question, the docs suggest useSuspenseQuery setup because it can be the most performant, utilizes the best practices of server side rendering, while also giving better control of showing client side content with suspense fallbacks options without having to wait for all data to be loaded.
In my large applications, I use a mix of both. If I have a page that requires a lot of data to be loaded, I use useSuspenseQuery in order to paint client side content first while showing loading states. You just have to determine which is best for your case
Advanced Server Rendering | TanStack Query React Docs
Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router. You might want to read the before this on...
fascinating-indigo•10mo ago
I hope that helps answer your question. In both situations you are prefetching server side and though both hooks will work, with the correct setup for hook wanted, you have more control of server side rendering, client UX with suspense, etc. There are just little gotchas and unwanted side effects if you don't follow the setup correctly.
plain-purple•10mo ago
Long story short is it will talk longer, possibly by an non trivial amount, if you don't prefetch
xenial-blackOP•10mo ago
Thank you soo much for the explanation, I'll take the answer of @DogPawHat mentioned above for the difference.
When useSuspenseQuery is used directly in client side without prefetching in server it works normally as it would with prefetching but it will take a bit longer.