CSR(Client-Side Rendering)와 SSR(Server-Side Rendering)

KangHo Lee's avatar
Nov 26, 2024
CSR(Client-Side Rendering)와 SSR(Server-Side Rendering)

Server-Side Rendering (SSR)

  • 서버 사이드 렌더링에서는 웹 페이지의 콘텐츠가 서버 측에서 렌더링됩니다.
  • 서버는 완전한 HTML 페이지를 생성하여 클라이언트에 전송하고, 브라우저는 이를 즉시 렌더링합니다.

특징

  • 초기 로드 속도가 빠릅니다. 브라우저가 이미 렌더링된 HTML을 즉시 표시할 수 있기 때문입니다.
  • 페이지 간 전환 시 전체 페이지를 다시 로드해야 하므로 상대적으로 느릴 수 있습니다.
  • 검색 엔진 최적화(SEO)에 유리합니다. 검색 엔진 봇이 HTML 콘텐츠를 쉽게 인덱싱할 수 있기 때문입니다.

Client-Side Rendering (CSR)

  • 클라이언트 사이드 렌더링에서는 웹 페이지의 콘텐츠가 클라이언트(브라우저) 측에서 렌더링됩니다.
  • 서버는 초기 HTML과 필요한 자바스크립트 파일을 제공하고, 브라우저는 이 자바스크립트 파일을 실행하여 페이지를 동적으로 구성합니다.

특징

  • 초기 로드 속도가 느릴 수 있습니다. 브라우저가 자바스크립트 파일을 다운로드하고 실행하여 콘텐츠를 렌더링해야 하기 때문입니다.
  • 한 번 로드된 후 페이지 간 전환이 빠르고, 사용자 상호작용에 반응이 빠릅니다.
  • 검색 엔진 최적화(SEO)가 어렵습니다. 검색 엔진 봇이 자바스크립트를 실행하지 않으면 콘텐츠를 인덱싱하기 어렵기 때문입니다.
 
Share article

devleekangho