[사전 미션 - CSR을 SSR로 재구성하기] - 초코(강다빈) 미션 제출합니다.

[00kang]

🤔 생각해 보기

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

• SSR (Server-Side Rendering):
  서버에서 모든 데이터와 콘텐츠가 준비되어 있어 클라이언트 측에서 추가적인 데이터 요청이 필요 없기 때문에 페이지가 더 빨리 렌더링됨

• CSR (Client-Side Rendering):
  CSR 방식은 클라이언트에서 모든 UI 구성 요소를 동적으로 생성하므로, JavaScript와 데이터 요청이 완료되어야 페이지가 완전히 렌더링됨. 따라서 더 오래 걸림.

csr.mp4

ssr.mp4

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

• SSR (Server-Side Rendering)

  • 요청: 사용자가 URL을 입력하면 요청이 서버로 전송.
  • 서버 처리: 서버가 필요한 데이터를 가져와서 HTML 페이지를 생성.
  • 응답: 완성된 HTML이 클라이언트로 전송.
  • 렌더링: 클라이언트는 받은 HTML을 즉시 렌더링하여 사용자에게 보여줌.

• CSR (Client-Side Rendering)

  • 요청: 사용자가 페이지에 접근하면 빈 HTML 템플릿과 JavaScript 파일을 요청.
  • 서버 응답: 서버가 기본 HTML과 JavaScript를 클라이언트로 보냄.
  • 클라이언트 처리: 클라이언트는 JavaScript를 실행하고 API 호출로 데이터를 가져옴.
  • 렌더링: 데이터를 기반으로 클라이언트가 HTML을 동적으로 생성하고 렌더링.