[Web/FrontEnd]CSR(Client Side Rendering) vs. SSR(Server Side Rendering)

 

Rendering

웹 개발에서 보통 Rendering이란 HTML 코드를 웹 브라우저가 읽어들여서 브라우저 상에 보여주는 행위를 말한다.

따라서 CSR은 웹 브라우저가 읽어들일 HTML 코드를 Client측에서 보내준다는 것이고, SSR은 Server측에서 보내준다는 뜻이다.

 

여기서 Client 측에서 보내준다는 것이 무슨 의미인지 와닿지 않을 수 있는데, 이는 결국 Client의 행동에 따라 interactive하게 HTML 코드가 반응하는 경우를 의미한다고 보면 된다.

이 때, 'HTML 코드가 반응한다(가변적이다)'는 점은 결국 'JavaScript를 이용해서 HTML 코드를 만들어 내는 방식'이라는 점을 논리적으로 함축한다. 이게 이해가 안되면 HTML과 JS를 더 공부할 것을 '강권'한다.

 

그렇다. JS로 HTML 코드를 짜는 Front-End 라이브러리/프레임워크들이 대부분 CSR 방식이다! 그 유명한 React, Vue 등...

그리고 우리는 이런 웹 어플리케이션을 SPA(Single Page Application)라고 부르기도 한다.

 

SPA

이제 SPA는 용어만 보고도 감이 딱 와야한다. 

만약 감이 오지 않는다면, 아래를 좀 더 읽어보자.

 

CSR은 최초의 웹 접속시, Rendering에 필요한 모든 HTML 코드를 JS를 통해 Server로부터 받아와야만 한다. 

그러고 나면 그 이후부터는 Client의 행동에 따라 JS코드가 반응하면서 HTML 코드가 생성/변경/삭제되고, 이를 통해 웹 페이지가 UX측면에서 interactive하게 반응하게 되는 원리이다.

 

따라서, CSR 방식에서는 최초의 웹 접속이 이루어지고 나면, 더 이상 HTML 코드 변경을 위한 Request 없이도 화면의 변경이 가능하다. 이미 필요한 HTML 코드가 JS를 통해 다 다운 받아져 있으니까! 이는 곧 Server로부터 자유롭다는 뜻이고, Request와 이를 바탕으로한 새로고침(새로운 화면) 없이 한 화면 상에서 기능 수행이 이루어진다는 뜻이므로, 우리는 CSR 방식의 웹 어플리케이션을 SPA라고 부르는 것이다. (단일 페이지로 이루어진 어플리케이션!)

 

물론 엄밀히 말하자면 SPA는 어플리케이션의 종류를 지칭하는 용어이고, CSR은 렌더링 방식을 지칭하는 용어긴 하다.

여담이지만, SPA의 반대말은 MPA(Mutli Page Application)이다.

 

SSR은 CSR의 반대라고 보면 된다. 당연히 SSR 방식의 웹 어플리케이션은 MPA라고 불릴 것이며, Rendering이 필요할 때 마다 Server로부터 정해진 HTML 코드를 받아오게 된다. 이런 점에서 interactive한 UX를 제공하기 어렵다.

대표적으로는 PHP, pug, jsp 등이 있다. 그렇다 소위 말하는 템플릿 엔진이 SSR 방식이다.

 

하지만, 최초의 웹 접속시 Server로부터 받아와야하는 데이터의 양이 CSR에 비해서 적다는 특징이 있다. SSR은 현재 필요한 코드만 딱 받아오지만 CSR은 JS를 통해 모든 HTML 코드를 받아오기 때문이다. 그래서, SSR은 최초 접속시 웹 로딩이 빠른 반면, CSR은 SSR에 비해 느리다.

 

동시에, 바로 이러한 점 때문에 SSR은 Server측 부담이 가중된다. Rendering 마다 Server가 Request를 받아, Response 해줘야하기 때문이다. 반면, CSR은 Data를 주고 받는 POST 요청 위주로 트래픽이 발생한다는 점에서 Server부담이 적다.

 

SEO(Search Engine Optimization) 측면에서 볼 때는 SSR이 유리하다. SSR은 HTML 코드를 Server로부터 직접 받아오기 때문에 검색엔진의 봇이 크롤링할 때 보다 많고 정확한 정보를 가져갈 수 있다. 반면 CSR는 원칙적으로 빈 HTML 코드를 받아가기 때문에 검색엔진에 덜 친화적이다.

 

Facebook에서 React를 만들기 때문인지, 바로 이러한 단점을 극복하기 위해 만든게 <meta> 태그이긴하다.

그러고보니 회사명도 Meta로 바꿨네

 

그래서 CSR 방식으로 웹 어플리케이션을 만든다면, <meta> 태그를 좀 더 신경써줘야한다. 

다만, 현재에 들어서는 CSR든 SSR이든 가리지 않고 <meta> 태그를 관리하는게 최근의 트렌드이기도하고, 각종 검색엔진 봇에서도 <meta> 태그 친화적인 태도를 보이고 있기 때문에 SEO 때문에 CSR을 주저할 필요는 없다.

 

	CSR	SSR
HTML 코드 구현 방식	JS를 통한 간접 구현	템플릿 엔진을 통한 직접 구현
로딩속도	느림	빠름
서버부하	낮음	높음
검색엔진 친화도	낮음 (<meta> 태그로 극복가능)	높음
어플리케이션 종류	SPA	MPA