CODEWITHSUNDEEP
reactjscachingreduxreact-reduxnext.js
ishwak sharda
ishwak sharda

Reputation: 67

Most efficient state management for React and NextJs using Redux

My team is working on developing a new food social-media platform. We have chosen the NextJs framework for the main development due to its server-side rendering features and many more. Our app consists of numerous recipe posts/cards (image, title, and author name).

For now, we are storing all the recipes that are fetched from the server in the redux store as a global cache system: whenever a recipe is fetched, it is sent to the recipe redux state and we just need to pass the ID of the recipe and get the recipe from the cache. This method has allowed us to write less code as we just need to pass the ID to put a like, comment or bookmark on a recipe. The cache is persisted on all the pages of NextJS using next-redux-wrapper and the HYDRATES.

The drawback is that the discovery page contains numerous recipe cards (up to thousands as the user scrolls) and all the recipes are saved in the cache. As the redux state is copied on every page change (that's how next-redux-wrapper works), after a while, the navigation is quite slow.

I'd like to know if there is a better way of managing cache in this case? What do you guys do to cache data in the application? Are there more efficient ways?

Thank you.

Upvotes: 0

Views: 292

Answers (1)

Julien Kode
Julien Kode

Reputation: 5499

One solution can be to use redux-persist

To persist only part of your state. Maybe you do not want to save in 1000 recipes of food between pages but only want the most upvoted one. Or maybe you do not want to persist reciepes at all and you want to persist only user preferences. This is why redux-persist can help you to persist only a part of the state

This is mention is the next-redux-wrapper documentation

Upvotes: 1

Related Questions