javascript - Next.js - _app.js state is lost on page refreshSSR - Stack Overflow

admin管理员组

文章数量:1343342

Not sure if this is a feature or a side-effect of rendering server side but any state stored in the exposed _app.js page is lost whenever I either refresh page or visit page directly from url input. Next.js proclaim the _app.js page is for "Keeping state when navigating pages", so this should work.

All state is kept when routing client side with the <Link> ponent.

I'm trying to store non-sensitive data without using cookie/session/local storage.

Can anyone validate if this is the best approach or should I just be using one of these techniques?

Happy to post code if necessary.

Not sure if this is a feature or a side-effect of rendering server side but any state stored in the exposed _app.js page is lost whenever I either refresh page or visit page directly from url input. Next.js proclaim the _app.js page is for "Keeping state when navigating pages", so this should work.

All state is kept when routing client side with the <Link> ponent.

I'm trying to store non-sensitive data without using cookie/session/local storage.

Can anyone validate if this is the best approach or should I just be using one of these techniques?

Happy to post code if necessary.

• javascript
• reactjs
• next.js
• state
• server-side-rendering

Share Improve this question Follow edited Aug 30, 2022 at 17:33 Yilmaz 49.9k1818 gold badges217217 silver badges270270 bronze badges asked Jun 7, 2018 at 20:44 wntwrkwntwrk 32711 gold badge22 silver badges1212 bronze badges 1

• Can you explain better what is the problem? You have to persist the data between different requests? If you refresh the page or navigate directly to a page, the request is a new request, and if you don't have a db/storage where you put infos to share between request, the data served could be different. – giggi__ Commented Sep 10, 2018 at 12:32

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Next.js apps uses SRR that means your application is universal. When you are navigating through pages without refresh this occurs in client-side, when you refresh your page this occurs in the server-side. You can use cookies to persist the data what you need because you can access the cookies both client and server, so when you refresh the page you can check if the cookie exist and do some stuff according to this.

When you refresh the page, _app.js kicks in, and its code reexecuted. Every state you set inside _app.is only for the current browser session. If you want to persist the state, you have to use cookies or use Localstorage

But if you are re-routed to a new page, your app does not get rerender so _app.js code does not get executed. That is why you might see a warning by next.js if you are navigating with <a> element. "Do not use an <a> element to navigate to /. Use <Link />". That is why next.js proclaims:"Keeping state when navigating pages"

If your application is large enough, then use redux for state management. For getting back states on page refresh, you can use redux-persist which can be integrated with next-redux-wrapper. Basically redux-persist save your redux store in local storage. You can refer these links:

https://github./rt2zz/redux-persist https://github./kirill-konshin/next-redux-wrapper

I was in the same situation as you. So I wrote a boilerplate example of this. Go visit the example and the code to implement this in your app. https://github./fazlulkarimweb/with-next-redux-wrapper-redux-persist

There are no official examples from the Next munity for this for now. I think people who are trying to find a solution will be helped by the boilerplate.

本文标签： javascriptNextjsappjs state is lost on page refreshSSRStack Overflow