T
TanStack•3y ago
rising-crimson

Next 13 Hydration Example

Hey everyone 👋 I'm new to Next13 and React Query and I was going through the SSR docs and am having some difficulty understanding the dehydrate -> hydrate method for server components and its children client components. Docs: https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydrate I setup my query provider using the getQueryClient snippet, a posts/page.tsx that performs a fetch I plan to use in my client components (getPosts) and renders a HydratedPosts.tsx component. HydratedPosts is the same as the docs Posts.tsx is the same as the docs and renders a list Currently, I'm just getting a runtime error about rendering 
<Hydrate state={dehydratedState}>
    <Posts />
</Hydrate> 
<Hydrate state={dehydratedState}>
    <Posts />
</Hydrate>
but I assume I'm missing some pretty big steps My questions are the following: 1. With the Hydrate approach, what should I be doing with the initial data I'm fetching in the server component, page.tsx 2. I should be using the same getQueryClient in every component I use Hydrate, right? 3. Are there any examples/resources aside from the snippets in the docs for Next13 + React Query? Any help is greatly appreciated 😃
SSR | TanStack Query Docs
React Query supports two ways of prefetching data on the server and passing that to the queryClient. Prefetch the data yourself and pass it in as initialData
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?