[이슈] getServerSideProps 함수 안에서 실행되는 dispatch 함수가 종료되기까지 너무 오랜시간이 걸리는 이슈

[이슈] getServerSideProps에서 실행되는 dispatch 함수가 종료되기까지 오랜 시간이 걸리는 문제.

export const getServerSideProps = wrapper.getServerSideProps(async context => {
  const cookie = context.req ? context.req.headers.cookie : '';

  axios.defaults.headers.Cookie = '';
  if (context.req && cookie) {
    axios.defaults.headers.Cookie = cookie;
  }
  
  context.store.dispatch(getUserInfoRequest());
  context.store.dispatch(getFollowersRequest());
  context.store.dispatch(getFollowingsRequest());
  context.store.dispatch(getUserPaperRequest(0));
  context.store.dispatch(getCarrerListRequest());
  context.store.dispatch(END);
  await context.store.sagaTask.toPromise();

  const user = context.store.getState().USER.me;

  if (user === null) {
    context.res.writeHead(302, { Location: '/login' });
    context.res.end();
  }

  return { props: { user } };
});

현재 getServerSideProps를 사용해 서버사이드렌더링일때 dispatch를 이용해 서버에 api 요청을 해서 데이터를 가져와 redux store의 state를 채워주고있습니다. 그런데 초기 로딩 속도가 너무 느려서 이유를 찾고있었는데 서버사이드렌더링에서 속도가 지연되는거 같은데 도무지 해결할 방법이 떠오르지 않고 검색 키워드도 마땅한게 생각나지 않아 인프런을 통해 제로초님께 질문을 드렸다.. 그랬더니 몇분뒤 바로 원인을 말씀해주셨다..

원인

원인은 바로 redux saga에서 지원하는 throttle..!!!!

잡았다 요놈..

saga에서 지원하는 throttle은 현재 버그가 있기때문에 만약 같은 기능을 구현하고 한다면 lodash의 throttle을 사용해보라고 하신다.

function* watchGetHashtagPapers() {
  yield throttle(5000, getHashtagPaperRequest, getHashtagPapers);
}

위와같이 답변을 받고 throttle을 takelatest로 대체해보니 세상에...🥺

이렇게 속도가 전보다 빨리졌다..!!