개발자
(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제
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 ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;
답변 1
persist는 브라우저 저장소를 이용할 것 같은데 ssr에서는 안될 것 같은데요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 10월 19일
Next.js에서 Redux-persist를 SSR과 함께 사용하는 것은 까다로울 수 있습니다. 1) Redux Persist Gate는 클라이언트 사이드에서만 작동되도록 설계되었기 때문에, 서버 사이드 렌더링에서는 적용되지 않습니다. 따라서 이것이 문제가 될 수 있습니다. 2) 새로고침할 때마다 Local storage에서 데이터를 가져오는 것은 하나의 해결 방법입니다. 하지만 이러한 방법은 클라이언트 사이드에서만 작동하므로, Next.js의 SSR 기능을 최대한 활용하지 못하게 됩니다. 3) 대신 Next.js와 Redux Toolkit을 함께 사용하여 SSR을 활용하는 방법을 고려해 볼 수 있습니다. 이 경우에는 `getServerSideProps` 또는 `getInitialProps` 함수를 사용하여 서버 측에서 스토어를 초기화하고, 초기 상태를 생성합니다. 그런 다음 이 초기 상태를 페이지 컴포넌트에 주입하여 클라이언트 사이드의 스토어를 초기화할 수 있습니다. 이렇게 하면 페이지가 첫 렌더링될 때 필요한 모든 데이터가 이미 스토어에 있게 되므로, 새로 고침 시 데이터 손실 문제를 해결할 수 있습니다. 참고로 아래는 Next.js에서 Redux Toolkit을 사용하여 SSR환경에서 상태 관리를 하는 방법에 대한 코드 예시입니다: ```jsx // store.js import { configureStore } from '@reduxjs/toolkit' import rootReducer from './reducer' export function initializeStore (preloadedState = {}) { return configureStore({ reducer: rootReducer, preloadedState, }) } // _app.js import { initializeStore } from '../store' function MyApp({ Component, pageProps }) { const store = initializeStore(pageProps.initialReduxState) return ( <Provider store={store}> <Component {...pageProps} /> </Provider> ) } MyApp.getInitialProps = async ({ ctx }) => { // Create a new Redux store instance const reduxStore = initializeStore() // Run all sagas on the server await runSagaOnServer(ctx, reduxStore) // Pass the state of our Redux store as a prop return { initialReduxState: reduxStore.getState() } } ``` 이 방법은 리듀서와 사가(비동기 액션 수행)를 포함하여 Next.js에서 모든 Redux 기능을 활용할 수 있게 해줍니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!