React · Senior · Question 36 of 75
How do you correctly pass TanStack Query data loaded on the server to client components?
- ✓Correct answer:
prefetchQueryon the server, thendehydrateand<HydrationBoundary state> - 2Put the data into
localStorageon the server and read it on the client - 3Pass the
ssr: trueoption touseQuery- the library does the rest
Explanation
The server creates a QueryClient per request, runs prefetchQuery and serializes the cache via dehydrate(queryClient). The client-side HydrationBoundary puts this data into the client cache, and useQuery with the same key gets it immediately without refetching.