SSR 과 CSR

양성진·2023년 3월 16일
0

React

목록 보기
11/11

SSR이란?

서버사이드 렌더링의 약자이며 말그대로 서버에서 렌더링을 하는것이다.
서버에서 완전하게 만들어진 Html파일을 받아와서 전체 페이지를 렌더링하는 것이다.

SSR의 장점

  1. 초기 로딩 속도가 빠릅니다. 서버에서 HTML을 생성하고 전송하기 때문에 클라이언트에서 추가적인 작업이 필요하지 않습니다
  2. SEO에 유리합니다. 검색 엔진 크롤러가 서버에서 렌더링된 HTML을 쉽게 읽을 수 있기 때문에 웹 사이트의 순위를 높일 수 있습니다
  3. 저사양 기기에 적합합니다. 클라이언트의 성능에 의존하지 않고 서버에서 모든 작업을 처리하기 때문에 저사양 기기에서도 웹 사이트를 원활하게 볼 수 있습니다

SSR의 단점

  1. 페이지 전환 속도가 느립니다. 페이지마다 서버로 요청을 보내고 응답을 받아야 하기 때문에 CSR보다 페이지 전환 속도가 느릴 수 있습니다. 특히 데이터가 많거나 복잡한 경우 더욱 그렇습니다
  2. 서버 부하가 큽니다. 서버에서 모든 페이지를 렌더링해야 하기 때문에 서버의 자원과 비용이 많이 소모됩니다 트래픽이 많은 경우 서버 성능 저하나 다운 위험이 있습니다.
  3. 상호작용성이 낮습니다. 클라이언트에서 동적인 UI를 구현하기 어렵기 때문에 상호작용성이 낮은 웹 사이트에 적합합니다

CSR 이란?

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

CSR의 장점

  1. 페이지 전환 속도가 빠릅니다. 초기 로딩 후에는 클라이언트에서 모든 작업을 처리하기 때문에 페이지 전환 시 서버로 요청을 보낼 필요가 없습니다 이는 사용자 경험을 향상시킵니다
  2. 서버 부하가 작습니다. 클라이언트에서 모든 페이지를 렌더링하기 때문에 서버의 자원과 비용을 절약할 수 있습니다 트래픽 변화에 따른 영향도 적습니다.
  3. 상호작용성이 높습니다. 클라이언트에서 동적인 UI를 쉽게 구현할 수 있기 때문에 상호작용성이 높은 웹 사이트나 웹 애플리케이션에 적합합니다

CSR의 단점

  1. 초기 로딩 속도가 느립니다. 클라이언트에서 HTML, CSS, JS 등의 파일을 모두 다운로드하고 파싱해야 하기 때문에 SSR보다 초기 로딩 속도가 느릴 수 있습니다 이는 사용자 유입률을 감소시킬 수 있습니다
profile
프론트엔드 개발자를 꿈꾸는 돼지

0개의 댓글