20210322 - NextJS SSG관련 이슈

developer_key·2021년 3월 22일
2
post-thumbnail

최근 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가 필요없는 상황에서 실행되는게 싫어서 저렇게 처리한것 같다.
기존 코드에 문제가 생길 수 있으니 관련 테스트가 좀 필요해보인다.

profile
발전하는 프론트엔드 개발자

관심 있을 만한 포스트

2개의 댓글

comment-user-thumbnail
2021년 3월 23일

unmount 시 확인해보세용

1개의 답글