Global State Management
Unanswered
Western thatching ant posted this in #help-forum
Western thatching antOP
Before switching to SSR in my web development journey, I was always using CSR. This was very easy to use libraries like Zustand for state management. But with SSR, and having different actual backend routes. Also a Next.js server can handle multiple requests simultaneously. This makes it challenging to use Zustand the correct way. I'd like some help, preferrably on a call to discuss some issues I am having.
4 Replies
Southern rough shrimp
Probably best to just ask them in chat
Bosnian Coarse-haired Hound
+1, I also come from the SPA world where we used to hold global state. I see that in NextJS this isn't exactly the way to go about things, and I wanted to know how other people are working with data that needs to be shared across the app.
say I have an API call to
What would be the best way to achieve this?
say I have an API call to
/api/userdata to retrieve the user's information, and I want to display it on two seperate pages in my app, or even just accessing it in two sibling components within the same page. What would be the best way to achieve this?
Madeiran sardinella
Hi, you still can use redux, zustand or context if you need to share data along a components tree. You can wrap server components into client components (eg. state provider). Even, it's ok to mark a whole page as client component if you need a lot of interactivity.
American Crow
Make sure you understand the concepts of of Nextjs 14 App router and RSC before continuing.
1. There is no state in server components, you prob. knew this, just to make sure
2. You can fetch the data where you need it. Multiple fetches of the same data is not a problem deduping and caching happens automatically. Meaning in your scenario you could easily have a server component wrapper for each of your client components (no matter where they are). The wrapper would do the fetching and pass the data down. https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed
3. Make sure you read the preloading data pattern: https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#preloading-data
4. You most likely don't need a state manager, start with react context, only introduce a state manager when needed later on imo
1. There is no state in server components, you prob. knew this, just to make sure
2. You can fetch the data where you need it. Multiple fetches of the same data is not a problem deduping and caching happens automatically. Meaning in your scenario you could easily have a server component wrapper for each of your client components (no matter where they are). The wrapper would do the fetching and pass the data down. https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed
3. Make sure you read the preloading data pattern: https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#preloading-data
4. You most likely don't need a state manager, start with react context, only introduce a state manager when needed later on imo