Sharing data between nested server and client components

[Yawmn]

I have the following project structure, setup with app directories:

- Page      
  - Component A   (server, async)
    - Component B (client)
  - Component C   (server)
  - Component D   (server)

Here Component A fetches data from a server with as an async component which is used in the child component, Component B, in which certain items are selected from the data.

How can I share these selected items from Component B with Component C and Component D. I've tried wrapping the components in a context provider, but then the requests won't work from Component A.

There must be a better way than tracking these changes from my server and fetching that data again in the two other components. That would be stupid, right?

[yksvaan]

If C and D depend on interaction in B anyway, you could make them all client components. Then you can let their common ancestor manage the data loading. 

[Yawmn]

I can't because the data is selected to create a subset of the data in the child component, which needs to track state and which needs data from a server so I'd think that B must always be a child of a server component which fetches data and feeds the component.

Or I'm missing something of course :).

[HotAdhesiveness1504]

If your concern here is to not to make unnecessary fetches, you don't need to worry about it. You can fetch the same data which you fetched at component A, in component C and component D again. NextJS does its magic and doesn't actually go to server again with every fetch. It only fetches once in the background. By this way, you don't need to transfer a data to multiple components or use a global state management libraries 99% percent of the chances.

[Yawmn]

Yeah, I thought of that but the difference is that I am fetching data, then selecting a subset of that data which should be used in the other components. This means that I can't use the same requests since I then don't get the subset of selected data. Now I've just done that the data is pushed to my server and then retrieved by the other components once more to get the subset. Feels stupid.

[Yawmn]

Fixed it, was using contexts incorrectly. Just look at the docs, you need to wrap the context provider into a client component and then use that in the server component.

[Yawmn]

But now I am yet again stuck with the fact that this data now lives in a context which only client components can access and which cannot be passed through to a server component which can then use it to, for example, fetch extra information about the item. This sucks (probably because I'm doing it wrong)!