I'm trying to render components on the server that are not supposed to be interactive. I also need to display price on that component meaning I need to know which currency is current and have some additional data like currency list and rates. For that purpose I created a React Context:

<CurrencyContextProvider>
  <CurrencyContext.Provider>
    <CurrencyContextLoader />
    {props.children}
  </CurrencyContext.Provider>
</CurrencyContextProvider>

Where:
1. CurrencyContextProvider is a server component that fetches currencyList, currencyRates and defaultCurrency (the last one is decided by the server based on locale)
2. CurrencyContext.Provider is a client component that passes down to context's Provider props given by data fetched from the server in CurrencyContextProvider (hydrating the client's state)
3. CurrencyContextLoader is a client component that checks whether user selected specific currency previously to set defaultCurrencyaccording to user's preferences

Now I need to render another component that would reuse data from that context but I don't want this component to be client component since I would need to be shipped to user's browser simply to wait for context. One of the solutions I can think of is fetching currencyList, currencyRates and defaultCurrency again from the same backend endpoint and then passing it down to special wrapper that would render on client and decide which data should be used for children components - props from server or context value:

<ServerDataFetcher>
  <ClientDataWrapper>
    <ServerComponentsRenderer />
  </ClientDataWrapper>
</ServerDataFetcher>

This way only ClientDataWrapper would be shipped to the client and would need to re-hydrate while ServerComponentsRenderer would always stay on the server? Is that a correct approach or there are another ways to achieve what I want?