SSR이란?
서버사이드 렌더링의 약자이며 말그대로 서버에서 렌더링을 하는것이다.
서버에서 완전하게 만들어진 Html파일을 받아와서 전체 페이지를 렌더링하는 것이다.
SSR의 장점
- 초기 로딩 속도가 빠릅니다. 서버에서 HTML을 생성하고 전송하기 때문에 클라이언트에서 추가적인 작업이 필요하지 않습니다
- SEO에 유리합니다. 검색 엔진 크롤러가 서버에서 렌더링된 HTML을 쉽게 읽을 수 있기 때문에 웹 사이트의 순위를 높일 수 있습니다
- 저사양 기기에 적합합니다. 클라이언트의 성능에 의존하지 않고 서버에서 모든 작업을 처리하기 때문에 저사양 기기에서도 웹 사이트를 원활하게 볼 수 있습니다
SSR의 단점
- 페이지 전환 속도가 느립니다. 페이지마다 서버로 요청을 보내고 응답을 받아야 하기 때문에 CSR보다 페이지 전환 속도가 느릴 수 있습니다. 특히 데이터가 많거나 복잡한 경우 더욱 그렇습니다
- 서버 부하가 큽니다. 서버에서 모든 페이지를 렌더링해야 하기 때문에 서버의 자원과 비용이 많이 소모됩니다 트래픽이 많은 경우 서버 성능 저하나 다운 위험이 있습니다.
- 상호작용성이 낮습니다. 클라이언트에서 동적인 UI를 구현하기 어렵기 때문에 상호작용성이 낮은 웹 사이트에 적합합니다
CSR 이란?
클라이언트 사이드 렌더링의 약자로서 클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식입니다.
CSR의 장점
- 페이지 전환 속도가 빠릅니다. 초기 로딩 후에는 클라이언트에서 모든 작업을 처리하기 때문에 페이지 전환 시 서버로 요청을 보낼 필요가 없습니다 이는 사용자 경험을 향상시킵니다
- 서버 부하가 작습니다. 클라이언트에서 모든 페이지를 렌더링하기 때문에 서버의 자원과 비용을 절약할 수 있습니다 트래픽 변화에 따른 영향도 적습니다.
- 상호작용성이 높습니다. 클라이언트에서 동적인 UI를 쉽게 구현할 수 있기 때문에 상호작용성이 높은 웹 사이트나 웹 애플리케이션에 적합합니다
CSR의 단점
- 초기 로딩 속도가 느립니다. 클라이언트에서 HTML, CSS, JS 등의 파일을 모두 다운로드하고 파싱해야 하기 때문에 SSR보다 초기 로딩 속도가 느릴 수 있습니다 이는 사용자 유입률을 감소시킬 수 있습니다