Which state manager should I use for fetching data, store it and make it reusable with app router?
Unanswered
Cyrics posted this in #help-forum
CyricsOP
I cannot decide which state manager should I use for fetching data, store it and make it reusable in different parts of the application with app route.
To be more specific:
1. When the app initial loads (in whatever route), I want NextJS to fetch some data and the store it.
2. Then from different pages/routes/components (client components) to be able to access that data, mutate it and make it persistent accross routes or invalidate the cache or whatever.
I have experience with Redux Toolkit and RTK Query, Zustand and Tanstack but I just don't know which one to use for a small project.
To be more specific:
1. When the app initial loads (in whatever route), I want NextJS to fetch some data and the store it.
2. Then from different pages/routes/components (client components) to be able to access that data, mutate it and make it persistent accross routes or invalidate the cache or whatever.
I have experience with Redux Toolkit and RTK Query, Zustand and Tanstack but I just don't know which one to use for a small project.
2 Replies
Bull Arab
could you use just react context for this?
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 cient 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 cient 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