본문 바로가기
공부/개발일지

CSR(Client Side Rendering)/SSR (Server Side Rendering)

by 파리삼이 2020. 1. 22.
728x90

(CSR) Client Side Rendering
최초 한번 페이지를 전체 로딩한 이후로 데이터만 변경하여 사용
HTML 다운+ JS파일 + 각종 리소스 다운 후 
브라우저에서 렌더링을 함. 초기 View 로딩 속도는 오래 걸림.
초기 구동 속도 제외 그 다음부터는 빠른 인터렉션의 성능.
페이지를 읽는 시간+JS읽는 시간+JS 화면을 그리는 시간 =이후>보여짐


(SPA)Single Page Aplication

(SSR)server-side rendering -> Vue.js
html, view 리소스들이 어떻게 보여질지 해석하고 렌더링해서 보여줌.
요청시마다 새로고침이 일어나며 새로운 페이지에 대한 요청을 하는 방식
첫 로딩이 짧다.(View를 서버에서 렌더링하여 가져옴)



(SEO) Search Engine Optimization - 검색 엔진 최적화


<보안>
ssr에서는 사용자에 대한 정보를 서버 측에서 세션으로 관리
csr은 쿠키말고는 사용자정보를 저장할 공간이 마땅치 않음.


* ssr의 경우 초기 로딩속도가 빠르고 seo에 유리하지만, view 변경시 서버에 계속 요청해야해서 서버에 부담이 크다
** csr의 경우 초기 로딩속도는 느리지만 서버에 다시 요청할 필요없이 클라이언트 내에서 작업이 이루어지므로 매우 빠르다. 하지만 seo에 대한 문제가 있다.

728x90