SSR과 CSR 비교

SSR(server side rendering)

전통적인 방식(SSR)

 

SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식

JSP/Servlet의 아키텍처에서 이 방식을 사용함

SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있음

서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있음

더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있음

 

 

---

CSR(client side rendering)

SPA

CSR 방식은 최초 요청시에 HTML을 비롯해 CSS, Javascript 등 각종 리소스를 받아옴

이후에는 서버에 데이터만 요청하고, 자바스크립트로 뷰를 컨트롤 함
당연히 초기 요청 때 SSR 보다 많은 리소스를 요청하기 때문에, 렌더링은 속도는 SSR이 더 빠름
하지만 이후 다른 페이지로의 이동시에는 SSR 보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공함

만약 인터넷 속도가 엄청 느리다면, 일단 처음 받게될 HTML은 빈페이지이기 때문에 유저는 제대로된 화면을 한참 후에나 만나볼 수 있음