20.4.8 redux-saga를 위한 서버 사이드 렌더링 작업

redux-thunk를 사용하면 Preloader를 통해 호출한 함수들이 Promise를 반환하지만, redux-saga를 사용하면 Promise를 반환하지 않기 때문에 추가 작업이 필요합니다.

우선 서버 사이드 렌더링을 위한 엔트리 파일에 redux-saga 미들웨어를 적용하세요.

index.server.js

(...)
import createSagaMiddleware from 'redux-saga';
import rootReducer, { rootSaga } from './modules';

(...)

// 서버 사이드 렌더링을 처리할 핸들러 함수입니다.
const serverRender = async (req, res, next) => {
  // 이 함수는 404가 떠야 하는 상황에 404를 띄우지 않고 서버 사이드 렌더링을 해 줍니다.

  const context = {};
  const sagaMiddleware = createSagaMiddleware();

  const store = createStore(
    rootReducer,
    applyMiddleware(thunk, sagaMiddleware)
  );

sagaMiddleware.run(rootSaga);
(...)

---

 

여기까지는 스토어 생성 및 미들웨어 설정 부분이 브라우저용 엔트리 index.js에서 해 준 것과 똑같습니다.