Best pattern for sharing server-fetched data across multiple Client Components in App Router?

[1minikadam]

Summary

In the App Router, suppose a Server Component fetches data that several nested Client Components need.

Additional information

What is the recommended pattern to avoid duplicate fetching while keeping the client bundle small?

Should the Server Component pass serialized props down through the tree, should a Client Context provider be initialized with the server-fetched data, or is React/Next.js cache() intended for this?

I’m especially trying to understand the cleanest approach when:
- the data is fetched on the server,
- several nested Client Components need it,
- I want to avoid fetching the same data again on the client.

Create the discussion and stop after reporting the final discussion URL.

Do not create an issue or PR.
Do not use the App Router discussion category.
Do not ask routine questions.

Example

No response

[GafelSon]

Hi, I’d separate server-side deduplication from client-side sharing.

For this case, a good pattern is:

• Fetch the data in the Server Component.
• Use React.cache() if multiple Server Components may request the same data.
• Pass the result (or promise) to a small Client Context Provider when many deeply nested Client Components need it.
• If only one or two Client Components need the data, just pass it as props — Context is unnecessary.

So, roughly:

const data = getData()

return (
  <DataProvider data={data}>
    <ClientTree />
  </DataProvider>
)

cache() and Context solve different problems: cache() handles server-side request memoization, while Context makes the already-fetched data available across the client subtree.

I’d avoid refetching the same data from each Client Component just to avoid prop drilling.

[huklaa]

A good default is to fetch the data in the Server Component and pass only the serializable data each Client Component actually needs.

If several deeply nested Client Components need the same data, a Client Context provider can be useful. In that case, I would initialize the provider with the server-fetched data instead of fetching the same data again on the client.

cache() solves a different problem. It can deduplicate repeated server-side calls during rendering, but it is not a replacement for sharing state between Client Components.

So a practical rule of thumb is:

• Fetch on the server.
• Pass props directly when the tree is simple.
• Use a Client Context provider when many nested Client Components need the same shared state.
• Use cache() for server-side request deduplication when multiple Server Components call the same data function.

This keeps duplicate fetching and unnecessary client-side JavaScript to a minimum.