How to avoid props drilling in React server components (useContext alternative)
Unanswered
Sloth bear posted this in #help-forum
Sloth bearOP
Hi, I have a component which gets the props from the path and query string. It also computes more props, and I want to pass all those props to deeply nested components.
For this use case, I would typically use React Contexts (useContext), however it isn't compatible server-side. How would I pass immutable props from a RSC to nested children ?
Thanks in advance for the help!
For this use case, I would typically use React Contexts (useContext), however it isn't compatible server-side. How would I pass immutable props from a RSC to nested children ?
Thanks in advance for the help!
16 Replies
If your nested child component is a client component you could make use of
useSearchParams and usePathname from next/navigation and do the computing of your props in that client component.Sloth bearOP
Thanks for the tip! Is there anyway to have a server-side context/store though ?
So that I wouldn't have to recompute props, although it would work for the search params and params. What about the others computed props @jason
Common Moorhen
I would recommend use url querying and params
but if its a complex state, i would recommenda a global state manager
Sloth bearOP
What's a good global state manager for server side ? I've seen that state managers don't make sense for react server components because they aren't stateful components
The server side should be stateless, if you want, you could store data in a database if you really need it
Common Moorhen
same as Jason said. if the state is too complex, you can switch to client side and handle state there
could you explain further what you're trying to achive?
Sloth bearOP
I have a multi-tenant nextjs app, where multiple website have their specific context fetched through params, some processing and queries at the top level
It’s not a stateful logic for the components. Just I’d like to avoid props drilling this initial tenant context to ALL the components needing it, sometimes deeply nested
Having a React context would do the job before, but I want to leverage the server components now and find a similar method for such use cases in the server side
I’ve thought about Zustand working without contexts. But I’m not sure what the store lifecycle would actually be like (would it live through requests? I guess so which isn’t suitable)
My best bet so far is a combination of useParams and cache function usage like so:
https://github.com/vercel/nextjs-subscription-payments/blob/c7867b2d9e08d033056293d12aeb9825b8331806/app/supabase-server.ts
My best bet so far is a combination of useParams and cache function usage like so:
https://github.com/vercel/nextjs-subscription-payments/blob/c7867b2d9e08d033056293d12aeb9825b8331806/app/supabase-server.ts
@Sloth bear I’ve thought about Zustand working without contexts. But I’m not sure what the store lifecycle would actually be like (would it live through requests? I guess so which isn’t suitable)
My best bet so far is a combination of useParams and cache function usage like so:
https://github.com/vercel/nextjs-subscription-payments/blob/c7867b2d9e08d033056293d12aeb9825b8331806/app/supabase-server.ts
Common Moorhen
i imagine zustand works on the client, im not sure, but most probably it will
i would use search params
Btw if your trying to send a fetch response, and your children has a server component near it.. you can fetch again from it since nextjs memoizes the response it's gonna have the same cached response