我遇到的问题是在应用程序重新加载/页面刷新时从本地存储中提取用户数据。
在我的项目中，我使用NextJS作为前端，而对于支持库，我使用redux-toolkit用于整个应用程序的redux管理，使用next-redux-wrapper用于包装页面的状态水合。
用户可以登录，在这种情况下，我将isLoggedIn布尔值存储在本地存储中并处于redux状态。根据isLoggedIn布尔值，我更改Navbar组件样式(Navbar直接包含在_app.tsx中(。
当用户刷新任何页面时，isLoggedIn布尔值不会加载到状态中，而是存在于本地存储中。
在过去，我一直在使用redux-persist，但我选择不使用它，因为PersistGate阻止UI渲染，直到从存储中提取持久数据，这与SSR的想法相冲突。
目前，我通过在_app.ts中使用App.getInitialProps方法解决了isLoggedIn加载问题，这导致为加载的每个页面调用next-redux-persist的水合，但这引入了另一个问题：现在所有页面都是服务器端渲染的，并且没有NextJS的静态页面优化。
是否有任何方法可以不丢失NextJS的静态页面优化，不使用redux-persist库，并且在刷新任何页面时仍然能够水合客户端存储？
当前代码结构(为了简单起见，省略了一些代码(：
file: _app.tsximport { wrapper } from 'store';
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<>
<Navbar />
<Component {...pageProps} />
</>
);
};
MyApp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext);
return { ...appProps };
};
export default wrapper.withRedux(MyApp);
file: store.tsimport {
combineReducers,
configureStore,
EnhancedStore,
getDefaultMiddleware
} from '@reduxjs/toolkit';
import { createWrapper, MakeStore } from 'next-redux-wrapper';
import userReducer from 'lib/slices/userSlice';
const rootReducer = combineReducers({
user: userReducer
});
const setupStore = (context): EnhancedStore => {
const middleware = [...getDefaultMiddleware(), thunkMiddleware];
if (process.env.NODE_ENV === 'development') {
middleware.push(logger);
}
return configureStore({
reducer: rootReducer,
middleware,
// preloadedState,
devTools: process.env.NODE_ENV === 'development'
});
};
const makeStore: MakeStore = (context) => setupStore(context);
export const wrapper = createWrapper(makeStore, {
debug: process.env.NODE_ENV === 'development'
});
file: userSlice.tsimport { createSlice } from '@reduxjs/toolkit';
import { HYDRATE } from 'next-redux-wrapper';
const initialState = {
isLoggedIn: false
}
export const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
login: (state) => {
state.isLoggedIn = true;
localStorage.setItem('loggedInData', { isLoggedIn: true });
}
},
extraReducers: (builder) => {
builder
.addCase(HYDRATE, (state, action: any) => {
if (typeof window !== 'undefined') {
const storedLoggedInData = localStorage.getItem('loggedInData');
if (storedLoggedInData != null && storedLoggedInData) {
const parsedJson = JSON.parse(storedLoggedInData);
state.isLoggedIn = parsedJson.isLoggedIn ?? false;
} else {
state.isLoggedIn = false
}
}
});
}
});
export const isLoggedInSelector = (state: RootState) => state.user.isLoggedIn;
export default userSlice.reducer;
file: Navbar.tsximport { useSelector } from 'react-redux';
import { isLoggedInSelector } from 'lib/slices/userSlice';
export default function Navbar() {
const isLoggedIn = useSelector(isLoggedInSelector);
return (
<div className={`${ isLoggedIn ? 'logged-in-style' : 'logged-out-style'}`}>...</div>
)
}
今天也有同样的问题。问题是，我们需要将客户端存储与页面呈现解耦，并将其移动到安装组件的useEffect中。基本思想是，首先完全呈现页面，然后使用客户端存储信息更新页面。
直接加入客户端本地存储可能会干扰水合作用。
这是我使用的代码示例
export default const MenuBar = () => {
const isLoggedIn = useSelector((state) => state.isLoggedIn);
useEffect(() => {
// loads from clients local storage
const auth = loadAuthenticationToken();
if (auth !== null) {
// updates the store with local storage data
dispatch(actions.jwtTokenUpdate(auth));
}
}, [dispatch]);
if (isLoggedIn) {
return <p>you are logged in</p>;
} else {
return <p>please log in</p>;
}
}
作为参考，NextJS上的一个github问题：https://github.com/vercel/next.js/discussions/17443
以及一篇需要访问渲染窗口的博客文章：https://dev.to/adrien/creating-a-custom-react-hook-to-get-the-window-s-dimensions-in-next-js-135k
文档中提到，如果在_app.js中使用getInitialProps，将失去静态优化。我不知道你为什么在服务器端使用redux，我个人建议你只在客户端使用它，你不需要再使用下一个redux包装了，因为它在后台使用了getInitialProps。
redux工具包的示例
另外需要注意的是，当您将next redux包装器与商店包装时，它会在app.js/ts上使用getInitialProps。因此，当你使用这个库并用它包装你的应用程序时，你将自动失去静态优化。