Global state in nextJS 14
Hey yall, I see that with the way Next.js and server components are heading, we're moving away from the days of wrapping your entire app in context providers and whatnot.
My question is, how do i get access to global state in Next.js without making my entire app client-side rendered?
I saw solutions like nextauth that also wrap your entire app in a provider - doesn't that make your app client-side rendered?
Am i missing something here? is there a way to have global state in my next app while also keeping the benefits of SSR?
Solution:Jump to solution
You can pass server components as props to client components. So with a structure like this:
```
function Layout() {
return (...
6 Replies
Solution
You can pass server components as props to client components. So with a structure like this:
you can wrap you whole app in client component (provider) without losing the benefits of it's children server components.
I remember reading somewhere that in your tree - once a component is rendered on the client side, every child it has from that point would also be rendered on the client
No, the boundary is defined by your files, not by your JSX. You can mix and match client and server components as much as you want, as long as you pass them through the props. The only thing is, you cannot render a server component inside client component.
so as long as i pass a server component as a prop, and don't call it directly inside a client component, i should be fine?
Yes
Thanks!