[CS] CSR과 SSR 개념 및 차이점

CSR (Client Side Rendering)

CSR(Client Side Rendering)이란 클라이언트가 렌더링을 맡아서 하는 방식을 말합니다.

서버에서 받은 데이터를 클라이언트인 브라우저가 화면에 그립니다.

HTML 결과를 자바스크립트를 사용해 웹 브라우저에게 동적으로 생성해서 적용합니다.

 

즉, 클라이언트 측에서 렌더링 하는 방식입니다.

 

 

CSR의 동작 과정

1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청합니다.
2. 서버는 빈 뼈대만 있는 HTML을 응답으로 보내줍니다.
3. 브라우저가 연결된 JavaScript 링크를 통해 서버로부터 다시 JavaScript 파일을 다운로드합니다.
4. JavaScript를 통해 동적으로 페이지를 만들어 브라우저에 띄워줍니다.

 

 

CSR의 장단점

 

CSR은 브라우저가 JavaScript 파일을 다운로드하고, 결과를 동적으로 생성하는 시간을 기다려야 하기 때문에 초기 로딩 속도가 느리다는 것이 단점입니다. 

 

하지만 초기 로딩 이후에 페이지 일부를 변경할 때는 서버에서 해당 데이터만 요청하면 되기 때문에 이후 구동 속도는 빠르다는 특징이 있습니다. 

 

더불어, 서버는 빈 뼈대만 있는 HTML을 넘겨주는 역할만 수행하면 되기 때문에 서버 측의 부하가 적은데, 뿐만 아니라 클라이언트 측에서 연산, 라우팅 등을 모두 직접 처리하기 때문에 반응속도가 빠르고 UX도 우수하다는 장점이 있습니다.

---

SSR (Server Side Rendering)

SSR은 CSR과는 반대로 서버 측에서 렌더링 하는 방식을 말합니다.

SSR은 HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달합니다.

 

 

SSR 동작 과정

1. 유저가 웹 사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청합니다.
2. 이에 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS까지 모두 적용해 렌더링 준비를 마친 HTML과 JavaScript 코드를 브라우저에 응답으로 전달합니다.
3. 브라우저에서는 서버에서 최종 HTML 결과를 클라이언트에게 전달합니다.

 

 

SSR의 장단점

 

SSR은 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 SEO(검색엔진 최적화)에 유리합니다.

 

더불어, 자바스크립트 코드를 다운로드하고, 실행하기 전에 사용자가 이미 HTML이 렌더링 된 화면을 볼 수 있습니다.

이렇듯 JavaScript 다운로드를 기다려야 했던 CSR 보다 초기 구동 속도가 빠르다는 장점이 있습니다.

 

하지만 해당 시점에서는 사용자가 버튼을 클릭하거나 이동하려고 할 때 아무 반응이 없을 수 있습니다.

클라이언트 측 JavaScript가 실행되고 이벤트 핸들러가 첨부된 JavaScript 로직이 모두 연결될 때까지 사용자의 입력에 응답할 수 없기 때문입니다.

 

쉽게 이해하기 위해서, 웹 페이지에서 "다음으로" "로그인" 등등의 버튼을 눌렀을 때 로딩은 되는데 화면이 다음으로 넘어가지 않는(잠깐의 시간) 것으로 생각하시면 이해가 쉬울 것입니다.

 

이렇듯, SSR에는 TTV(Time to View)와 TTI(Time to Interact) 간의 시간 간격이 존재한다는 것이 단점입니다.

 

---

CSR과 SSR의 차이점

 

1. 웹 페이지 로딩 시간

위에서 설명 했듯이 SSR 방식은 데이터를 서버에서 생성한 화면을 먼저 띄워주고 그 이후에 요청에 대해 화면을 렌더링 해줍니다. 그렇기 때문에 첫 페이지 로딩속도가 빠르며, 페이지 전환 속도는 CSR에 비해 느립니다.

 

CSR은 화면을 렌더링하는데 필요한 데이터를 한 번에 다 받아오고 화면을 띄우기 때문에 첫 로딩 시 SSR보다 느립니다.

하지만 CSR 방식은 첫 페이지를 로딩할 때 정보를 다 받아왔기 때문에  페이지 전환 속도가 SSR보다 빠릅니다.

 

2. SEO (Serach Engine Optimization : 검색엔진 최적화)

SSR 방식은 검색엔진 최적화가 가능하지만 CSR 방식은 검색엔진 최적화가 어렵다는 차이가 있습니다.

포털사이트 검색엔진 크롤러가 데이터를 수집하지 못하는 경우가 많기 때문입니다.

 

하지만 최근에는 구글 검색엔진에 자바스크립트 엔진이 내장되어 있어 크롤링이 된다고 합니다.

특정 검색 엔진 같은 경우 CSR 방식으로 만든 페이지의 데이터를 검색하지 못하는 이슈가 있기 때문에 별도의 보완작업이 필요합니다.

 

3. 서버자원 사용 정도의 차이

SSR 방식은 화면이 바뀔 때마다 매번 서버에 요청을 보내고 다시 결과를 만들어야하기 때문에 많은 자원을 사용합니다.

반면에, CSR 방식은 처음에만 서버에서 데이터를 받아오고 그 이후에는 브라우저 쪽에서 화면을 그리기 때문에 서버 자원을 덜 사용합니다.

 

 

CSR과 SSR을 사용해야할 때는?

SSR	CSR
- 네트워크가 느릴 때 - 검색엔진 최적화가 필요할 때 - 페이지 상호작용이 별로 없을 때 - 주로 정적인 화면에 사용	- 네트워크가 빠를 때 - 검색엔진 최적화가 필요 없을 때 - 페이지 상호작용이 많이 필요할 때 - 주로 동적인 화면에 사용

 

 

---

 

출처(참고)

https://dev-ellachoi.tistory.com/28

https://velog.io/@jhyun_k/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-vs-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-SSR%EA%B3%BC-CSR

[인프런] 김영한님의 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술