이제 서버 사이드 렌더링을 구현한 프로젝트에 코드 스플리팅을 도입해 볼 차례입니다. 일단 리액트에서 공식적으로 제공하는 코드 스플리팅 기능인 React.lazy와 Suspense는 서버 사이드 렌더링을 아직 지원하지 않습니다. 현재(2019년 4월)로서는 리액트 공식 매뉴얼에서도 서버 사이드 렌더링과 코드 스플리팅을 함께 사용할 때는 Loadable Components를 사용할 것을 권장하고 있습니다.

Loadable Components에서는 서버 사이드 렌더링을 할 때 필요한 서버 유틸 함수와 웹팩 플러그인, babel 플러그인을 제공해 줍니다. 일단 yarn을 사용하여 Loadable Components를 설치해 보세요.

$ yarn add @loadable/component @loadable/server @loadable/webpack-plugin @loadable/babel-plugin

19장에서는 @loadable/components만 설치했는데, 이번에는 설치하는 패키지가 꽤 많지요? 각각 서버 사이드 렌더링 시 중요한 역할을 하는 라이브러리입니다.