-
-
Notifications
You must be signed in to change notification settings - Fork 341
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Hydrate Client Component (QueryClient) state w/ dehydrate in RSC #876
Comments
I want to understand something: this will achieve exactly the same behavior, but won't require us pass down props to the other component. Yes? Or does it change something about behavior? Right now in my project I am not using dehydration or hydration boundaries at all, and am doing it it with |
I'm still investigating this issue, and I don't have a comprehensive answer yet. The initial assumption I made in my original post no longer holds true after thorough testing. Instead of relying solely on hydrating the QueryClient via the RSC (Resource Server Component), it seems that enabling PPR (Partial Prerendering) in Next.js is what enables RSCs to re-render on navigation, thus making hydration beneficial. I need to delve deeper into why this behavior occurs and assess whether it's desirable or not—whether it's a bug or intended functionality. For further reference, you can explore the repository at this link, which demonstrates the hydration process: https://github.com/dihmeetree/trpc-appdir-issue-demo Despite this, I still advocate for hydrating the tRPC queries in the RSCs. Doing so ensures that the client component consistently receives up-to-date data, unlike when relying solely on |
Using HydrationBoundary gives a way better DX
|
Made a POC of some hydration helpers in #877, maybe something like that would be nice? |
Tried out your updates @juliusmarminge, while it looks good on the prefetching side, but data doesn't seem to be updated between navigation still. Is that something that is till WIP? Also what's the purpose of this
Theoretically |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Describe the feature you'd like to request
Instead of running tRPC queries directly in the RSC and passing it's result to the client component as props, we should prefetch the data and hydrate QueryClient data to the client components instead.
Right now data is fetched in the RSC like so:
create-t3-turbo/apps/nextjs/src/app/page.tsx
Line 15 in 7c1da52
This data is passed to the client component via props, however the query is then run again here
create-t3-turbo/apps/nextjs/src/app/_components/posts.tsx
Lines 89 to 91 in 7c1da52
Note: Using
initialData
isn't actually what we want. This adds data to the cache, only if something doesn't already exist. So if you added another page and you navigated between them... if your data changes (in the background), the data loaded via the RSC won't change (as it's old data is still cached viainitialData
).Right now data is fetched in the RSC (passed to the client via props), and then again on the client (double query.. which isn't what we want).
Instead, we should hydrate the QueryClient via the RSC. This guarantees that fresh data will always be available to the client component.
Describe the solution you'd like to see
I've got something like this working in my project
The
PostList
component can then be rendered like soAlso it should be noted that
refetchOnMount
is set tofalse
so queries are never run on mount. Remember.. live data is being hydrated in the RSC.. so there's no reason to re-run the queries on the client side.👍🏻
Additional information
No response
The text was updated successfully, but these errors were encountered: