I'm experiencing an issue with hydrating user data from local storage upon app reload or page refresh.
My project utilizes NextJS for the frontend, and for managing state across the application I rely on redux-toolkit and next-redux-wrapper.
Upon user login, the isLoggedIn boolean is stored in both local storage and the redux state. The appearance of the Navbar component is determined by the value of isLoggedIn, with the Navbar directly included in _app.tsx.
However, when a user refreshes any page, the isLoggedIn boolean isn't loaded into the state but remains in local storage.
In the past, I used redux-persist but encountered issues with UI rendering delays due to PersistGate waiting on persisted data retrieval, conflicting with the concept of SSR.
To address the loading problem with isLoggedIn, I currently utilize the App.getInitialProps method in _app.ts, triggering hydration through next-redux-persist on each page load. However, this implementation results in server-side rendering for all pages without benefiting from NextJS' static page optimization.
Is there a way to maintain NextJS' static page optimization, avoid using the redux-persist library, and successfully hydrate the client-side store upon page refresh?
Current code structure (some code omitted for brevity):
file: _app.tsx
import { 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.ts
import {
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.ts
import { 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.tsx
import { 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>
)
}