[사전 미션 - CSR을 SSR로 재구성하기] - 토다리(이태훈) 미션 제출합니다.

[Todari]

🤔 생각해 보기

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

• 사용자는 SSR이 CSR보다 초기 페이지 로딩이 더 빠르다고 느낍니다.

• CSR의 경우 브라우저는 최소한의 HTML과 JS 파일을 로딩하고, JS파일이 실행되면서 화면을 구성하게 됩니다. 반면 SSR의 경우 브라우저는 이미 완성된 HTML 페이지를 받아오게 됩니다.

• 사용자가 느끼기에는 즉시 컨텐츠가 보이는 SSR에 비해 CSR의 JS가 컨텐츠를 구성하는 동안 화면이 변경되는 것을 눈으로 확인하기 때문에, 초기 로딩이 더 오래 걸린다고 느끼게 됩니다.

• 💡 답변 요령

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

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

서버 측에서 데이터를 가져오는 방식

• 사용자가 데이터를 요청
• 서버에서 필요한 데이터를 DB 혹은 API에서 가져옴
• 가져온 데이터를 기반으로 index.html에 동적으로 콘텐츠를 삽입하여 HTML을 생성함
• 완성된 HTML을 브라우저에 전달하여 즉시 렌더링

클라이언트에서 데이터를 가져오는 방식

• 사용자가 데이터를 요청

• 서버에서 브라우저에게 HTML과 JS 파일 전달하고 이를 이용해 기본 화면 구성

• 필요한 데이터를 API 호출 등을 통해 서버로부터 전달받음

• 가져온 데이터와 JS를 바탕으로 컨텐츠를 동적으로 �렌더링

• 💡 답변 요령

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