[Web] CSR 과 SSR 차이점 - 클라이언트 사이드 렌더링, 서버 사이드 렌더링

 

출처 : www.etechcomputing.com

 

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)에서 사용되는 렌더링이란 WEB에서 요청 받은 내용을 브라우저(Browser) 화면에 표시하는것을 말합니다. 예를들어서 로더(Loader)가 서버로부터 정보를 불러와서 화면에 표시하기도 하고, CSS 설정 및 레이아웃 위치를 지정하여 화면에 표시하는것을 말하기도 하며, 데이터 파싱(Phasing)을 통하여 데이터를 DOM트리로 생성하여 화면에 표시하는것을 말하기도 합니다.

 

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

클라이언트 사이드 렌더링 (Client Side Rendering - CSR)은 클라이언트에서 자바스크립트를 통하여 렌더링하는 방식을 말합니다. Client (Web Browser)에 내장된 자바스크립트로 동적 HTML Element를 생성하고 웹 컨텐츠를 만드는 방식입니다.

 

클라이언트 사이드 렌더링(CSR) 방식은 자바스크립트 프레임워크인 React.JS, Vue.JS, Angular.JS 에서 사용되며 이와 같은 Single Page Application(SPA) 에 사용됩니다.

 

클라이언트 사이드 렌더링(CSR) 방식의 장점은 서버(Server)에서 Client에서 요청한 데이터만 제공하면 되기 떄문에 서버(Server)의 부담을 적게할수 있습니다. 이에따른 단점은 웹 페이지 초기 로딩시 서버(Server)로부터 구성에 필요한 데이터를 요청하여 받는 지연시간으로 인하여 초기 로딩 지연시간이 발생됩니다.

 

 

서버 사이드 렌더링(SSR)

서버 사이드 렌더링(Server-Side Rendering - SSR)은 템플릿 엔진을 이용하여 동적인 HTML 페이지를 만드는 방식을 말하며, PHP, JSP, ASP, Node.JS등이 있습니다.

 

서버 사이드 렌더링(SSR)은 클라이언트에 요청이 들어가게 되면 Server에서 화면 구성에 필요한 데이터를 구성하고 난뒤에 렌더링을 마친뒤에 그에 맞는 클라이언트로 Respones 하게 됩니다.

 

서버 사이드 렌더링(SSR)방식의 장점은 클라이언트 사이드 렌더링(CSR) 방식과 반대로 초기 로딩 시간을 줄일수 있습니다. 또한 많은 양의 데이터를 제공하기 편리합니다. 하지만 이에 따른 단점도 있는데 서버(Server)에서 데이터를 이용하여 동적으로 HTML을 생성하기에는 서버(Server)의 부담이 발생하게 됩니다.

 

출처 : https://velog.io/@ehgks0000