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

Eom Deokhyeon·2022년 7월 21일
1
post-thumbnail

SSR(Server Side Rendering)

SSR이란 서버 사이드 렌더링의 약자로 서버로부터 완전
하게 만들어진 html 파일을 받아와 페이지 전체를 렌더링 하는 방식

장점

  • 서버로부터 화면을 렌더하기 위한 필수적인 요소를 먼저 가져오기 때문에 CSR보다 초기 로딩 속도가 빠름
  • 화면을 구성하는 각각의 페이지가 있기 때문에 SEO(검색 엔진 최적화)에 유리함

단점

  • TTV(Time To View)와 TTI(Time To Interact)간에 시간 간격이 존재
  • 매번 페이지를 요청할 때마다 새로 고침되기 때문에 사용자 경험이 다소 떨어짐
  • 서버측 부하 증가

CSR(Client Side Rendering)

SSR이란 클라이언트 사이드 렌더링의 약자로
사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식

장점

  • 빠른 속도와 서버 부하 감소
  • 변경된 부분과 관련 데이터만 가져오므로 SSR보다 속도가 빠름
  • 사용자 친화적

단점

  • 초기 로딩 속도가 느림
  • 웹 크롤러가 페이지를 색인화하려고 하면 빈 페이지처럼 보이게 되기 때문에 SEO에 불리함

렌더링 방식 선정 기준

- 서버사이드 렌더링

1. 상위 노출 필요할 때
2. 누구에게나 동일한 내용 노출할 때
3. 페이지마다 데이터가 자주 바뀌는 상황일 때

- 클라이언트 사이드 렌더링

1. 개인정보 데이터를 기준으로 구성할 때
2. 보다 나은 사용자 경험을 제공하고 싶을 때
3. 상위노출보다 고객의 데이터 보호가 중요할 때

0개의 댓글