SSR vs CSR

* SSR(Server-side rendering) : 서버에서 사용자에게 보여줄 페이지를 모두 구성한다.

모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다.

단 - 서버를 이용하기 때문에 페이지를 구상하는 속도가 CSR에 비해 늦음 

장 - 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 CSR에 비해 빠름 

출처 : https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

 

* CSR(Client-side rendering) : 서비스 페이지를 보이는데 필요한 데이터를 클라이언트(브라우저)에서 구성한다.

단 - 전체적인 페이지 완료 시점은 SSR보다 느림

장 - 초기 전송되는 페이지의 속도가 SSR보다 빠름

출처 : https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

 

* SPA(single-page application)

전통적인 웹 사이트는 어떤 요소 하나를 한 번 클릭하면 서버로부터 완전한 새로운 페이지를 불러왔다.

현대에 이르며 한 페이지에 해당하는 페이지의 용량이 점점 커져가며 매번 새로운 페이지를 전달하는 것이 힘들어 졌다.

 

이러한 문제를 해결하기 위해 SPA가 등장하였다.

SPA는 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 사이트(또는 웹 애플리케이션)을 말한다. 연속되는 페이지들 간의 사용자의 경험을 향상시키고, 웹 애플리케이션이 데스크톱 웹 애플리케이션처럼 동작하는데 도와준다.

 

SPA를 구상하기 위해서는 기존의 페이지를 CSR view영역과 SSR view영역으로 분리해야 한다. 어떤 요소를 클릭하였을 때 변하는 영역은 CSR로 하고, 변하지 않을 영역은 SSR로 설정하는 것이다.

 

 

◆ 참고한 글, 더 자세한 설명이 있는 글

 

https://d2.naver.com/helloworld/7804182

https://www.huskyhoochu.com/what-is-spa/

SPA(Single Page Application) 이란?

https://ko.wikipedia.org/wiki/%EC%8B%B1%EA%B8%80_%ED%8E%98%EC%9D%B4%EC%A7%80_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98

싱글 페이지 애플리케이션 - 위키백과, 우리 모두의 백과사전