[ WEB ] CSR과 SSR 비교하기

 

 

CSR(client-side-rendering)과 SSR(server-side-rendering)은 웹 페이지와 콘텐츠를 사용자에게 렌더링하는 기술이다. SSR과 CSR은 렌더링 과정이 일어나는 위치에서 차이가 있다. 

 

 

CSR (Client-Side-Rendering)

 

CSR은 클라이언트 측에서 렌더링을 하는 기술로 사용자의 웹 브라우저의 JavaScript를 통해 웹 페이지를 렌더링한다. 서버에서 최소한의 HTML 파일을 보내고, 클라이언트 측 JavaScript 코드가 콘텐츠를 가져와 렌더링한다. 이 경우 사용자에게 보다 더 인터렉티브하고 동적인 사용자 경험을 제공할 수 있고 전체 페이지를 다시 로드하지 않고도 콘텐츠를 업데이트할 수 있는 기능이 있다. 하지만 초기 페이지 로딩 시간이 오래 걸리는 경우가 있으며, 사용자의 인터넷 연결이 느리거나, 사용자의 기기에 성능 이슈가 있다면 더욱 오래걸릴 수 있다. 또 CSR을 통해 동적으로 생성된 콘텐츠는 검색 엔진을 통한 콘텐츠 검색에 제한이 있을 수 있다.

 

출처: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

 

 

 

 

 

 

 

 

 

 

SSR (Server-Side-Rendering)

 

SSR은 서버에서 웹페이지를 렌더링하고 완전한 HTML 페이지를 사용자의 웹 브라우저(클라이언트 측)으로 보낸다. 서버에서 데이터를 처리하고 웹 페이지를 구성하는 HTML, CSS, JS코드를 생성한다. 이렇게 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 보여주는 방식으로, SSR을사용하면 모든 데이터가 맵핑된 웹 페이지를 사용자의 웹 브라우저에 바로 보여줄 수 있어서, 사용자 입장에서는 CSR보다 빠르게 화면을 만날 수 있다.

 

서버를 이용하여 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라지고, SEO(Search Engine Optimization)을 쉽게 구성할 수 있다.

 

출처: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

 

 

 

 

CSR과 SSR은 각각의 장.단점이 존재하므로 프로젝트의 요구 사항에 따라 선택하면 된다. 예를 들어 검색 엔진에서 검색에 유리한 키워드가 필요한 정적 콘텐츠가 많은 E-Commerce 서비스의 경우는 SSR이 유리할 수 있다. 반면 자주 업데이트 되며 사용자와 상호작용이 중요한 동적 웹 애플리케이션(소셜미디어, 채팅서비스 등등)에는 CSR이 유용할 수 있다.