[CS] SSR vs CSR & SPA vs MPA

SSR 과 CSR을 비교하기 전, 생각해보면 좋은 것은 사용자가 바라보는 브라우저(화면) 에 띄워질 정보들, 데이타들이 최종적으로 어디서 만들어서 보여주는가? 이고, 이에 따라 SSR, CSR로 나뉜다. 

 

 

 

 

 

 

 

 

 

 

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

 

  SSR이란 ? ( Server Side Rendering)   

SSR은 서버 측에서 사용자(Client)에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. 즉, 페이지 이동 (사용자의 클릭 등의 이벤트) 이 있을 때마다 서버에 해당 새로운 페이지에 대한 요청을 보내고 페이지를 받기까지 딜레이가 조금 있을 수 있다. 

 

모든 데이터가 매핑된 서비스 페이지를 사용자(Client)에게 바로 보여줄 수 있다. 서버에서 페이지를 구성해서 보내주기 때문에 클라이언트 측에서 이를 수행하는 CSR(Client-Side-Rendring) 보다 페이지를 구성하는 초기 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다. 또한 SEO(Search Engine Optimization)를 쉽게 구성할 수 있다. 

 

장점

1) 초기 로딩 속도가 빠르므로 사용자가 빠르게 컨텐츠에 접근 가능하다. 

2) 모든 검색 엔진에 대한 SEO(검색엔진 최적화)가 가능하다. 

 

단점

1) 페이지를 요청할 때마다 새로고침이 되어 사용자입장에서 UX가 좋지 않은 편이다.

2) 매 번 서버에 요청을 보내기 때문에 트래픽, 서버 부하가 커진다.  

 

 

현재는 SPA (Single Page Application) 기법이 등장하면서 아래 설명할 CSR 방식이 각광받고 있다. 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

CSR이란 ? ( Client Side Rendering) 

CSR이란 최초 요청 시에 HTML, CSS, JavaScript 등 각종 리소스를 받아와 이후, 서버에 데이터만 요청하고 JavaScript로 View를 컨트롤 하는 기법을 말한다. 

 

초기 요청 때 SSR보다 많은 리소스를 요청하기 때문에 초기 렌더링 속도는 비교적 느리다. 하지만 이후, 다른 페이지로의 이동 시에는 이미 받아놓은 리소스들 덕분에 SSR보다 빠른 페이지 전환 속도가 가능하여 사용자 친화적이다. 

 

장점

1) 첫 로딩에 리소스를 전부 받아오기 때문에 페이지 이동 시 새로고침 현상이 없다. => 사용자 UX 가 뛰어나다. 

2) 서버에 요청하는 횟수가 적다. => 서버 부담이 덜하다. 

 

단점

1) 첫 로드 때 모든 HTML, static 파일들 (css, Js etc)이 로드 될 때까지 기다려야 한다. 

-> 리소스를 Chunk 청크 단위로 붂어서 요청하는 방식으로 완화시킬 수는 있지만 100% 해결이 되지는 않는다. 

2) SEO(검색엔진 최적화) 문제가 발생할 수 있다. 

-> 갓구글은 예외다. 구글은 JS까지 크롤링을 하지만 아직 네이버, 다음 등 다른 검색엔진은 그렇지 않다. 

-> 즉, CSR로 만든 웹사이트는 노출이 어려울 수도 있다. 

 

 

CSR vs SSR 

 

 

 

 

 

 

 

  SPA란 ? (Single Page Application)  

 

SPA란 ?

말 그대로 단일 페이지 어플리케이션이다.

 

- SPA를 구현하는 Virtual DOM 존재한다. 

- 초기 렌더링 이후 데이터만 받아와 동적으로 페이지를 표현하여 페이지의 이동이 적고 서버 요청도 적다.

- 프론트 엔드, 백엔드의 개발 업무 분업 / 협업이 쉬워 개발이 상대적으로 효율적이다. 

- 보통 SPA는 CSR 을 사용하지만 100% SPA == CSR은 아니다. 

 

 

SPA 라는 개념이 나오게 된 이유 

과거의 웹 사이트는 지금보다 문서 하나에 전달되는 파일의 용량이 적어서 한 번 클릭하면 완전히 새로운 페이지를 서버에서 전송해 주었다. (SSR) 그러나 점차 웹 사이트가 발전하고 한 페이지에 담긴 용량이 커지면서 매 번 요청마다 새로운 페이지를 완성시켜 전달해주는 것이 버겁게 되었다. 

 

 => SPA의 등장  (보통 CSR)  

SPA는 한 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다. 클릭 또는 스크롤 이벤트가 일어나면 최소한의 요소 변경이 일어나지 과거처럼 모든 완전한 페이지를 새로 완성시키지 않는다. 이미 초기에 로드를 한 자료에서 템플릿만 교체함으로써 서버의 부담을 줄이게 되었다. 

 

 

SPA 프레임워크의 종류 및 특징

유명한 SPA 프레임워크 : Angular, React, Vue 

 

SPA의 문제는 JavaScript로 인한 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하시키는 것이다. 그래서 Vitual DOM 가상의 객체트리, DOM을 만들어 html정보를 저장하고 있다가, 이 트리에 변경이 발생하면 모든 변화를 단 한번의 브라우저를 호출해 화면을 갱신한다. 

 

=> 브라우저와의 불필요한 상호작용을 최소화하면서 Interactive한 웹사이트를 만드는 것이 가능해진다. 

 

 

 

 

 

 

  MPA (Multiple Page Application) 

 

MPA란? 

화면마다 (페이지 하나하나 마다) html파일이 존재하고 사용자가 해당 화면을 요청 (by 클릭) 할 때마다 요청을 보내서 서버가 필요한 데이터를 파싱해서 html로 보여주는 방식 

 

SPA에서 SSR을 구현할 수 있을까?

-> 가능하다. 

React에서 사용되는 코드들이 Node.js 서버 환경에서도 실행될 수 있다. 

ReactDOM Server 라이브러리를 이용해 SSR을 구현할 수도 있다. 

Next.js 와 같은 React SSR 라이브러리를 이용해서 구현도 가능하다. 

다른 예시 : Vue.js 는 Nuxt.js 

 

 

 

 

 

 

결론 

SSR과 CSR의 장단점을 잘 분석해서 개발하는 웹사이트의 특징과 목적에 따라 적절히 활용해야 한다. UX에 지장이 가지 않도록 페이지를 나누고, 기존 SPA에서 하던 CSR로 구성하는 것도 좋다. 

 

 

 

 

---

 

 

References: 

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

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

SPA(Single Page Application) 이란?

https://velog.io/@namezin/CSR-SSR

CSR, SSR