MPA(Multi Page Application) vs SPA(Single Page Application)

민지렁이다 2023. 11. 19. 01:52

웹 애플리케이션 구축에는 MPA와 SPA라는 두가지 아키텍처 옵션이 있다.

MPA(Multi Page Application)?

직역하면 다중 페이지 애플리케이션, 사용자가 애플리케이션과 상호 작용할 때마다 새로운 페이지를 로드하는 방식

다수의 HTML 페이지로 구성된 웹 애플리케이션이여서 MPA는 블로그나 뉴스 웹사이트와 같은 특정 유형의 콘텐츠에 더 적합하다.

MPA의 장점

각 페이지에 고유한 URL이 있고 별도로 색인될 수 있으므로 SEO에 좋다.
서버에서 미리 렌더링하고 가져오기에 첫 로딩이 매우 짧다.
초기부터 사용된 웹 애플리케이션 구축 방법이라 해결법과 프레임워크 등에 대한 많은 자료가 있다.

MPA의 단점

프론트엔드와 백엔드 간의 개발 업무가 밀접하게 연관된다.
요청마다 전체 페이지를 다시 렌더링 하기에 사용자에겐 불편함을 야기할 수 있다.
렌더링마다 새로 페이지 패치해야 하기에 로딩 시간 발생한다.

SPA(Single Page Application)?

직역하면 단일 페이지 애플리케이션, 사용자가 상호 작용할 때 콘텐츠를 동적 업데이트하는 방식

SPA는 React, Vue와 같은 프레임워크가 등장하면서 인기를 끌기 시작했고, Facebook과 Twitter 그리고 Instagram과 같이 사용자가 기본 피드를 계속 스크롤 하는 방식이 SPA의 핵심이다. 사용자가 전체 페이지를 다시 로드하지 않고도 시스템 부분 간에 이동이 가능한 것이다.

페이지의 동작을 방해하지 않고 백그라운드에서 서버와 통신할 수 있게 해주는 AJAX 덕에 페이지를 다시 로드할 필요가 사라지는 것이다. 여기서 AJAX는 비동기 JavaScript 및 XML을 말한다.

전체 페이지를 로드하는 것이 아닌 필요 구성 요소만 수정하는 것으로 높은 성능과 좋은 사용자 경험을 제공한다.

SPA의 장점

페이지를 한 번 로드한 이후에는 페이지 전체를 로드할 필요없이 동적 수행이 되므로, 페이지 로딩 시간이 빨라진다.
서버와 통신을 통해 필요한 데이터만 주고 받기에 지연이나 중단없이 응답이 뛰어나고 좋은 사용자 환경을 제공한다.
해당 기능을 담당하는 모듈식 설계를 통해 다른 부분에 영향을 주지 않고 더 쉽게 해당 부분만을 수정하거나 교체할 수 있어서 유지보수가 용이하며, 더 많은 서버를 추가하여 SPA를 보다 더 효율적으로 확장할 수 있다.
초기 요청 이후 서버로부터 받은 페이지 데이터를 로컬에 캐싱한다.
페이지 최초에 한 번만 로드하기에 네트워크가 끊겨도 오프라인 상태에서 계속 동작할 수 있다.
서버가 사용자 요청에 대해서 애플리케이션이 API를 사용하여 서버에서 데이터 검색하므로 서버 요청이 최소화된다.
SPA에서 UI와 데이터는 분리되어, 백엔드에 영향을 주지 않고 원하는 만큼 프론트를 개편하고 UI를 변경할 수 있다.

SPA의 단점

크롤러가 동적 HTML 페이지 렌더링 과정에서 적합하지 않아서 SEO 문제가 생긴다.
초기 렌더링 과정이 기존 애플리케이션보다 느리다.
이전 브라우저나 장치와 호환되지 않을 수 있어 브라우저 호환성 문제가 발생할 수 있다.

정리

MPA	SPA
매 페이지 요청마다 정적 리소스 다운로드으로 전체페이지 리렌더링	모든 정적 리소스 최초 한번에 다운로드하고 요청 있을 때 필요 데이터만 받아서 갱신
SSR 방식	보통 CSR 방식