20.4.4 서버에서 리덕스 설정 및 PreloadContext 사용하기

    이제 서버에서 리덕스를 설정해 줍시다. 서버에서 리덕스를 설정하는 것은 브라우저에서 할 때와 비교하여 큰 차이가 없습니다.

    index.server.js

    import React from 'react';
    import ReactDOMServer from 'react-dom/server';
    import express from 'express';
    import { StaticRouter } from 'react-router-dom';
    import App from './App';
    import path from 'path';
    import fs from 'fs';
    import { createStore, applyMiddleware } from 'redux';
    import { Provider } from 'react-redux';
    import thunk from 'redux-thunk';
    import rootReducer from './modules';
    
    (...)
    // 서버 사이드 렌더링을 처리할 핸들러 함수입니다.
    const serverRender = (req, res, next) => {
      // 이 함수는 404가 떠야 하는 상황에 404를 띄우지 않고 서버 사이드 렌더링을 해 줍니다.
    
      const context = {};
      const store = createStore(rootReducer, applyMiddleware(thunk));
      const jsx = (
        <Provider store={store}>
          <StaticRouter location={req.url} context={context}>
            <App />
          </StaticRouter>
        </Provider>
      );
      const root = ReactDOMServer.renderToString(jsx); // 렌더링을 하고
      res.send(createPage(root)); // 결과물을 응답합니다.
    };
    
    (...)

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.