20210322 - NextJS SSG관련 이슈

최근 SSG 도입을 위해 Nextjs의 getStaticProps를 적극 활용해 보고 있다. 관련 문서들을 정독하고 있는데(한글 자료가 별로 없음 ㅜ)

이슈 1. page에서 store 접근

기존 페이지 getInitialProps에서는 app.tsx에서 next-redux-wrapper에서 redux를 연결시켜주어 context에서 store에 접근이 가능하였지만, SSG를 위해서는 page 마다 따로 연결시켜줘야 하나보다..

요런식으로

export const getStaticProps = wrapper.getStaticProps(async context => {
  return { props: {} };
});

이슈 2. hydrate 관련 문제

분명 SSG에서도 store에 접근이 가능하다고 했는데, 왜 store에 저장이 안되지 ? 혹시 안되는건가... 하고 유심히 코드를 뒤져보았다.
hydrate 이놈 .. SSR을 도입하면서 골머리를 썩였던놈

찾아보던 중 우리 enhancedReducer에서 이상한 점을 찾았다.

  if (action.type === HYDRATE) {
    if (state === initialRootState) {
      return {
        ...state,
        ...action.payload,
      };
    }
    return state;
  }

으음 .. if (state === initialRootState) 이녀석은 왜 필요한거지 관련 자료를 찾아
다음과 같이 수정해 주었다.

 if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };
    return nextState;
  }

잘 작동한다. 아마 Hydrate가 필요없는 상황에서 실행되는게 싫어서 저렇게 처리한것 같다.
기존 코드에 문제가 생길 수 있으니 관련 테스트가 좀 필요해보인다.