Query cache failing on client-component pre-rendered on server
I'm using react query with nextjs 14.
I am prefetching a query server side and using <HydrationBoundary state> to hydrate that queryResult to the client. This is working correctly.
The problem is: The client component where I need the query result, is pre-rendered on the server. When this happens, the useQuery() doesn't have the cache hydrated because its not yet on the client, so it returns null. and then on the client the cache is retrieved correctly, which causes a hydration failed due to UI mismatch.
This is a problem with nextjs pre-rendering client components on server and trying to reuse cache from react-query.
Is there a solution for this? Thanks
1 Reply
genetic-orange•10mo ago
Can you send a reproduction there? That's shouldn't happen by default if you follow the pattern in https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#prefetching-and-dehydrating-data
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...