리액트 서버사이드 렌더링과 라우터

Server Rendering with React and React Router

리액트는 서버랜더링을 제공하고 있습니다. 기본적으로 리액트로 구축된 환경에서 사용자가 웹페이지에 접속을 하면 다음과 같은 단계로 진행이 됩니다.

1. 사용자가 URL 을 브라우저에 입력하며 엔터를 누릅니다.
2. 서버는 GET의 “/”에 맞게 응답합니다.
3. 메인 컴포넌트를 랜더링한 후 그것을 기본 HTML 문서로 감싸줍니다. 그리고 이 전체를 response 합니다.
4. 이 응답은 브라우저로 보내지고 서버로부터 받은 HTML을 랜더링 엔진을 통해 작업하며 곧 사용자가 볼 수 있는 화면을 랜더링합니다.
5. 화면이 그려진 이후 자바스크립트를 다운받습니다.

이는 단순히 빈 HTML에 용량이 큰 JS번들만 추가된 클라이언트 랜더링과는 다릅니다. 완료된 HTML문서를 보내주기 때문에, 브라우저는 사용자에게 자바스크립트 다운로드가 완료되기 이전에 설정된/특정 UI를 보여줄 수 있습니다.

이제 webpack.config.js 파일에 서버/클라이언트 랜더링을 위한 환경 설정을 해야합니다. 크게 browserConfig, serverConfig 설정이 있습니다. (코드량이 많아 git 저장소를 통해 제공하도록 하겠습니다) 디렉토리 구조는 아래와 같습니다.

webpack.config.js
package.json
/src
  /browser
  /server
  /shared

우선 사용자에게 보여주는 간단히 메인 파일을 만들도록 하겠습니다. 생성된 파일은 다음과 같습니다. (코드는 저장소에서 확인 가능합니다)

• src/shared/App.js
• src/server/index.js
• src/browser/index.js

이제 직접 데이터를 넘기도록 하겠습니다. 여기서 중요한 것은 기본적으로 서버와 클라이언트의 콘텐츠(data) 내용이 같아야합니다. 그렇지 않을 경우 콘솔창에 오류가 출력됩니다. 이런 경우, window 객체를 이용하여 값을 전달할 수 있습니다.

window.__INITIAL_DATA__

서버사이드 렌더링 준비

클라이언트에서 준비한 컴포넌트 코드를 node.js에서 사용해야합니다. 즉, JSX와 ES6문법을 사용해야합니다. 하지만, Node v8 기준으로 사용이 어렵습니다. 그래서 webpack을 사용하여 바벨로더를 적용한 코드를 변환하고, 하나의 파일로 만들어서 리액트 관련 코드를 서버에서 쉽게 불러와서 사용할 수 있습니다.

서버에서도 엔트리 파일에 render 함수를 만들어서 컴포넌트를 렌더링합니다. 이때 서버용 렌더링 함수를 사용합니다. 이는 컴포넌트를 렌더링하여 문자열로 만들어줍니다.

라우터도 BrowserRouter가 아닌 StaticRouter를 사용해야 주소값을 직접 url이라는 props로 넣어서 사용할 수 있습니다.

서버전용 webpack 환경설정