[error] getServerSideProps 으로 SSR 실행 하기

✍️ 처음에 HYDRATE 라는 개념을 몰랐어서, 어디서부터 잘 못 됬는지도 모르겠고, 막막했었는데 “단서” 의 포스팅을 만나 실마리를 얻을 수 있었다. 글쓴이에게 감사한다. 🙏

상황

• getServerSideProps로 mainPosts를 불러오는 액션을 실행.
  
  (next-redux-wrapper 8.0.0 사용)

  import { LOAD_MAIN_POSTS_REQUEST } from '../reducers/post';
  import wrapper from '../store/configureStore';
  import { END } from "redux-saga";
  
  ....
  
  export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req, res, ...etc }) => {
      store.dispatch({
          type: LOAD_MAIN_POSTS_REQUEST
      });
  
      store.dispatch(END);
  
      await store.sagaTask.toPromise();
  });

• redux dev tools 로 NEXT_REDUX_WRAPPER_HYDRATE 액션 실행 확인,
• console 창에 initialStateFromGSPorGSSR 에 mainPosts가 들어가는 것을 확인

▶️ getServerSideProps 는 제대로 실행 되었음을 확인.

• 정작 store에는 mainPosts가 들어가 있지 않음.

해결

• 찾아 보다가 next-redux-wrapper 의 HYDRATE 라는 액션을 통해 서버와 클라이언트의 상태 값을 합쳐 준다는 것을 알게 됨. - 단서
• reducer 의 index.js 에서 HYDRATE 처리 코드 추가.

  const rootReducer = (state, action) => {
       switch (action.type) {
           case HYDRATE:
           console.log('HYDRATE', action);
           return action.payload;
           default: {
           const combinedReducer = combineReducers({
               user,
               post,
           });
           return combinedReducer(state, action);
           }
       }
   };

• store에 mainPosts에 들어가는 것 확인.

참고 문헌

• https://velog.io/@vltea/Next.js-의-SSR-에서-redux-사용하기-next-redux-wrapper
• https://github.com/kirill-konshin/next-redux-wrapper#state-reconciliation-during-hydration
• https://www.inflearn.com/questions/230014/typeerror-nextcallback-is-not-a-function-next-redux-wrapper-7-0