SPA와 MPA

SPA란

Single Page Application의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. SPA는 기본적으로 웹에 필요한 리소스를(HTML, CSS, Javascript, Images 등)을 한 번 다운로드 후 이후엔 필요한 데이터를 받아올 때만 서버와 통신힙니다.
첫 요청시 한 페이지와 소스만 불러오고 페이지 이동 시 기존 페이지 내부를 수정 후 보여주는 방식(렌더링)입니다.

SPA의 장점

1. 앱 실행 시 모든 소스를 받고 난 이후엔 필요한 데이터가 있을 경우에만 서버와 통신하기 때문에 트래픽을 최소화할 수 있습니다.
2. 개발 간소화되었습니다. 서버에서 페이지를 렌더링할 필요가 없습니다.
3. 컴포넌트 단위로 개발을 하기 때문에
4. 전체 페이지를 리렌더링하는게 아닌 필요한 부분만 리렌더링하기에 네이티브 앱과 비슷한 속도와 반응성을 경험할 수 있다.

SPA의 단점

1. 앱 실행에 필요한 소스를 최초에 모두 받기 때문에 앱 초기 실행 속도가 느리다.
2. 페이지가 하나 뿐이라 SEO(검색엔진최적화) 작업이 어렵다.

MPA란

Multi Page application 약자입니다. 페이지가 여러 개인 어플리케이션이란 뜻입니다. 페이지를 요청할 때 마다 현재 페이지에 들어갈 소스가 다운로드한 후 전체 페이지를 리렌더링합니다. 우리가 홈페이지 이용 중에 페이지 이동할 때 마다 화면이 깜빡거린 후 페이지가 표시되는 현상이 이러한 이유때문입니다.

MPA의 장점

1. 검색엔진 최적화 - 자바스크립트 구동 전에 홈페이지 템플릿을 전달받을 수 있는데 자바스크립트를 구동할 수 없는 검색로봇이 페이지를 크롤링하기에 매우 좋다.

MPA의 단점

1. 페이지 이동할 때 마다 불필요한 템플릿 로딩 및 화면 깜빡임.
2. 서버 렌더링에 따른 성능 부하

이미지 출처: https://enterprisemonkey.com.au/blog/single-page-apps-vs-multiple-page-apps/