20장 서버 사이드 렌더링

20.1 서버 사이드 렌더링의 이해

20.1.1 서버 사이드 렌더링의 장점

• 검색 엔진이 페이지를 원활하게 수집
• 초기 랜더링 성능 개선

20.1.2 서버 사이드 렌더링의 단점

• 서버 리소스를 사용함. (캐싱과 로드밸런싱을 통해 성능 최적화 필요)
• 프로젝트 구조가 복잡해질 수 있음.

20.13 서버 사이드 렌더링과 코드 스플리팅 충돌

20.2 프로젝트 준비하기

//index.js 프로젝트에 라우터 적용
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root')
);


//app.js 컴포넌트에 라우트 설정(설정된 경로의 컴포넌트가 나타남)
import {Route} from 'react-router-dom';

function App() {
    return (
        <div>
            <Menu/>
            <hr/>
            <Route path="/red" component={RedPage}/>
            <Route path="/blue" component={BluePage}/>
        </div>
    );
}


//라우트 링크 설정
import {Link} from "react-router-dom";

const Menu = () => {
    return (
        <ul>
            <li>
                <Link to="/red">Red</Link>
            </li>
            <li>
                <Link to="/blue">Blue</Link>
            </li>
        </ul>
    );
};

20.3 서버 사이드 렌더링 구현하기

//webpack 설정 보이게 하기
git add .
git commit -m 'commit before ejcet'
yarn eject

20.3.1 서버 사이드 렌더링용 엔트리 만들기
20.3.2 서버 사이드 렌더링 전용 웹팩 환경 설정 작성하기
20.3.3 빌드 스크립트 작성하기
20.3.4 서버 코드 작성하기
20.3.5 정적 파일 제공하기

20.4 데이터 로딩

20.4.1 redux-thunk 코드 준비하기
20.4.2 Users, UsersContainer 컴포넌트 준비하기
20.4.3 PreloadContext 만들기
20.4.4 서버에서 리덕스 설정 및 PreloadContext 사용하기
20.4.5 스크립트로 스토어 초기 상태 주입하기
20.4.6 redux-saga 코드 준비하기
20.4.7 User, UserContainer 컴포넌트 준비하기
20.4.8 redux-saga를 위한 서버 사이드 렌더링 작업
20.4.9 usePreloader Hook 만들어서 사용하기

20.5 서버 사이드 렌더링과 코드 스플리팅

20.5.1 라우트 컴포넌트 스플리팅하기
20.5.2 웹팩과 babel 플러그인 적용
20.5.3 필요한 청크 파일 경로 추출하기
20.5.4 loadableReady와 hydrate

20.6 서버 사이드 렌더링의 환경 구축을 위한 대안