SPA, Client side rendering and Server side rendering

Rendering

웹 페이지에 접속할 때 페이지를 화면에 그려주는 것

SPA(Single Page web Application)

하나의 웹페이지로 이루어진 application

web application에 필요한 모든 정적 리소스를 최초에 한 번 다운로드하고, 이후 새로운 페이지 요청 시에는 갱신에 필요한 데이터만을 전달받아 갱신하므로 전체적인 트래픽을 감소시킬 수 있다.

Client side rendering을 사용한다.

장점

 - 배포가 간단하다.

 - 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 ux를 제공한다.

 - 웹의 렌더링 속도가 빨라진다.

 - 페이지 갱신에 필요한 데이터만을 전달 받아 페이지를 갱신하므로 전체 트래픽 양을 감소시킬 수 있다.

단점

 - SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드하기 때문에 초기 구동속도가 상대적으로 느리다. 

 - SPA는 클라이언트 렌더링 방식이므로 SEO(검색엔진 최적화)문제가 있다. 그러나 Angular나 React등의 SPA 프레임워크는 서버 렌더링을 지원하는 SEO 대응 기술이 이미 존재하고 있어 SEO 대응이 필요한 페이지에 대해서는 선별적 SEO 대응이 가능하다.

Client side rendering

사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 빠른 인터렉션이 가능함

서버사이드 렌더링이 따로 필요하지 않기 때문에 일관성 있는 코드를 작성할 수 있음

페이지를 읽어들이는 시간, 자바스크립트를 읽어들이는 시간, 그리고 자바스크립트가 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기 구동속도가 느리다.

Server side rendering

전통적인 웹 방식으로 요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링하는 방식

유저가 처음으로 컨텐츠를 접하게 되는 시점을 당길 수 있다.

SEO 적용 가능

DOM을 조작하기 위해 요청하는 과정과 탐색비용이 크다.

출처

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

http://pureainu.tistory.com/289

http://asfirstalways.tistory.com/244