NextJS next-redux-wrapper hydrate 버그 수정

next-redux-wrappe 공식 문서에서 next js에서 store를 관리하는 방법 2가지를 소개합니다.

1. 서버와 클라이언트 스토어를 분리하는 방법
2. 클라이언트 쪽 스토어에 서버 쪽 스토어를 덮어씌우는 방법

그중 2번째 방법을 사용하고 있었는데 아마도 초기 리덕스 설정을 할 때 _app.tsx에 wrapper.getInitialAppProps를 사용하면 자동적으로 서버와 클라이언트 store를 관리해 주는 것으로 착각한 거 같습니다. 즉, 지금까지 의미 없는 서버 쪽 store를 호출해 hydrate를 계속 발생시키고 있었던 겁니다. 서버 쪽에서 의미 없는 hydrate를 계속 발생시키니 rootReducer코드를 보면 서버가 보내는  action.payload에 store의 초기값이 담겨 오므로 클라이언트의 store가 계속 초기화되는 것입니다.

const rootReducer = (state: any, action: any) => {
  switch (action.type) {
    case HYDRATE:
      return { ...state, ...action.payload };

클라이언트의 store가 계속 초기화 되서 각 페이지마다 이용 서비스를 체크하는 saga(api 통신 후 전역스토어에 저장해 주는 역할)를 호출하지 않으면 전역 store에 관리되고 있는 menu가 초기화되므로 사이드바의 메뉴 필터가 정상적으로 작동하지 않는 문제가 생깁니다.

문제 해결을 위한 2가지 방법

1. wrapper.getInitialAppProps으로 감싸져 있으니 서버쪽에서 서비스를 체크하는 api를 호출한 후 menu의 전역 상태값을 넣어주자

이 방법은 페이지를 이동할때마다 중복 api가 호출됩니다. 클라이언트 호출에서 서버 호출로 바뀐 것뿐 근본적인 문제가 해결되지 않습니다. 또한 menu 말고 다른 전역 상태값들도 신경 써야 되므로 매우 비효율적이고 광범위한 작업이 됩니다. 2. wrapper.getInitialAppProps를 지워 의미 없는 HYDRATE를 방지하자! getInitialProps는 nextjs에서 지양하는 방법이기도 하고 굳이 여기서 서버 쪽 store를 호출해 HYDRATE를 발생시켜 스토어를 초기화시킬 이유가 없습니다.

따라서 2번 방법을 적용합니다.

참고 문서: next-redux-wrapper