SPA vs MPA (22.11.14 TIL)

멀티 페이지 애플리케이션 (Multi Page Application, MPA)

 

여러개의 페이지로 구성된 애플리케이션이다. MPA 는 새로운 페이지 요청이 있을 때마다 정적 리소스가 다운로드 되며 매번 전체 페이지가 다시 렌더링된다. 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 이 과정을 서버 사이드 렌더링(SSR)이라고 부른다.

완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에 검색 엔진이 페이지를 크롤링 하기에 적합하여 SEO (Search Engine Optimization, 검색 엔진 최적화) 관점에서는 유리하다.

하지만 새로운 페이지 요청이 있을 때마다 갱신되기 때문에 매번 새로고침이 발생되어 사용성이 좋지 않다. 또한 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하므로 비효율적이다.

싱글 페이지 애플리케이션 (Single Page Applicatoin, SPA)

SPA 는 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성하는 한 개의 페이지로 구성된 애플리케이션이다. SPA 에서 HTML, 자바스크립트, CSS 등 필요한 모든 코드는 단일 페이지 로드로 브라우저에서 검색하거나 일반적으로 사용자 작업에 대한 응답으로 적절한 리소스가 필요에 따라 동적으로 로드되고 페이지에 추가된다.

그래서 SPA 에서는 새로고침이 발생하지 않는다. SPA 는 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한 번만 load 한다. 시간은 오래 걸리지만 화면에 보여지는 HTML 을 최초로 한 번만 load 하여 클라이언트 측에서 가지고 있고, 이후 새로운 페이지 요청시 페이지 갱신에 필요한 데이터만을 JSON 으로 받아 동적으로 렌더링하기 때문에 기존의 애플리케이션보다 화면에 노출되는 속도가 빠르다. 이렇게 최초에 한 번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 렌더링하는 방식은 CSR 이라고 한다. 

이렇듯 SPA 는 필요한 데이터만 받아서 렌더링하기 때문에 효율적이며 전체 화면에 대한 loading 이 필요 없어 화면에 노출되는 속도가 빠르다. 또한 서버없이도 개발이 가능하고 local data 를 loacal cache 에 저장할 수 있다. 

 

참고 : 

SPA & Routing | PoiemaWeb

 

Single-page application - Wikipedia

 

 

SPA vs MPA와 SSR vs CSR 장단점 뜻정리 - 하나몬