[CS] 서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)

🧸 개요

 

렌더링이란?

HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에 출력되는 과정을 말한다.

즉 브라우저가 서버로부터 요청받은 내용을 전달받아 ㅂ라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것이다.

이러한 브라우저 렌더링은 '서버사이드 렌더링(SSR)'과 '클라이언트사이드 렌더링(CSR)'로 나뉜다.

 

---

 

🧸 서버사이드 렌더링(Server-Side Rendering, SSR)

웹 어플리케이션 렌더링 방식 중 하나이다. 클라이언트와 서버 간의 협력적인 렌더링 방식으로, 서버에서 초기 HTML을 생성하고 클라이언트에게 전달하는 방식이다.

 

즉, 서버가 웹 페이지의 완전한 HTML을 생성하고 클라이언트에게 보여준다. 이렇게 하면 클라이언트는 초기 로딩 시에 완전한 페이지를 받아볼 수 있으며, 자바스크립트 파일의 다운로드와 실행이 완료되기 전에도 기본적인 컨텐츠를 표시할 수 있다.

주로 웹 프레임워크와 라이브러리(React, Vue.js, Agular 등)에서 제공되며, 이를 활용하여 SSR을 구현한다.

 

특징

1. 검색 엔진 최적화(SEO)

일반적으로 검색 엔진은 HTML 콘텐츠를 분석하고 인덱싱하는데 최적화되어있다. CSR 방식에서는 초기에 빈 HTML 페이지가 전송되기 때문에 검색 엔진은 웹 어플리케이션의 컨텐츠를 인식하지 못할 수 있다. 그러나 SSR 방식에서는 검색 엔진이 완전한 HTML을 받아 컨텐츠를 쉽게 인덱싱할 수 있다.

 

2. 초기 로딩 속도 개선

CSR에서는 자바스크립트 파일을 다운로드하고 실행하는 시간이 필요하다. 이로 인해 초기 로딩 속도가 느릴 수 있다. SSR을 사용하면, 초기 HTML을 서버에서 렌더링하여 클라이언트에게 전달하므로, 사용자는 초기 로딩 시에도 컨텐츠를 볼 수 있다. 이는 사용자 경험을 향상시키고 반응성을 개선하는데 도움이 된다.

 

3. 소셜 미리보기

웹 페이지가 소셜 미디어 플랫폼에서 공유될 때, 플랫폼은 해당 웹 페이지의 미리보기를 생성한다. SSR을 사용하면, 플랫폼이 웹 페이지의 완전한 HTML을 쉽게 가져와 미리보기를 생성할 수 있다.

 

4. 브라우저 호환성

일부 브라우저나 기기에서 자바스크립트의 지원이 부족할 경우, CSR이 문제가 될 수 있다. 서버사이드 렌더링을 사용하면, 기기나 브라우저의 자바스크립트 지원 여부에 상관없이 컨텐츠를 제공할 수 있다

 

---

🧸 클라이언트 사이드 렌더링(Client-Side Rendering)

클라이언트(사용자의 브라우저)에서 웹 페이지의 렌더링을 처리하는 방식을 의미한다.

웹 어플리케이션의 초기 로드 시에 빈 HTML을 전송한 후, 자바스크립트를 사용하여 클라이언트 측에서 동적으로 컨텐츠를 렌더링한다. 일반적으로는 클라이언트 측에서 자바스크립트 프레임워크 또는 라이브러리를 사용하여 상호작용적인 UI를 구현한다.

 

CSR은 동적인 사용자 경험을 제공할 수 있으며, 개발자는 클라이언트 측에서 UI와 상호작용을 자유롭게 구현할 수 있다. 그러나 초기 로딩 속도와 검색 엔진 최적화(SEO) 등의 측면에서 고려해야 할 사항이 있다. 

 

특징

1. 초기 빠른 로딩 속도

CSR에서는 초기에 빈 HTML페이지만 서버로부터 전송되기 때문에, 초기 로딩 속도가 빠르다. 사용자는 빈 페이지를 먼저 볼 수 있고, 이후에 자바스크립트 파일을 다운로드하고 실행하여 컨텐츠를 동적으로 생성한다.

 

2. 단일 페이지 어플리케이션 (SPA)

CSR은 주로 단일 페이지 어플리케이션 (SPA, Single Page Application) 개발에 사용된다. SPA는 페이지 간 전환 시에 새로운 HTML을 서버로부터 받지 않고, 클라이언트 측에서 필요한 데이터를 가져와 동적으로 화면을 업데이트하는 방식이다.

 

3. 클라이언트 성능 요구

클라이언트 측에서 렌더링이 이루어지기 때문에, 클라이언트의 성능과 브라우저의 자원 활용이 중요하다. 특히, 느린 클라이언트 기기나 제한된 네트워크 연결을 가진 사용자의 경우, CSR에서는 초기 로딩 속도나 페이지 전환 시의 지연이 발생할 수 있다.

 

---

🧸  서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)의 비교

 

	서버사이드 렌더링(SSR)	클라이언트사이드 렌더링(CSR)
장점	✔ 초기 로딩 속도 개선 : 서버에서 만들어준 완전한 페이지를 사용자에게 보여주는 초기 페이지 렌더링 속도가 상대적으로 빠르다 ✔ 검색 엔진 최적화 : 빈 페이지가 아닌 완전한 HTML을 담아 보여주기 때문에 SEO에 장점을 가진다 ✔ 소셜 미리보기 : 마찬가지로 완전한 HTML을 이용한 미리보기의 특징을 가진다	✔ 동적인 사용자 경험 : 클라이언트 측에서 렌더링이 이루어지기 때문에 동적인 사용자 경험을 제공한다 ✔ 서버 부하 감소 : 서버에서 초기 HTML을 생성하는 부담이 없다. 단순히 클라이언트에 필요한 데이터를 제공하고, 클라이언트는 이를 기반으로 UI를 동적으로 생성한다 ✔ 개발자 경험 : 클라이언트 측에서 자바스크립트 프레임워크나 라이브러리를 사용하여 UI를 개발할 수 있다. 개발자가 자유롭게 상호작용적인 UI를 구현하고 관리할 수 있다.
단점	✔ 서버 리소스 부하 : 서버측에서 렌더링을 처리해야하기 때문에 트래픽이 많거나 복잡한 웹의 경우 서버에 추가적인 부하가 발생하며, 더 많은 리소스가 필요하다 ✔ 구현 복잡성 : SSR 로직을 관리하고 상태를 유지하기 위해서 추가적인 개발 작업이 필요하다 ✔ 제한적인 클라이언트 상호작용 : 초기 로딩 시에 완전한 HTML을 전달하므로 초기 상태에서 클라이언트와 상호작용에 제한이 있을 수 있다	✔ 초기 로딩 속도 : 초기에 빈 HTML 페이지가 전송되기 때문에, 초기 로딩 속도가 상대적으로 느릴 수 있다 ✔ SEO 문제 : 빈 HTML 페이지가 전송되기 때문에, 초기 HTML에 포함된 콘텐츠를 인식하지 못할 수 있고, 페이지 인덱싱이 어려워지는 등의 검색 엔진 최적화 문제가 발생할 수 있다 ✔ 클라이언트 성능 요구 : 서버가 아닌 클라이언트측에서 렌더링이 이루어지기 때문에 클라이언트의 성능과 자원 활용이 중요하다