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

[soi-ha]

🤔 생각해 보기

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

• 💡 답변 요령

  • 사용자 관점에서 CSR과 SSR에서 각각 어떻게 페이지를 로딩하는지와 느끼는 초기 로딩 속도에 어떤 차이가 있었는지 생각해 보자.

  이번 사전미션 페이지를 사용자 관점에서 봤을 때 느낀 점을 적어보았습니다.. (그런데, 다른 크루들 적은 거 보니까 이렇게 적는게 아닌것 같기도...요...?)

    - CSR
        
        클릭했을 때 아무 반응이 없다가, 한번에 와다닥! 쏟아지는 느낌으로 페이지 로딩
        
        그렇기에 초기 로딩 속도는 느리다고 느껴짐
        
    - SSR
        
        클릭하자마자 부드럽게 샤라락~ 펼치지는 느낌으로 페이지 로딩
        
        그렇기에 초기 로딩 속도가 빠르다고 느껴짐
  

  • SSR이 왜 더 빠르게 느껴지는지 이유를 설명해 보자.

    SSR은 동작하는 것 보다 보여지는 것이 우선적으로 로딩되기에 CSR처럼 보는 것과 동작하는 것이 모두 마지막에 이뤄지는 것 보다 사용자는 더 빠르게 로딩된다고 느낄 것이다.

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

• 💡 답변 요령

  • 서버와 클라이언트가 각각 데이터를 처리하는 방식의 전반적인 흐름을 설명해 보자.

    SSR(서버 측 렌더링)

    • 클라이언트 요청 → 서버 데이터 처리 → HTML 생성 → 응답 → 상호작용

    CSR(클라이언트 측 렌더링)

    • 클라이언트 요청 → HTML 초기 로딩 → 데이터 요청 → 동적 렌더링 → 상호작용

  • SSR의 경우, index.html을 기반으로 동적으로 콘텐츠를 렌더링하는 과정을 설명하며 CSR 렌더링 과정과 비교할 수 있다.

  • 코드 레벨이 아니라, 두 방식이 어떻게 데이터를 처리하고 화면에 반영하는지를 개괄적으로 그려 보거나 글로 설명해 보자.

• CSR

  • 사용자가 사이트에 접속

  • 서버에게 index.html 파일을 받음 (이때 index 파일은 비어있음. 따라서 사용자에게 아무것도 보이지 않음)

  • html 파일에 담겨져있는 js 파일을 요청

  • js 파일을 서버로부터 받는 순간 사용자에게 화면이 보이게 됨

    사용자에게 화면이 보임과 동시에 동작할 수 있게 됨

  ⇒ TTI(Time To Interact)와 TTV(Time To View)가 동시에 가능해짐

  ⇒ 초기 로딩 속도는 느림

• SSR

  • 사용자가 사이트에 접속

  • 서버에게 index 파일을 받게 됨 (이미 만들어진 상태를 받아옴)

    이때부터 사용자는 화면을 볼 수 있으나 동작할 수는 없음

  • 서버에게 js 파일을 받음

    이때부터 사용자는 동작도 할 수 있게 됨

  ⇒ TTI와 TTV 사이에 공백이 존재함

  ⇒ 초기 로딩 속도는 빠름