[React] Serverside rendering

Loadable Component 를 이용해서 서버사이드 렌더링 틀을 잡아보자

 

이전 방식들은 잘 모르지만,

리엑트에서 권장하는 서버사이드 렌더링 방식으로 한번 틀을 잡아보도록 하자

 

 

먼저 필요한 라이브러리들을 설치해준다.

 

server.tsx 컴포넌트 생성

 

 

 

이제 서버 전용 빌드를 만들자

 

 

 

webpack.config.js를 복사해서 server.js 를 생성시켜준다.

 

불필요한 플러그인과 코드들을 지운다

-> 나중에 github 으로 지운 내용 보기

 

scripts 의 build.ssr 도 복사를 하고

마찬가지로 불필요한 코드 제거

-> github에서 참고

 

  

그 후 node scripts/build.ssr.js 로 빌드 후

node ./dist/server.js 로 실행을 해보면

 

여기까지 서버 빌드 성공

 

 

이제 웹팩 번들링 대신 노드 모듈을 import 해보자

웹팩 번들링 대신 노드 모듈을 import하는 방법

 

webpack.config.server.js 에서 

를 추가해준다.

 

이러면 server.js 에 코드가 드라마틱하게 줄어든걸 볼 수 있다.

 

 

이제 서버 사이드 렌더링을 위해 server.tsx 를 수정해보자