이제 서버를 빌드하고 다시 시작하세요.

$ yarn build:server
$ yarn start:server

http://localhost:5000/red 페이지에 들어가 CSS도 함께 적용되는지 확인하고, 개발자 도구의 Network 탭에서 서버 사이드 렌더링이 잘되었는지 검증해 보세요. 여기서 링크를 눌러 이동할 때는 클라이언트 렌더링이 되어야 합니다. 즉, 다른 링크를 클릭하여 다른 페이지로 이동할 때 네트워크 요청이 추가로 발생하지 않아야 합니다.

서버 사이드 렌더링을 구현하면 이렇게 첫 번째 렌더링은 서버를 통해 하지만, 그 이후에는 브라우저에서 처리합니다.

▲ 그림 20-8 기본적인 서버 사이드 렌더링 완성

 

결과물이 잘 나타났나요? 기본적인 서버 사이드 렌더링은 모두 완성했습니다!