SSR & CSR

SSR

서버에서 동적으로 HTML을 만들어 클라이언트에게 제공하는 기술로 백엔드 개발자 영역에 속한다. Java에서는 JSP, Thymeleaf가 대표적으로 사용

Was -> HTML -> DB -> HTML 동적 생성 -> HTML Response

• 장점

  1. 초기 페이지 로드 시 서버에서 완전히 렌더링된 HTML을 반환하여 첫 페이지 로딩이 빠르다.

  2. 검색 엔진 크롤러가 완전한 HTML을 즉시 수집할 수 있어 SEO에 유리하다.

     ex) 전자상거래 사이트, 뉴스 사이트

• 단점
  1. 모든 요청에 대해 서버가 페이지를 렌더링해야 하므로, 높은 트래픽 상황에서 서버의 부하가 크게 증가할 수 있다.
  2. 초기 페이지 이외의 페이지들도 렌더링 후 반환되기 때문에 속도가 느리다.

CSR

웹 브라우저에서 자바스크립트를 사용해 동적으로 HTML을 생성해서 적용하는 기술로 웹을 모바일 앱 처럼 부분 부분 변경할 수 있게 해준다. 프론트엔드 개발자 영역에 속하는 React, Vue가 대표적으로 사용

HTML -> JS 주소 링크 Response -> JS(클라이언트 로직, 렌더링 포함) -> JSON 형태로 응답

• 장점

  1. 클라이언트 측에서 렌더링하므로 사용자 인터랙션(상호작용)에 빠르게 반응할 수 있습니다.

  2. 초기 로딩 후에는 서버와의 통신 없이 빠르게 페이지 간 전환이 가능합니다.

     ex) Google Map, SNS Application

• 단점
  1. 초기 로딩 시 필요한 모든 자바스크립트 파일을 다운로드하고 실행해야 하므로, 초기 로딩 시간이 길다.
  2. 검색 엔진 크롤러가 자바스크립트를 제대로 실행하지 못하면 SEO에 불리할 수 있다.

+) SEO = 검색 엔진 최적화