How to avoid fetching the same data multiple times in layout and SSR components
Answered
Le Conte's Sparrow posted this in #help-forum
Le Conte's SparrowOP
I have some data that need to load from external API.
It can't be cached because Next.js revalidation still provide stale data sometimes.
This data is used in the layout as well as SSR components.
How can I fetch the data only once and use in both layout and page component?
It can't be cached because Next.js revalidation still provide stale data sometimes.
This data is used in the layout as well as SSR components.
How can I fetch the data only once and use in both layout and page component?
Answered by Eric Burel
you can deduplicate between page and react server components using React cache
5 Replies
You can't fetch once for layouts and pages because they can be rendered in different context
you can deduplicate between page and react server components using React cache
Answer
it won't be tied to revalidation, cache is not a shared cache but is scoped to the current request so there is no concept of revalidation
"still provide stale data sometimes." there are so many places to access the cache that you'd want to be more specific, like whether it's a random issue or happens in a specific situatation etc.
Le Conte's SparrowOP
Thanks. I finally solve it by using React's cache.