[사전 미션 - CSR을 SSR로 재구성하기] - 쿠키(김진호) 미션 제출합니다.

[jinhokim98]

🤔 생각해 보기

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

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

CSR의 경우 빈 index.html과 js 번들을 가져온 후. 그 js를 실행하면서 페이지를 랜더링한다.
그러므로 사용자에게 먼저 빈 페이지가 보이고 js 실행이 완료가 되어야 온전한 페이지를 보여주기 때문에 초기 로딩 속도가 느리다.

SSR의 경우 서버에서 아래 사진과 같이 이미 html을 만들어서 클라이언트에게 주게 된다.
그러므로 사용자에게 빈 페이지가 아닌 화면을 보여줄 수 있어 초기 로딩 속도가 빠르다.

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

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

서버 측에서 데이터를 가져오는 방식은 클라이언트에서 페이지 요청을 했을 때, 서버에서 바로 데이터를 가져온다. 그 후 서버에서 html을 만들어 클라이언트에게 전달한다.

반면 클라이언트 측에서 데이터를 가져오는 방식은 api를 통해 필요한 데이터를 받아온 뒤 js를 이용하여 동적으로 화면을 그리는 과정이 일어난다.

SSR방식은 페이지 요청을 했을 때 바로 데이터를 불러와 html에 데이터를 넣어서 받아오기 때문에 로딩 속도가 빠르다고 생각할 수 있고, CSR방식은 페이지 요청을 했을 때 빈 index.html을 받고, js를 실행하다가 api 요청을 보내고 필요한 데이터를 받은 뒤 내용을 채워서 화면을 완성시키니 로딩 속도가 느리다고 생각할 수 있다.