SSR와 CSR

SSR(Server Side Rendering)

서버에서 *랜더링 준비를 끝 마친 상태로 클라이언트에 전달 하는 방식

*작성된 마크업 언어를 엔진이 해석해서 사람의 눈으로 볼 수 있도록 해주는 과정

주로 정적인 화면에 사용

관련 기술 : JSP, 타임리프

CSR(Client Side Rendering)

서버에서 데이터를 받아 클라이언트 에서 랜더링 해주는 방식

마크업 언어 결과물을 자바스크립트를 사용하여 동적으로 생성해서 적용

주로 동적인 화면에 사용

관련기술 : React, vue.js

 

구분	SSR	CSR
웹페이지 (최초)로딩	빠름 (필요한 부분의 스크립트만 불러옴)	느림 (모든 스크립트을 한번에 불러옴)
페이지 이동 / 동작 속도	느림 (다음 페이지 로딩이 필요 / 요청시 마다 브라우저 새로고침 일어남)	빠름 (모든 스크립트가 다운되어 있어 빠름)
SEO (Serach Engine Optimization : 검색엔진 최적화)	유리 (서버쪽에 만들어진 html을 크롤링 할 수 있기 때문에 유리)	불리 (최초로 불러온 html의 내용은 비어 있어 크롤링에 불리)
서버 부담(자원)	불리 (페이지를 구성하는 모든 리소스를 준비해서 응답해야함)	유리  (필요한 정보만 요청하게 됨으로 유리)