[ODOQ] 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)

[One Day One Question]

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)에 대해서 설명해 주세요.

---

 

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)은 웹 페이지를 렌더링하는 두 가지 주요 방식입니다.

 

 

서버 사이드 렌더링(SSR)

• 작동 방식: 사용자가 웹 페이지를 요청하면, 서버에서 해당 페이지를 완전히 렌더링하여 HTML 형태로 클라이언트(브라우저)에 전달합니다.
• 장점:
  • 빠른 초기 로딩 속도: 서버에서 미리 렌더링된 HTML을 전달하므로, 브라우저는 이를 바로 표시할 수 있어 초기 로딩이 빠릅니다.
  • 검색 엔진 최적화(SEO)에 유리: 검색 엔진이 완전한 HTML 콘텐츠를 쉽게 크롤링할 수 있어 SEO 측면에서 유리합니다.
• 단점:
  • 서버 부하 증가: 모든 요청에 대해 서버가 렌더링 작업을 수행하므로 서버 자원 소모가 많을 수 있습니다.
  • 페이지 전환 시 전체 새로고침 발생: 페이지 이동 시마다 전체 페이지를 다시 로드하므로 사용자 경험이 다소 떨어질 수 있습니다.

 

 

클라이언트 사이드 렌더링(CSR)

• 작동 방식: 초기 로딩 시 최소한의 HTML과 JavaScript 파일을 받아오고, 이후 필요한 데이터는 클라이언트 측에서 API 호출 등을 통해 가져와 동적으로 페이지를 구성합니다.
• 장점:
  • 향상된 사용자 경험: 초기 로딩 이후에는 페이지 전환 시 전체 새로고침 없이 필요한 부분만 업데이트하므로 부드러운 사용자 경험을 제공합니다.
  • 서버 부하 감소: 클라이언트에서 대부분의 렌더링을 처리하므로 서버 자원 소모가 줄어듭니다.
• 단점:
  • 느린 초기 로딩 속도: 초기 로딩 시 필요한 JavaScript 파일과 데이터를 모두 받아와야 하므로 시간이 더 걸릴 수 있습니다.
  • SEO에 불리: 초기 HTML에 콘텐츠가 없고 JavaScript로 동적으로 생성되기 때문에 검색 엔진이 콘텐츠를 제대로 크롤링하지 못할 수 있습니다.

적용 사례:

• SSR: SEO가 중요한 블로그, 뉴스 사이트 등에서는 SSR이 유리합니다.
• CSR: 사용자와의 상호작용이 많고, 부드러운 페이지 전환이 중요한 대시보드, 이메일 클라이언트 등에서는 CSR이 적합합니다.