SSR/CSR

2020. 2. 16. 13:04카테고리 없음

SSR( Server Side Rendering ) 이란 ?

사용자가 웹 페이지에 접근시 서버에 페이지에 대한 요청을 보냄

서버에서 html, view 등의 리소스를 해석하고 렌더링하여 반환함.

 

 

CSR( Client Side Rendering ) 이란 ?

최초 1번 서버측에서 전체 페이지를 렌더링하고, 이후에는

요청(이벤트)시 마다 서버에서 제공하는 리소스를 클라이언트에서

해석하여 렌더링함.

-> Anguler.js / Backbone.js 프레임워크 등장

-> but 클라이언트가 점점 무거워지자 다시 view만 관리하자는 입장의

     React.js 등장

 

 

SSR 과 CSR 의 차이점

- 초기 렌더링 속도 / SEO / 보안

 

 

- 초기 렌더링 속도

 

사용자 행동(이벤트)에 따라 필요한 부분만 다시 렌더링 하기 때문에

서버측에서 요청(이벤트)마다 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠르다.

SSR의 경우에도 Ajax기능을 위해 CSR이 포함되게 된다.

 

but 

 

초기에 JS를 읽어들이고 그리는 등 단계를 거쳐야 하기 때문에 초기 렌더링 속도는 느리다.

이후에는 부분적 렌더링을 하기 때문에 SSR보다 반응속도가 더 빠르다.

[이미지 출처] - https://brownbears.tistory.com/411

 

- SEO( Search Engine Optimization )

 

대부분의 웹 크롤러, 봇들은 JS는 실행시키지 못하고 HTML에서만 정보를 수집한다.

-> CSR 방식으로 개발된 페이지는 빈 페이지로 인식하게 된다.

-> 검색엔진에 노출되지 않으면 유저의 유입에 악영향을 준다.

 

but

 

SSR 방식의 경우 서버에서 view를 렌더링하여 보내주기 때문에 SEO적용에 문제가 없다.

 

 

- 보안

CSR 방식은 클라이언트 측의 쿠키 외에는 유저 정보를 저장할 공간이 마땅치 않다.

 

 

 

참고자료 링크 :
https://brownbears.tistory.com/411