Best way to share server-fetched data with multiple Client Components in App Router?

[1minikadam]

In the App Router, if a Server Component fetches data that is needed by several nested Client Components, what is the recommended pattern to avoid duplicate fetching while keeping the client bundle small? Is passing serialized props down still preferred, or is there a better approach with context/cache?

[huklaa]

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

If several deeply nested Client Components need the same data, a Client Context provider can be useful, but I would still initialize that context from data fetched on the server rather than fetching it again on the client.

"cache()" is a different concern: it can help deduplicate repeated server-side calls during rendering, but it does not replace Client Context for sharing already-fetched data between Client Components.

So, roughly:

• Server Component fetches the data.
• Pass props directly when the component tree is simple.
• Use a Client Context provider when many nested client components need the same state.
• Use "cache()" for server-side request deduplication when multiple Server Components call the same data function.

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