CSR vs SSR - 로드되는 HTML 파일의 내용 비교

CSR과 SSR의 차이를 공부할 때, CSR 방식은 초기에 서버로부터 빈 껍데기의 HTML 파일을 받아오고 동적으로 컨텐츠를 채운다고 배웠고, SSR 방식은 렌더링 준비가 어느정도 된 상태의 HTML 파일을 받아온다고 배웠다. 

 

실제로 그런지 확인해보고자 내가 참여한 프로젝트(CSR)와 SSR 방식으로 구축된 서비스의 HTML 파일을 비교해보았다 😋

 

CSR 웹사이트

 

[개발자 도구 - 네트워크 탭 - HTML 파일] 선택

HTTP 헤더 포함 다양한 정보들이 나온다.

 

 

 

우클릭하고 [소스 패널에서 열기] 클릭

 

그럼 소스(Source) 탭으로 이동해서 서버로부터 받은 HTML 파일 내용이 보이는데 진짜 껍데기만 있다.

• <div id="root"></div> 태그 안에 초기 컨텐츠가 없는 것이 특징이다. 이는 리액트가 클라이언트에서 실행되어 UI를 구성하고, 컨텐츠를 동적으로 채우는 CSR 방식임을 나타낸다.

 

사실 리액트 프로젝트의 index.html 파일을 까보면 같은 내용을 확인할 수 있다. (다른 방식으로 빌드해도 마찬가지일지는 모르겠지만 아마 그렇지 않을까 싶다) 다만 프로젝트 소스의 index.html 파일에는 <script> 태그가 없는데, 이는 빌드 과정에서 추가된다. 자세한 내용은 이전에 작성했던 포스팅을 참고해서 복기해보자.

• React | 리액트 프로젝트의 기본 실행구조 분석

 

 

SSR 웹사이트

사실 아직 SSR을 구축해본 경험은 없어서 자세히는 모르겠지만 그래도 HTML 파일을 까보는 정도는 할 수 있다. 위에서와 똑같이 하면 되니까 ㅎ

 

마침 네이버 모바일 블로그가 SSR로 전환한 과정에 대한 글(어서 와, SSR은 처음이지? - 개발 편)을 발견해서 이를 예시로 삼기로 했다. 

 

네이버 모바일 블로그에 가서 똑같이 HTML 파일을 까보면, 

....

....

 

 

<script> 태그의 내용을 포함하고 있고, 여러 메타 데이터나 구조화된 데이터가 미리 준비되어 오는 것을 확인할 수 있다. 이러한 정보를 서버로부터 요청할 필요없이 바로 사용할 수 있다.

 

이를 통해 확실히 클라이언트가 처리할 작업이 줄어들면서 초기 렌더링 시간에서는 SSR이 유리할 것임을 짐작할 수 있다.