SSR과 CSR 기본편

 

SSR, Server-Side Rendering

서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 (ex. JSP/Servlet)

모든 데이터가 매핑된 서비스 페이지를 사용자에게 제공

Search Engine Optimization(SEO)을 쉽게 구성

 

CSR, Client-Side Rendering

SSR보다 초기 전송되는 페이지의 속도가 빠르고 바로 사용자에게 페이지를 보여주는 방식

필요 데이터를 서버에 요청하여 화면을 재구성해하므로 전체적인 페이지는 SSR보다 느리게 사용자에게 제공

 

Frontend 영역

CSR View (Javascript)

JQuery에서 react, vue, angular2로 변화

추가로 Webpack, rollup, TypeScript, Babel

 

Backend 영역

SSR View (JSP/Servlet), API (Java)

 

따라서,

CSR은 웹 앱 초기 로딩 후 클라이언트에서 JS를 이용해서 동적으로 페이지 구성, 사용자 경험 향상, 빠른 상호작용

SSR은 서버에서 초기 HTML 컨텐츠 생성 및 전송하여 초기 로딩이 빠름, 검색 엔진 최적화 SEO 유리