Fetching data in server comp & Zustand
Unanswered
Dwarf Crocodile posted this in #help-forum
Dwarf CrocodileOP
Hi guys, I am working on my own project after finished the React & Next course. And I don’t know if I am doing some thing wrong or if I misunderstand the utility of Zustand.
First, I get users’ data from the database in server component and then using props drilling to pass the data to the children and grand children and then grand grand children …. ( no matters they are Server or client components).
Then I wanted to find a solution to get this data directly in the grand grand … children without those props drilling and wanted to use Zustand to manage this data.
The only way I can initial the data in zustand’s store is to pass the data via a context provider.
Is it a correct way to do it? For the moment I don’t need to use state for these users’ data, is it a good practice to set them in the store?
thx for your help
First, I get users’ data from the database in server component and then using props drilling to pass the data to the children and grand children and then grand grand children …. ( no matters they are Server or client components).
Then I wanted to find a solution to get this data directly in the grand grand … children without those props drilling and wanted to use Zustand to manage this data.
The only way I can initial the data in zustand’s store is to pass the data via a context provider.
Is it a correct way to do it? For the moment I don’t need to use state for these users’ data, is it a good practice to set them in the store?
thx for your help
2 Replies
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
Dwarf CrocodileOP
Thank you for the answer.
I misunderstand Zustand for state management and the data fetch directly from the server, I thought we could centralize the data in Zustand. I used context API to spread the data fetching from the server in the client components. I will implemented Zustand later if I need for state management.
I misunderstand Zustand for state management and the data fetch directly from the server, I thought we could centralize the data in Zustand. I used context API to spread the data fetching from the server in the client components. I will implemented Zustand later if I need for state management.