How to pass data fetched in layout.js to all the Pages (Server components) ?

[rose dove]

I have multi-tenant app and I'm fetching styles on first time page load in Layout file instead of in each page. How to pass that data to server components?

[tender cargo]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[hot swallow]

do the fetching in each individual page again. if you are not using fetch, use React.cache to deduplicate the request (so despite you calling the request in multiple places, it is only run once)

pages and layouts are run in parallel so cannot share data between them, they can only read from and write to a shared cache (React.cache)

[rose dove]

I am using fetch function, but see how I can integrate React.cache

Do React.cache works on server side or client side?

[hot swallow]

server. if you are using fetch it should work automatically no need to React.cache. simply call the fetch in both the pages and the layout.

https://nextjs.org/docs/app/building-your-application/caching#request-memoization

if you are fetching in client components, you can pass data via contexts, but i prefer to use data fetching libraries like swr/react-query which has automatic global state management for you, for example https://swr.vercel.app/docs/advanced/performance.en-US#deduplication

[rose dove]

So, For fetch function Next js will check if the same api url was hit again it will just provide results from cache.

[hot swallow]

yeah

[rose dove]

Thanks for the help