Next.js - _app.js state 在页面刷新/SSR 时丢失

Question

不确定这是渲染服务器端的功能还是副作用，但是每当我刷新页面或直接从 url 输入访问页面时，存储在暴露的 _app.js 页面中的任何 state 都会丢失。 Next.js 声明 _app.js 页面用于“在导航页面时保持 state”，所以这应该有效。

当使用<Link>组件路由客户端时，所有 state 都会保留。

我正在尝试在不使用 cookie/会话/本地存储的情况下存储非敏感数据。

任何人都可以验证这是否是最好的方法，还是我应该只使用其中一种技术？

如有必要，很高兴发布代码。

Answer 1

Next.js 应用程序使用 SRR，这意味着您的应用程序是通用的。 当您在没有刷新的情况下浏览页面时，这发生在客户端，当您刷新页面时，这发生在服务器端。 您可以使用 cookie 来持久化您需要的数据，因为您可以访问客户端和服务器的 cookie，因此当您刷新页面时，您可以检查 cookie 是否存在并根据此执行一些操作。

Answer 2

我和你的情况一样。 所以我写了一个样板示例。 去访问示例和代码以在您的应用程序中实现它。 https://github.com/fazlulkarimweb/with-next-redux-wrapper-redux-persist

Next 社区目前还没有关于此的官方示例。 我认为那些试图找到解决方案的人会得到样板的帮助。

Answer 3

如果您的应用程序足够大，那么使用 redux 进行状态管理。 为了在页面刷新时恢复状态，您可以使用 redux-persist，它可以与 next-redux-wrapper 集成。 基本上 redux-persist 将您的 redux 存储保存在本地存储中。 您可以参考这些链接：

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

Answer 4

当您刷新页面时， _app.js启动，并重新执行其代码。 您在 _app.is 中设置的每个_app.is仅适用于当前浏览器 session。 如果要持久化 state，则必须使用 cookies 或使用 Localstorage

但是，如果您被重新路由到新页面，您的应用程序不会重新呈现，因此_app.js代码不会被执行。 这就是为什么如果您使用<a>元素导航，您可能会看到 next.js 的警告。 “不要使用<a>元素导航到/ 。使用<Link /> ”。 这就是为什么 next.js 宣称：“在导航页面时保持 state”