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

들어가기전

렌더링이란?

어떠한 웹 페이지 접속시 그 페이지를 화면에 그려주는 것.

 

 

SSR(Server Side Rendering)

사용자가 요청시마다 서버측에 새로운 페이지에 대한 요청을 하고,

서버측에서 렌더링 후 사용자에게 반환하는 방식입니다

 

CSR(Client Side Rendering)

최초 1번 서버측에서 전체 페이지를 로딩 이 후, 사용자의 새로운 요청이 있을 때마다

자바스크립트 파일을 이용해 브라우저측에서 렌더링하는 방식입니다.

CSR & SPA (Single Page Application)

SPA는 CSR 방식을 이용하고 있는 대표적인 방법이다.

모바일의 비중이 커지는 시기가 오면서 모바일에 최적화된 환경이 필요해졌다.

컴퓨터와 달리 성능이 낮은 모바일에 최적화 시키기 위해 나온 것이 SPA 개념이다.

 

SPA는 최초 한번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 웹 어플리케이션을 의미한다.

 

SSR vs CSR

1) 초기 로딩속도

SSR의 경우 View를 서버에서 렌더링해서 가져오기 때문에 초기 로딩이 짧다.

반면 CSR 경우 브라우저에서 서버에서 각종 파일과 리소스를 다운 후 브라우저에서 렌더링하기

때문에 초기로딩이 비교적 오래걸린다.

 

2) 초기 로딩 이후

초기 로딩 이후 CSR은 사용자 행동에 따라 필요한 부분만 다시 렌더링하기 때문에, 계속해서

페이지 전체를 업데이트하는 SSR보다 빠른 인터랙션이 가능하다.

 

3) SEO 문제

CSR방식으로 이루어진 사이트는 View를 생성하기 위해 자바스크립트를 실행시켜야한다.

하지만 대부분의 웹 크롤러 봇들은 자바스크립트 파일을 실행시키지 못한다.

따라서 HTML에서만 콘텐츠를 수집하게 되고 CSR 페이지를 빈페이지로 인식하게 된다.

 

4) 보안문제

SSR에서는 사용자 정보를 서버측에서 세션으로 관리한다.

반면 CSR 경우 쿠키말고는 사용자 정보를 저장할 공간이 없다.

 

 

Ref

jaroinside.tistory.com/24

goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/