How does creating store for each request actually work? And why is it needed in Next.js but NOT needed in React.js?(PS I use TypeScript and App Router in Next.js)

[rajneesh069]

I don't quite understand the reason for creating a new store for each request! I tried Chat GPT and Bard to understand the problem but it didn't help.

If I simply write the frontend code of store and slices so when the user makes a request the React file will be downloaded on their browser and then they can simply make requests and we can manage the state variables using useAppSelector and useAppDispatch hook, then how does SSR in case of Next.js can lead to user interference in the stores of any user, because the users will be running the redux logic on front-end and their state variables will be theirs and will be managed by redux-toolkit and redux and then after they close the chrome tab, boom, done, we don't need the state.

However, we can use redux persist to store the state variables in local storage, and then when they may re-open the website we can simply re-hydrate the page!

So even if SSR is there how can it lead to problems? In the case of SSR Next.js will hydrate the page using initial state values(which can be obtained using next-redux-wrapper by making the store available on the server, but can we use next-redux-wrapper in next.js 14 and above?) and the store will be of a particular user as the page but wait, SSR happens even before the user interacts with the page so like how will the server know which store and what initial data to hydrate it with, but why the server will confuse it with someone else's store?! Yeah, why?

Can someone help me out, please.....

[phryneas]

Please add newlines. I tried three times, but this is just a wall of text and I can't get my brain to read it :(

This contains about ten different questions, please have every of those in a paragraph that can be answered on it's own.

[rajneesh069]

Hey, I formatted the text so it's more contextual and easy to read, and thanks for replying!!! If you could help me, it'll be really great!!!!

[seandinwiddie]

I'd be happy to help you understand why creating a new store for each request is necessary in Next.js but not in React.js.

The Problem: Server-Side Rendering (SSR) and State Interference

In Next.js, when a user requests a page, the server generates the initial HTML of the page using Server-Side Rendering (SSR). During SSR, the server executes the React code, including the Redux store creation. If you create a single, shared Redux store for all users, you'll run into issues:

1. State interference: When multiple users request pages, the server will reuse the same Redux store instance, leading to state interference between users. User A's actions might update the store, affecting User B's page rendering.
2. Security risks: A malicious user could manipulate the store, potentially accessing or modifying sensitive data belonging to other users.

Why it's not a problem in React.js

In React.js, there is no Server-Side Rendering (SSR) involved. The client-side React code runs in the user's browser, and each user has their own instance of the Redux store. Since the store is created and managed on the client-side, there's no risk of state interference or security issues.

How creating a new store for each request solves the problem

In Next.js, creating a new Redux store for each request ensures that each user's state is isolated and not shared with other users. When a user requests a page, the server creates a new store instance, which is used to render the initial HTML. This store instance is then discarded after the request is completed.

Using next-redux-wrapper

next-redux-wrapper is a library that helps you manage Redux stores in Next.js. It provides a way to create a new store instance for each request and makes the store available on the server. You can use it to create a store instance per request, which solves the state interference problem.

Compatibility with Next.js 14 and above

next-redux-wrapper is compatible with Next.js 14 and above. You can use it to create a new store instance for each request, even with the latest versions of Next.js.

Redux Persist and Hydration

You're correct that Redux Persist can be used to store state variables in local storage, and then rehydrate the page when the user revisits the website. However, this doesn't solve the state interference problem during SSR. Creating a new store instance for each request ensures that each user's state is isolated, even during SSR.

I hope this explanation helps you understand why creating a new store for each request is necessary in Next.js! 😊

[markerikson]

@seandinwiddie Please do not paste in GPT-generated answers here.