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

CSR과 SSR이란

CSR과 SSR은 클라이언트-서버 아키텍처 상 웹페이지를 렌더링할 수 있는 두가지 다른 방법을 뜻한다.

 

CSR의 경우, 페이지 렌더링의 대다수는 클라이언트 쪽에서 React, Angular, Vue.js와 같은 자바스크립트 프레임워크를 사용해 진행된다. 클라이언트의 브라우저는 자바스크립트 코드를 다운로드 하고, 그 이후 브라우저에 컨텐츠를 동적으로 렌더링하기 위해 API 호출 등을 한다. 이러한 접근법은 더욱 인터렉티브하고 다이나믹한 유저 경험을 만들 수 있다는 장점이 있으며, 페이지 전체를 로딩할 필요 없이 특정 부분만 업데이트 된다는 장점이 있다.

 

반면, SSR의 경우엔 서버가 HTML 컨텐츠의 렌더링을 완성하여 클라이언트의 브라우저로 보낸다. 브라우저는 완전히 렌더링된 HTML을 전송받게 되며, 여기엔 최초 컨텐츠와 데이터가 포함된다. 이는 유저에게 즉각적으로 보여질 수 있다는 장점이 있다. SSR을 사용한다하여도 여전히 인터랙션 등을 위해 자바스크립트 프레임워크 사용이 가능하며, 단지 최초 렌더링이 서버사이드에서 발생한다는 점이 다르다.

 

항목	서버 사이드 렌더링 (SSR)	클라이언트 사이드 렌더링 (CSR)
정의	서버에서 웹 페이지를 렌더링하고 완전히 렌더링된 HTML을 클라이언트로 전송하는 것	자바스크립트를 사용하여 클라이언트 측에서 웹 페이지를 렌더링하는 것
초기 로딩 시간	HTML이 서버에서 사전 렌더링되기 때문에 초기 로드시간이 적음	브라우저가 자바스크립트를 다운로드하고 콘텐츠를 렌더링해야하기 때문에 초기 로드 시간이 더 오래 걸림
SEO	완전히 렌더링된 HTML을 검색 엔진 크롤러가 읽을 수 있기 때문에 SEO에 유리함	상대적으로 검색 엔진이 콘텐츠를 읽기 어려움
성능	높은 동적 앱에서 성능이 낮을 수 있음	서버 요청이 줄고 필요할 때만 데이터를 가져오기 때문에 높은 동적 앱에서 성능이 우수함.
브라우저 호환성	렌더링이 서버에서 처리되기 때문에 브라우저 호환성이 더 좋음	자바스크립트 지원의 차이로 인해 일부 브라우저 호환성 문제가 있을 수 있음
개발자 경험	프론트 개발 입장에선 조금 더 복잡할 수 있으며 서버 사이드 지식이 필요할 수 있음	클라이언트 사이드 렌더링은 프론트엔드 개발자 입장에선 SSR보다 쉬움
초기 페이로드	완전히 렌더링된 HTML로 인해 초기 페이로드가 더 큼	초기 페이로드는 가볍지만 자바스크립트 파일이 더 무거움
사용자 경험	웹앱의 콘텐츠가 더 빨리 표시되며 사용자 경험이 개선될 수 있음	자바스크립트 파일이 큰 경우 콘텐츠가 렌더링될때까지의 시간이 클 수 있음
캐싱	서버 사이드 렌더링은 효율적으로 캐시될 수 있음	동적으로 생성된 콘텐츠를 캐시하는 것이 어려울 수 있음

 

 

 

 

어떤 경우에 SSR과 CSR을 사용하면 좋을까?

SSR을 사용하는 경우

1. SEO가 최우선 고려사항일 경우

만약 검색 엔진을 통해 웹사이트가 쉽게 찾아지는 것에 대한 우선순위가 높을 경우엔 SSR을 고려하는 것이 좋다. 완전히 렌더링된 HTML은 크롤링이 쉽고 검색 엔진들로부터 쉽게 인덱스될 수 있기 때문이다.

 

2. 최초 페이지 로딩 시간의 중요성이 큰 경우

SSR은 완전히 렌더링된 HTML을 클라이언트에 보내기 때문에 초기 페이지 로딩 시간이 더 빠르다.

 

3. 브라우저 호환성

렌더링이 서버 측에서 진행되기 때문에, 다른 브라우저간 좀 더 일관성있는 렌더링이 보장될 수 있다.

 

4. 저성능 디바이스 상 성능

인터넷 연결 속도가 느리거나 성능이 낮은 디바이스로 접속할 경우, 다운되고 실행되는 자바스크립트의 양이 더 적기 때문에 SSR이 CSR보다 좋을 수 있다.

 

5. 캐싱 및 성능 최적화

보통 SSR이 효율적인 캐싱이 더 쉽다. 이는 퍼포먼스 개선 효과로 이어지며, 트래픽이 많은 경우 서버 로드를 줄이는 효과가 있다.

 

 

CSR을 사용하는 경우

1. 사용자 인터렉션이 다양하고 동적인 컨텐츠가 있을 때

만약 웹사이트에서 다양한 동적인 컨텐츠를 사용하고 실시간 업데이트 사항들을 보여주어야한다면, CSR이 유저 경험 개선 측면에서 더 좋은 선택일 수 있다. 

 

2. 복잡한 유저 인터페이스가 있을 때

복잡한 유저 인터페이스가 있는 앱일 경우, React나 Angular, Vue.js와 같은 프레임워크가 효과적인 상태 관리와 꼭 필요한 컴포넌트만 업데이트하기 위해 선호될 수 있다. 

 

3. PWAs (Progressive Web Apps)

 PWA는 HTML, CSS, Javascript와 같은 웹 기술을 사용하여 네이티브 앱과 같은 사용자 경험을 제공하는 앱을 뜻한다. CSR은 오프라인으로 작동할 수 있고 네이티브 앱과 같은 경험을 주는 PWA를 만드는데 사용된다.

 

 

4. 사이즈가 큰 앱

스케일이 큰 앱일 경우, CSR이 렌더링 작업량을 클라이언트의 브라우저로 넘기면서 서버 부담을 줄이고 확장성에 긍정적인 결과를 줄 수 있다.

 

5. 하이브리드 앱

하이브리드 앱이란 웹기술인 HTML, CSS, 그리고 자바스크립트를 사용하여 만들어진 앱이 네이티브 모바일 앱으로도 사용되는 경우를 뜻한다. 여러개의 프론트엔드 플랫폼을 지원하는 하이브리드 모바일 앱일 경우, CSR이 좀 더 유리할 수 있다.