[사전 미션 - CSR을 SSR로 재구성하기] - 에프이(박철민) 미션 제출합니다.

[chysis]

🤔 생각해 보기

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

▲ Lighthouse 측정 결과. CSR(왼쪽)과 SSR(오른쪽). SSR의 경우 SEO도 상당히 높아졌음을 알 수 있다.

• CSR의 경우 위 사진과 같이 빈 html 껍데기만 먼저 보여주고, 이어서 js를 불러온 뒤 화면의 구성 요소를 렌더링한다.

• SSR의 경우 서버에서 미리 렌더링 한 html 파일을 보내주기 때문에 처음부터 빈 화면을 보지 않게 된다. 이후 js를 불러와 상호 작용이 가능해진다.

• 💡 답변 요령

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

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

<서버 측에서 데이터를 가져오는 방식 - SSR>

1. 클라이언트가 웹 페이지를 요청하면, 서버에 요청을 보낸다.
2. 서버는 외부 API나 데이터베이스에서 필요한 데이터를 가져와 HTML을 만든다.
3. 서버는 완성된 HTML 페이지를 클라이언트에게 전달한다.
4. 클라이언트는 서버에서 받은 완성된 HTML을 브라우저에 렌더링한다.

<클라이언트 측에서 데이터를 가져오는 방식 - CSR>

1. 클라이언트가 웹 페이지를 요청하면, 서버는 HTML과 JS 번들 파일을 전달한다.
2. 클라이언트는 페이지를 불러오고 나서, 필요한 데이터가 있으면 서버에 추가로 요청한다.
3. 서버는 요청받은 데이터만을 클라이언트에게 전달한다.
4. JS 코드가 클라이언트 측에서 데이터를 받아와 동적으로 HTML을 렌더링한다.

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