precious-lavender

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

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

getQueryClient

snippet, a

posts/page.tsx

posts/page.tsx

that performs a fetch I plan to use in my client components (

getPosts

getPosts

) and renders a

HydratedPosts.tsx

HydratedPosts.tsx

component.

HydratedPosts

HydratedPosts

is the same as the docs

Posts.tsx

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

page.tsx

2. I should be using the same

getQueryClient

getQueryClient

in every component I use

Hydrate

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

TanStack•4y ago

precious-lavender

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

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

getQueryClient

snippet, a

posts/page.tsx

posts/page.tsx

that performs a fetch I plan to use in my client components (

getPosts

getPosts

) and renders a

HydratedPosts.tsx

HydratedPosts.tsx

component.

HydratedPosts

HydratedPosts

is the same as the docs

Posts.tsx

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

page.tsx

2. I should be using the same

getQueryClient

getQueryClient

in every component I use

Hydrate

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

Next 13 Hydration Example

Similar Threads

Next 13 Hydration Example

Similar Threads

Similar Threads

Similar Threads