Data fetching / caching sync between server and client components
Answered
Broad-snouted Caiman posted this in #help-forum
Broad-snouted CaimanOP
I have a hard time grasping how to keep api caching/data in sync when dealing with server and client components. Take this scenario for example:
1. Fetch a list of books from api on a server component.
2. Render books through SSR.
3. Post a new book to the list from a client component.
4. Update the UI to render new book, how to handle this correctly?
What's the best/common practices to handle the data fetching and updating the cache with the new book?
You can of course use SWR or RQ in the client component. But that cache wont receive what's already fetched on the server component.
The revalidation strategy where you revalidate the full route/tag through a route handler seems like really inconvenient and ineffective solution.
Also note that it's for a commercial product so I don't want to use alpha features, such as server actions.
1. Fetch a list of books from api on a server component.
2. Render books through SSR.
3. Post a new book to the list from a client component.
4. Update the UI to render new book, how to handle this correctly?
What's the best/common practices to handle the data fetching and updating the cache with the new book?
You can of course use SWR or RQ in the client component. But that cache wont receive what's already fetched on the server component.
The revalidation strategy where you revalidate the full route/tag through a route handler seems like really inconvenient and ineffective solution.
Also note that it's for a commercial product so I don't want to use alpha features, such as server actions.
17 Replies
European sprat
Answer
European sprat
this is your best bet for understanding it all
Broad-snouted CaimanOP
@European sprat thanks, but this suggests to use server actions for "you add the product as part of the user sessions, then call revalidateTag / revalidatePath to ensure the page gets re-rendered, because the cart component is rendered as a server component this ensures it’s up to date (similar to mutate() in useSWR / react-query)"
European sprat
yes that's the solution right now or use client components with react query
they've proposed a solution with a "staletime" setting further down in that thread which hopefully takes care of the scenarios
what i do is use RQ on the server, prefetch the query and then use their Hydrate component and have my client components use the dehdryated query
then when everything is loaded on the client it all goes client side RQ for staying in sync
Broad-snouted CaimanOP
@European sprat Ok thank you for explaining. I'm just confused that there's not a clear way to handle basic crud operations in the most popular react framework.
Since I'm trying to avoid server actions until they're stable I guess I'll go with swr or rq in client components for now. Would you typically fetch the books twice (once on the server and once on the client) or would you defer from using server components and only fetch in client components?
Since I'm trying to avoid server actions until they're stable I guess I'll go with swr or rq in client components for now. Would you typically fetch the books twice (once on the server and once on the client) or would you defer from using server components and only fetch in client components?
@European sprat aha, does RQ keep it's cache through the hydration process?
so that it doesnt have to refetch again on the client?
European sprat
yeah it's kind of nuts if you ask me and they seemed to have really prioritized static sites
@Broad-snouted Caiman so that it doesnt have to refetch again on the client?
European sprat
well it does refetch but it uses the server side fetched dehydrated data as it's initial data
but it means the data is there immediately and there's no empty / delay as the client loads
there's two methods, i've gone with the <Hydrate> method since i didn't want to drill props all the way down
Broad-snouted CaimanOP
@European sprat Ah ok, thank you a lot for the help clearing some things out.
Burmese
Until server actions are stable, I'd recommend fetching the initial books data on the server, pass it to the comp that lists books as a books prop. The components that will create or edit books will be client components anyway, so let them mutate with RQ or SWR. Again, since server actions aren't production-ready, to refresh the list of books, just use router.refresh() as part of your create/edit success callback.