Global Client Side State Management
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
Hello there,
I'm new to nextjs coming from a react background, I like the features of next like SSR and mixing client and server components and all the SEO stuff , but I have an issue that I've been thinking about lately a lot : I'm building a fullstack app where there is a lot of global client side state and I'm thinking of using the contextAPI to manage it by wrapping the children of the root layout in a global provider of all contexts providers, but If I do that the root layout must become a client component and then all of its children become client components so I can't use SSR in the children.
My question is : What's the best way to manage complex global client side state in a nextjs app without losing features like SSR ?
I'm new to nextjs coming from a react background, I like the features of next like SSR and mixing client and server components and all the SEO stuff , but I have an issue that I've been thinking about lately a lot : I'm building a fullstack app where there is a lot of global client side state and I'm thinking of using the contextAPI to manage it by wrapping the children of the root layout in a global provider of all contexts providers, but If I do that the root layout must become a client component and then all of its children become client components so I can't use SSR in the children.
My question is : What's the best way to manage complex global client side state in a nextjs app without losing features like SSR ?
Answered by LuisLl
This is an incorrect and very common assumption.
Your app doesn’t need to become all client side for you to wrap it in a Context Provider.
When you add a ContextProvider to your root layout wrapping your pages, this won’t make the app client side rendered. Only the Provider itself and the components that need to consume that Context via the
Now, the solution:
I would not recommend you use the Context API if “there is a lot of global client side state” because it will get messy and you will have to do many manual optimization for avoiding unnecessary re renders. Instead I would use Zustand, and again, only components that consume the store will need to be marked with “use client”.
Your app doesn’t need to become all client side for you to wrap it in a Context Provider.
When you add a ContextProvider to your root layout wrapping your pages, this won’t make the app client side rendered. Only the Provider itself and the components that need to consume that Context via the
useContext hook will need to be client components. Your layout and pages will remain server components, no problem.Now, the solution:
I would not recommend you use the Context API if “there is a lot of global client side state” because it will get messy and you will have to do many manual optimization for avoiding unnecessary re renders. Instead I would use Zustand, and again, only components that consume the store will need to be marked with “use client”.
4 Replies
Australian Freshwater Crocodile
I use Zustand for this case.
Unlike useContext, Zustand doesn’t require a context provider wrapping your layout or app so you can keep your layout as a server component and still manage global client state.
Unlike useContext, Zustand doesn’t require a context provider wrapping your layout or app so you can keep your layout as a server component and still manage global client state.
@Asian black bear Hello there,
I'm new to nextjs coming from a react background, I like the features of next like SSR and mixing client and server components and all the SEO stuff , but I have an issue that I've been thinking about lately a lot : I'm building a fullstack app where there is a lot of global client side state and I'm thinking of using the contextAPI to manage it by wrapping the children of the root layout in a global provider of all contexts providers, but If I do that the root layout must become a client component and then all of its children become client components so I can't use SSR in the children.
My question is : What's the best way to manage complex global client side state in a nextjs app without losing features like SSR ?
This is an incorrect and very common assumption.
Your app doesn’t need to become all client side for you to wrap it in a Context Provider.
When you add a ContextProvider to your root layout wrapping your pages, this won’t make the app client side rendered. Only the Provider itself and the components that need to consume that Context via the
Now, the solution:
I would not recommend you use the Context API if “there is a lot of global client side state” because it will get messy and you will have to do many manual optimization for avoiding unnecessary re renders. Instead I would use Zustand, and again, only components that consume the store will need to be marked with “use client”.
Your app doesn’t need to become all client side for you to wrap it in a Context Provider.
When you add a ContextProvider to your root layout wrapping your pages, this won’t make the app client side rendered. Only the Provider itself and the components that need to consume that Context via the
useContext hook will need to be client components. Your layout and pages will remain server components, no problem.Now, the solution:
I would not recommend you use the Context API if “there is a lot of global client side state” because it will get messy and you will have to do many manual optimization for avoiding unnecessary re renders. Instead I would use Zustand, and again, only components that consume the store will need to be marked with “use client”.
Answer
Btw, if you’re familiar with “dependency injection” I’ve learn to see the Context API as a way to achieve Dependency Injection in React apps, not to necessarily handle global state. Yes, it works, but if you think about it, if works because it’s injected that same instance to every consumer, makes sense?
@Australian Freshwater Crocodile I use Zustand for this case.
Unlike useContext, Zustand doesn’t require a context provider wrapping your layout or app so you can keep your layout as a server component and still manage global client state.
Saltwater Crocodile
zustand + nextjs still recommend to use useContext, so zustand create a store per request https://zustand.docs.pmnd.rs/guides/nextjs
tho, without useContext, zustand will work
tho, without useContext, zustand will work