小编Gay*_*ali的帖子

我遇到的问题是在应用程序重新加载/页面刷新时从本地存储中获取用户数据。

在我的项目中，我将 NextJS 用于前端，以及用于redux-toolkit跨应用程序的 redux 管理和next-redux-wrapper包装页面的状态水合的支持库。

用户可以登录，在这种情况下，我将isLoggedIn布尔值存储在本地存储和 redux 状态中。根据isLoggedIn布尔值，我更改了Navbar组件样式（Navbar直接包含在 中_app.tsx）。

当用户刷新任何页面时，isLoggedIn布尔值不会加载到状态中，而是存在于本地存储中。

过去我一直在使用，redux-persist但我选择不使用它，因为它PersistGate会阻止 UI 呈现，直到从存储中获取持久数据，这与 SSR 的想法相冲突。

目前，我isLoggedIn通过使用这种App.getInitialProps方法修复了加载问题，在该方法中_app.ts，next-redux-persist每个加载的页面都会被调用，但这会引入另一个问题：所有页面现在都在服务器端呈现，并且没有 NextJS 的静态页面优化。

有什么方法可以不丢失 NextJS 的静态页面优化，不使用redux-persist库并且在刷新任何页面时仍然能够对客户端存储进行补充？

当前代码结构（为简单起见省略了一些代码）：

import { wrapper } from 'store';

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <Navbar />
      <Component {...pageProps} />
    </> …