이 과정에서 리액트 라우터 안에 들어 있는 StaticRouter라는 컴포넌트가 사용되었습니다. 이 라우터 컴포넌트는 주로 서버 사이드 렌더링 용도로 사용되는 라우터입니다. props로 넣어 주는 location 값에 따라 라우팅해 주지요. 지금은 req.url이라는 값을 넣어 주었는데요. 여기서 req 객체는 요청에 대한 정보를 지니고 있습니다.

StaticRouter에 context라는 props도 넣어 주었습니다. 이 값을 사용하여 나중에 렌더링한 컴포넌트에 따라 HTTP 상태 코드를 설정해 줄 수 있습니다.

지금 당장 JS 파일과 CSS 파일을 웹 페이지에 불러오는 것은 생략하고, 리액트 서버 사이드 렌더링을 통해 만들어진 결과만 보여 주도록 처리했습니다. 서버를 다시 빌드하고 실행해 보세요.

$ yarn build:server
$ yarn start:server

이제 브라우저로 http://localhost:5000/ 경로에 들어가서 다음과 같은 화면이 보이는지 확인하세요.

▲ 그림 20-5 서버 사이드 렌더링 첫 번째 결과