사용자가 볼 수 있는 웹 상에서의 화면을 서버에서 렌더링 하는지, 클라이언트에서 렌더링 하는지에 따라 서버사이드 렌더링과 클라이언트 사이드 렌더링으로 나눈다.
CSR
CSR(Client Server Rendering). 사용자가 원하는 페이지의 렌더링을 클라이언트(주로 자바스크립트)가 처리하는 것.
기존의 서버사이드 렌더링 방식은 필요한 HTML을 보여주는것을 서버에서 담당하였으나 네크워크 기술 발전으로 실시간 보여주는 것에 대한 수요가 늘어나게 됨에 따라 등장함. 이 방식에서는 서버가 최초 1회에 한해서만 전송하되 나머지는 클라이언트 측에서 담당
특징
- 패드 모바일 환경 등 다양한 곳에서 기존의 서버사이드 렌더링 방식을 채택할 경우 유연하지 못한 단점을 대체가능(서버의 과부하 일어날 가능성 적음)
- CSR 개발의 간편함을 위해 앵귤러 JS, 리액트 JS 등 여러 방식이 등장
SSR
SSR(Server Side Rendering). 사용자가 원하는 페이지의 렌더링을 서버가 처리하는 것.
서버가 HTML 등 그 자체의 파일을 보낸다. 그것을 받은 브라우저는 자바스크립트를 이용하여 동적인 페이지로 재구현한다. 서버가 보낸 것은 동적이 아닌 정적페이지다. 읽어들이고 보내는 일련의 모든 과정들이 서버측에서 수행되는 방식.
특징
- 구조의 복잡성(리액트 라우터, 리덕스 등등을 같이 사용하기 때문에 서버 자체에서 데이터를 불러와 처리하는 경우엔 복잡성이 증가)
각각 비교하기
- SSR은 주로 서버 측에서 보안, CSR의 경우 쿠키외엔 딱히 없음
- CSR은 view의 변경사항이 있을 경우 서버에 요청을 해야만 하는 번거로움 있음
- SSR은 초기 속도는 빠르지만 그외는 CSR보다 느리며 정보가 많은 사이트의 경우 서버 부하의 여지가 있음
- CSR은 초기 속도를 제외한 영역에서 SSR보다 속도가 빠르며 바로 인터렉션 가능(자바스크립트가 구현하는 점에서 초기엔 속도가 느리기 때문)
