How to Cache Dynamic Page Route with Server Components
Unanswered
Polar bear posted this in #help-forum
Polar bearOP
Hey folks,
I am wondering how to cache a dynamic page route RSC .
What I want to do: I want to deep link to my tabs using the
Reproduction: https://codesandbox.io/p/devbox/5sm7vl?file=%2Fapp%2Fpage.tsx%3A11%2C53
The Problem: Whenever I switch tabs, the network tab shows the RSC fetching and a 200 status code. For example:
Expected: I want to be able to cache this at the page level. If I change tabs, I either expect no refetching of the RSC or if it does refetch I would expect 200(from disk cache) or 304 Not modified.
What I've Tried: Read https://nextjs.org/docs/app/guides/caching and it's really not clear. The only thing that makes sense here is to move the initial data fetching into
How can I accomplish this?
Thank you!
I am wondering how to cache a dynamic page route RSC .
What I want to do: I want to deep link to my tabs using the
activeTab search param. On the initial render I take what the server returns for the tab to render, but on all subsequent user actions, I want to handle that client side using useSwr.Reproduction: https://codesandbox.io/p/devbox/5sm7vl?file=%2Fapp%2Fpage.tsx%3A11%2C53
The Problem: Whenever I switch tabs, the network tab shows the RSC fetching and a 200 status code. For example:
?activeTab=latest&_rsc=vusbgExpected: I want to be able to cache this at the page level. If I change tabs, I either expect no refetching of the RSC or if it does refetch I would expect 200(from disk cache) or 304 Not modified.
What I've Tried: Read https://nextjs.org/docs/app/guides/caching and it's really not clear. The only thing that makes sense here is to move the initial data fetching into
layout.tsx but that means I need to add a bunch of complexity by needing to store the initial fetch in context. I don't want to store it in context.How can I accomplish this?
Thank you!
1 Reply
Polar bearOP