Clarification: Should the APIProvider be able to provide context to immediate children only or to all nested children?

[hjdjoo]

I am working on a NextJS 13+ app and I am trying to access the geocoder library. I was trying to wrap a rather bulky component with the API provider several layers up, but calling "useMapsLibrary("geocoder")" in my component was returning null. The library was finally able to be imported when I placed the APIProvider directly within the component and created a child component directly within the APIProvider.

My guess is that I was experiencing one of two issues:

1. APIProvider is only able to pass its context down one layer (seems unlikely)
2. The APIProvider is a client component, but it was rendering a server component (to fetch data) which was then rendering a client component, and this unmounted the provider context. Thus I would have to convert my server component into a client component in order for nested children to have access to context...

Could anyone clarify/confirm? I will also do a little testing and update with findings.

[usefulthink]

That's certainly interesting... And given the popularity of next and other SSR frameworks it would absolutely be a good thing to have some documentation with the collected insights.

As far as this library is concerned, the components don't officially support server rendering. If there are simple things we can do to improve the situation for SSR users, we'll do it, but otherwise there's not much we can do on a server anyway.

I am, however, not very experienced when it comes to the details of SSR, so I'm gonna need your help with that.

APIProvider is only able to pass its context down one layer (seems unlikely)

First of all, the APIProvider is a regular context provider, and as far as I know this should work through the entire hierarchy - or at least I'm not aware of anything in React that would stop propagation of the context. Is there anything in next that might have such behavior?

The APIProvider is a client component, but it was rendering a server component (to fetch data) which was then rendering a client component, and this unmounted the provider context. Thus I would have to convert my server component into a client component in order for nested children to have access to context...

This one is interesting. Having context-providers interact with components somewhere down the tree is not something exotic that we invented, so I would assume that should be working with server components as well, but I also have no Idea right now how those intermediate server-components are compiled and rendered.

Can you maybe try to create a basic example of this in codesandbox?

[hjdjoo]

While creating an example in CodeSandbox, I saw what went wrong in my application -- the APIProvider is indeed functioning just fine as a regular context provider, and nested components are indeed able to read from the APIProviderContext as expected.

My issue came from nested routes, not components. If a component redirects the user to a route which renders a new page, the Provider Context is lost, as expected, since the parent components containing the context were unmounted, thus returning a null object.

I appreciate the response - thank you!