[사전 미션 - CSR을 SSR로 재구성하기] - 월하(남수민) 미션 제출합니다.

[vi-wolhwa]

🤔 생각해 보기

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

CSR과 SSR의 초기 페이지 로딩 시간에는 차이가 있습니다. 아래 표로 그 차이를 정리하였습니다:

방식	CSR (Client-Side Rendering)	SSR (Server-Side Rendering)
로딩 과정	빈 HTML과 JavaScript 파일을 받아 브라우저에서 렌더링	서버에서 완성된 HTML을 받아 브라우저에 즉시 표시
초기 화면	자바스크립트 실행 전에는 빈 화면이나 로딩 화면이 표시됨	즉시 완성된 콘텐츠가 표시됨
사용자 경험	초기 로딩이 느리게 느껴질 수 있음	빠르게 로딩된 것처럼 느껴짐
로딩 속도 차이	JavaScript 다운로드 및 실행 시간으로 인해 느림	서버에서 완성된 HTML을 받아오기 때문에 빠름

• SSR이 더 빠른 이유: 서버에서 미리 렌더링된 HTML을 클라이언트에게 보내주기 때문에, 초기 로딩 시 브라우저가 즉시 콘텐츠를 표시할 수 있습니다. 반면 CSR은 JavaScript 파일을 로드하고 실행하는 시간이 추가되어 초기 로딩이 느려집니다.

---

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

**서버 측에서 데이터를 가져오는 방식(SSR)**과 **클라이언트 측에서 데이터를 가져오는 방식(CSR)**의 차이는 아래와 같습니다:

1. SSR (Server-Side Rendering):

   • 서버가 데이터를 미리 가져와 HTML을 생성한 후 클라이언트에 전달
   • 초기 로딩 시점부터 완성된 콘텐츠가 표시됨
   • 장점: 초기 로딩 속도가 빠르고, SEO에 유리함
   • 단점: 서버 부하가 클 수 있음

2. CSR (Client-Side Rendering):

   • 클라이언트가 빈 HTML을 받은 후 JavaScript가 API를 호출하여 데이터를 가져옴
   • 데이터를 받아온 후 브라우저가 동적으로 렌더링
   • 장점: 클라이언트에서 동적 상호작용이 빠름
   • 단점: 초기 로딩 속도가 느리고, SEO에 불리할 수 있음

---

결론:

• SSR은 빠른 초기 로딩과 SEO에 유리하며, 서버에서 모든 데이터를 처리해 클라이언트에 전달합니다.
• CSR은 클라이언트에서 데이터를 처리하고 화면을 동적으로 렌더링하며, 초기 로딩이 느리지만 이후 상호작용이 더 부드럽습니다.