[사전 미션 - CSR을 SSR로 재구성하기] - 썬데이(김유선) 미션 제출합니다.

[useon]

🤔 생각해 보기

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

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

사용자 관점에서 지표를 확인하기 위해서 같은 환경으로 LightHouse를 측정했습니다.

• CSR

• SSR

CSR은 자바스크립트 파일 로드 이후 화면이 나타나기 때문에 초기 로딩 시간이 SSR 보다 느리고, SSR은 서버에서 완성된 HTML을 전달하므로 초기 화면이 CSR 보다 빨리 로드되기 때문에 로딩 시간의 차이가 발생한다고 생각합니다! 사용자 입장에서는 로딩 속도가 빠를수록 웹 페이지가 즉각적으로 응답하는 느낌을 받아 사용 만족도가 높아지고 이탈하는 비율이 낮아집니다.

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

• 💡 답변 요령

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

• 클라이언트 측 렌더링(CSR)
  처리 과정: 사용자가 웹 페이지에 접속하면 처음에는 빈 기본 틀(HTML)만 받아옵니다. 그리고 웹 페이지에서 자바스크립트를 실행해 필요한 데이터를 나중에 서버에 요청하고, 그 데이터를 받아와 화면을 그립니다.

• 서버 측 렌더링(SSR)
  처리 과정: 사용자가 웹 페이지에 접속하면 서버가 요청을 받아 필요한 데이터를 먼저 받아옵니다. 서버는 이 데이터를 이용해 HTML을 미리 완성한 상태로 사용자에게 보내줍니다.