더북(TheBook)

22.2.3 서버사이드 렌더링 준비

 

서버사이드 렌더링을 구현하려면 클라이언트에서 준비한 컴포넌트 코드를 Node.js에서 사용해야 합니다. 즉, JSX와 ES6 문법을 사용해야 한다는 말인데 Node v8 기준으로 ES6 문법의 import/export는 작동하지 않으며, JSX는 당연히 사용할 수 없습니다.

결국 리액트 관련 코드를 불러오려면 바벨을 사용해야 합니다. 서버에서 바벨을 설정하여 일반 자바스크립트에서는 지원하지 않는 문법들을 사용해야 하는데요. 방법은 여러 가지가 있습니다.

예를 들어 babel-node를 사용하여 babel presetplugin을 적용해서 바로 코드를 실행하는 방법이 있는데, 이 방법은 불필요한 메모리를 추가로 사용하므로 권장하지 않습니다. 또 런타임에서 코드를 변환하여 실행하는 것이 아니라, 미리 바벨로 변환하여 실행하는 방법도 있습니다. 이 방법은 성능상 문제는 딱히 없지만, 리액트 프로젝트에 필요한 node_modules들이 똑같이 필요하기 때문에 패키지를 동일하게 설치해야 하는 단점이 있습니다. 따라서 서버 파일을 리액트 프로젝트 내부에 작성하는 것이 아니라면 그렇게 좋은 방법은 아닙니다.

우리는 webpack을 사용합니다. webpack으로 바벨 로더를 적용하여 코드를 변환하고, 파일 하나로 만들 것입니다. 리액트 관련 코드를 서버에서 쉽게 불러와 사용할 수 있습니다.

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