[WEB] CSR과 SSR

클라리언트가 웹브라우저에 접속하여 서버에 요청을 하게 되면 HTML을 응답받아 서비스를 이용하게 된다

이때 HTML을(웹브라우저가) 구현하는 두가지 방식이 있는데 바로

CSR(Client Side Rendering)과 SSR(Server Side Rendering)이다

 

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

웹브라우저가 서버에서 API로 데이터를 받아 그 값들을 자바스크립트 로직에 맞게

동적으로 렌더링하여 사용자에게 보여주는 것이 CSR이다

CSR의 경우 HTML과 static 파일만 받게 되면 나머지는 자바스크립트를 통해 동적으로 렌더링 하기 때문에

사용자의 UX가 뛰어나고 서버에 요청하는 횟수가 훨씬 적기 때문에 서버의 부담 또한 덜하다

하지만 HTML과 static을 꼭 받아야 하기 때문에 초기속도가 비교적 느리며 SEO(검색엔진 최적화) 문제가 발생할 수 있다(구글은 제외)

 

SSR(서버 사이드 렌더링) 

CSR이 웹브라우저에서 HTML을 동적으로 만든것과 반대로 SSR의 경우

서버 측에서 HTML을 동적으로 생성하여 통째로 반환한다

SSR의 경우 초기 로딩 속도가 빨라 사용자가 콘텐츠를 빨리 접할 수 있으며 모든 검색엔진의 SEO가 가능하다

하지만 서버에 매번 요청을 하기 때문에 서버의 부담이 커진다는 단점이 있다

 

정리해보자면 SSR의 경우 초기 로딩속도가 빠르고 SEO에 유리하지만 서버에 부담이 크고

CSR의 경우 초기 로딩속도는 비교적 느리고 SEO에 불리하지만 서버에 부담이 적다

마지막으로 이 둘의 구조를 비교해보자면 위와 같다

 

핵심정리

우리가 웹브라우저에 접속하면 보이는 화면은 HTML이다

이를 구현하는 것이 서버에서 이루어진다면 SSR, 브라우저단에서 이루어진다면 CSR이다

 

모든 검색엔진의 SEO가 중요함

웹사이트의 빠른 초기 로딩

웹사이트 콘텐츠가 많은 상호작용이 필요하지 않음

->SSR

 

SEO가 최우선이 아닐 때

웹사이트의 콘텐츠가 많은 상호작용을 필요함

웹 애플리케이션을 구축함

->CSR

 

---

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

참조 링크:

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-1/dashboard

https://dev.to/alain2020/ssr-vs-csr-2617

https://velog.io/@namezin/CSR-SSR

https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/