(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

Question

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다. 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from @/styles/Global.style; import useDarkMode from @/hooks/useDarkMode; import { media } from @/styles/media; import { darkTheme, lightTheme } from @/styles/theme; import type { AppProps } from next/app; import { ThemeProvider, createGlobalStyle } from styled-components; import normalize from styled-normalize; import @/styles/index.css; import { QueryClient, QueryClientProvider } from @tanstack/react-query; import AppLayout from @/layout/AppLayout; import store, { persistor } from @/core/store; import { PersistGate } from redux-persist/integration/react; import { Provider } from react-redux; import { ReactQueryDevtools } from @tanstack/react-query-devtools; import toastify-js/src/toastify.css; import { ToastContainer } from react-toastify; import react-toastify/dist/ReactToastify.css; import DefaultHead from @/components/Head/DefaultHead; import Construction from ./construction; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( ... ); } export default App;

허니 · Answer

persist는 브라우저 저장소를 이용할 것 같은데
 ssr에서는 안될 것 같은데요?