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

브라우저 렌더링

• 브라우저가 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 작업
• 요청해서 받은 내용 = HTML, CSS, JS 문서

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

• 클라이언트인 브라우저가 렌더링을 처리하는 방식
• 브라우저가 화면을 그리는 주체가 되는 것
• 브라우저에서 자바스크립트로 콘텐츠를 렌더링하는 방식
• 장점
  • 빠른 인터렉션 구현 가능 (새로고침 발생 X → 네이티브 앱과 비슷)
  • 뷰 렌더링을 브라우저가 담당 → 서버 트래픽 감소
• 단점
  • 첫 페이지 로딩 속도가 서버 사이드 렌더링에 비해 느림 (서버 첫 요청 시 모든 문서 파일을 받기 때문)
  • SEO(검색엔진최적화)에 대한 추가 보완 작업 필요

SSR (서버 사이드 렌더링)

• 클라이언트가 매번 서버에 데이터를 요청하여 서버에서 처리하는 방식
• 클라이언트에게서 요청이 매번 들어올 때마다 서버에서 새로운 화면을 만들어 제공
• 서버가 화면을 그리는 주체가 되는 것
• 장점
  • 첫 페이지 로딩 속도가 CSR에 비해 빠름
  • SEO 가능
• 단점
  • 초기 로딩 이후 페이지 이동 시 속도가 느림 (서버와 요청/응답을 주고 받아야 하니까)