[사전 미션 - CSR을 SSR로 재구성하기] - 해리(최현웅) 미션 제출합니다.

[hwinkr]

🤔 생각해 보기

1. CSR과 SSR에서 초기 페이지 로딩 시간에 어떤 차이가 있었을까? 그 이유는?

• 💡 답변 요령
  • 사용자 관점에서 CSR과 SSR에서 각각 어떻게 페이지를 로딩하는지와 느끼는 초기 로딩 속도에 어떤 차이가 있었는지 생각해 보자.
  • SSR이 왜 더 빠르게 느껴지는지 이유를 설명해 보자.

SSR	CSR

lighthouse 도구를 사용해서 LCP를 측정한 결과, SSR이 CSR보다 약 3배 정도 빠른 것을 확인할 수 있었습니다. 한 페이지에서 가장 큰 컨텐츠를 그리는데 걸리는 시간이 3배 정도 빠르다는 것은 사용자 관점에서 봤을 때도, 초기 페이지 로딩 속도가 SSR이 훨씬 빠르다는 것을 알 수 있습니다.

SSR	CSR

SSR이 더 빠르게 느껴지는 이유는, 위 이미지 표에서도 확인할 수 있듯 초기에 클라이언트가 페이지 컨텐츠를 그리기 위한 자바스크립트 파일과 상호작용을 위한 자바스크립트 파일을 모두 다운로드 받는 것이 아니라 서버에서 컨텐츠가 구성되어 있는 HTML을 구성한 후 클라이언트에서 넘겨주기 때문입니다. 쉽게 정리해 보자면, 클라이언트가 할 일이 줄어들었기 때문이라고 할 수 있습니다.

CSR -> (자바스크립트를 받아오는 시간, 자바스크립트가 실행 되면서 서버에 비동기적으로 요청하고,) 받은 데이터를 바탕으로 컨텐츠를 그리는 시간이 모두 포함
SSR -> (자바스크립트를 받아오는 시간, 자바스크립트가 실행 되면서 서버에 비동기적으로 요청하고,) 이 과정이 생략되고 컨텐츠가 그려진 HTML을 기다리는 것만 포함

2. 서버 측에서 데이터를 가져오는 방식과 클라이언트 측에서 데이터를 가져오는 방식을 비교해서 설명한다면?

• 💡 답변 요령
  • 서버와 클라이언트가 각각 데이터를 처리하는 방식의 전반적인 흐름을 설명해 보자.
  • SSR의 경우, index.html을 기반으로 동적으로 콘텐츠를 렌더링하는 과정을 설명하며 CSR 렌더링 과정과 비교할 수 있다.
  • 코드 레벨이 아니라, 두 방식이 어떻게 데이터를 처리하고 화면에 반영하는지를 개괄적으로 그려 보거나 글로 설명해 보자.

CSR

CSR의 경우 서버에서 비어있는 html과, 그 html 내용을 채우고 사용자와 상호작용할 수 있는 코드들이 담긴 자바스크립트 파일을 전달해 줍니다.

이미지에서 확인할 수 있듯, 내용이 채워져있지 않은 html을 받게됩니다. 이 후, 자바스크립트를 통해서 DOM을 채우고 상호작용하게 됩니다. 자바스크립트 파일이 너무 큰 경우 사용자가 첫 화면을 보기까지 굉장히 오랜 시간이 걸릴 수 있습니다. 코드 스플리팅과 같은 자바스크립트 파일을 나누는 작업을 하지 않는 이상, 필요한 데이터를 초반에 모두 전달해준다고 볼 수 있습니다.

SSR의 경우 비어있는 html을 전달해주는 것이 아닌, 어느 정도 내용이 채워진 화면을 클라이언트에 전달해 줍니다.

따라서 클라이언트에서는 해당 html 파일만 받으면 화면을 그려줄 수 있기 때문에 사용자가 첫 화면을 빠르게 볼 수 있습니다. 이 후, 사용자가 페이지를 이동하거나 상호작용을 할 때 서버에서 변경된 html 데이터를 전달해 줍니다. 데이터를 가져오고, html을 그리는 모든 책임을 가지고 있기 때문에 서비스 규모가 커진다면 서버 부하가 많이 생길 수 있습니다.