Back
Are you Considering using NextJS Redux?
NextJS Redux has become very popular for state management over the years, but is it the right choice to use Redux with NextJS? Let's find out.
NextJS Redux is a great choice for state management in React applications, but it has received its fair share of criticism as well. Any question about whether I should use X with Y is very difficult to answer, because the answer is, "It depends..."
Today, I will try to answer the question of should we use Redux in NextJS and show you some alternative ways of doing things that you might want to consider.
Should I use Redux with NextsJS?
If you want my direct opinion on this topic, you should really, really try to avoid using Redux in NextJS. It's not a NextJS best practice arguably.
Let me explain why.
Reason 1: NextJS Architecture Is Not Suitable for Redux.
The general architecture of a NextJS application is usually very different from a ReactJS application.
In NextJS, we have the concepts of getServerSideProps
and getStaticProps
which can populate the data required for a page before rendering. So, using Redux in NextJS often doesn’t make that much sense.
Reason 2: There are Alternatives to Redux.
React now supports Context
, which can share common states between components.
If you have a lot of nested components that need a shared piece of data, then you can just use React Context
. Like the following:
In fact, there are many scenarios where you wouldn’t even need any centralized state management solution. I will go over some of those scenarios in this article!
Reason 3: Setting up Redux is Very, Very Complex.
If you still feel that you need Redux in your NextJS application, just a heads up...it’s really complex to set up Redux with NextJS.
You will need a special package named next-redux-wrapper to get it to work. Even after that, handling the server and client states and making them sync is a lot of pain. Read more about that here.
Reason 4: Redux Optimization in NextJS is Complex.
Even after all of these, if you manage to integrate Redux with NextJS, the next problem you will face is performance.
One big argument against React Context is its performance implications and using Redux can sometimes solve that issue with the use of selectors.
Well, it’s hard to do in NextJS….
I am not saying it’s impossible but optimizing Redux properly for performance in NextJS can be very hard and takes a very long time.
Do you Need Redux with NextJS?
Glad you asked; I am not saying that you should not use Redux within NextJS applications.
All I am saying is ask yourself if you really need Redux. I will present you with some scenarios where you might think Redux is the way to go, but in reality, there are better alternatives.
Let’s explore, shall we?
Scenario 1: You Already Know What’s on the Page
Let’s just say you are building an e-commerce application where most of your URLs are pre-determined.
In a normal ReactJS application, we might think of fetching the details of the product and saving it to a Redux state and show them on the page, but in NextJS, there is a better way to do this:
So if you know that users will go to a page, /product/{productId}
then you already know the productId
even before you load the page. You can just pre-fetch the data, pre-generate the page, and send it to your visitors improving your application's performance. In these cases, you can use getStaticProps
because you already know what data will be there on the page already. It helps with caching too!
So if you know what data is going to be rendered on the page before you load the actual page, then you can just use getStaticProps
and getServerSideProps
and get the job done like a boss.
Scenario 2: You Don’t Know What’s Coming
This is a very common scenario in most real-life applications. We might know what comes in the initial page load, but the page's content depends on the user’s action.
A good example can be a product page with pagination. You only know what to load on the first page, but after the initial page load, the users might want to see the next page.
Like the following pagination on Amazon’s website:
In this case, it’s tricky to use static generation because you have to fetch fresh data. Should you use Redux in this case?
The answer is no. You would be better off using some kind of query library like swr
or react-query
to manage the API data.
The following is an example using react-query
:
So why would you fetch data and store it in the Redux store when you can get awesome features like caching and pre-fetching all without using Redux?
Scenario 3: You Need to Share Some Common State Between Components
Let’s say your application has some kind of authentication setup. In this case, you will want to share the authentication state between components. For example, you may want to do this to show and hide a login button.
What do you do now?
You might think okay, so now I definitely need to use Redux to share the authentication state everywhere. Umm, actually, no. If you are handling such simple scenarios, you can just leverage good old browsers localStorage
. Maybe, wrap it up inside a nice little hook.
If localStorage
is not an option for you, then you should try to set up React Context
first. But don’t get me wrong. Redux will work perfectly here. However, you should consider using the React Context
API first, which comes with the everything itself and saves you precious bundle size! And it’s also easier to set up!
Do You Still Have Some Other Use Cases?
After all these scenarios, you may still have a specific use-case where you need a common state shared between your components and Redux still might be a consideration. My only advice is to not rush to reach for it. Look at NextJS redux examples and try to understand why you need it first and then use it properly so that it doesn’t create more problems than solving the ones you already have!
Become More Productive Writing Your React Apps
Every component you create in React often requires tons of repetition no matter what you do, and across every frontend project, there are always custom setups and best practices teams follow. Pieces helps you solve this for any React project by allowing you to create a local micro-repository where you can store any code snippets along with relevant metadata straight on your machine. Additionally, Pieces makes it incredibly easy to share your snippets with others, form collections to onboard others onto a project, and even has integrations to allow you to use your snippets directly in your IDE. Our team of developers are making changes everyday to make the most effective and efficient micro-repo for you. Be sure to make sure you are utilizing Chakra UI’s color mode in Next.Js properly.
Try Pieces now using the personal plan for free and supercharge your React projects!