[Web] SPA VS MPA 개념, 장단점 비교

📌 SPA란?

SPA란 Single Page Application 의 약자로 말 그대로 하나의 페이지로 구성 되어있는 애플리케이션을 말한다.

작동방식

SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번만 다운로드 하고 새로운 페이지 요청이 있을 때 필요한 데이터만 받아 갱신한다.
기본적으로 SPA는 CSR(Client Side Rendering)방식 (무조건은 아님!)

장점

1. 자연스러운 사용자 경험 (정적 리소스를 한번에 다운받기 때문에 페이지 갱신시 화면 깜빡임이 없다.)
2. 컴포넌트별로 개발하기 때문에 재사용이 가능
3. 서버가 해야 할 역할을 클라이언트가 수행하므로 서버 부담 감소
4. 프론트와 백이 명확히 구분된다.
   
   

단점

1. 모든 리소스를 최초 접근 시 모두 다운받기 때문에 초기 구동 속도가 느리다.
2. 클라이언트에 주요 로직이 노출될 수 있어 보안이 약하다.
3. 검색엔진최적화(SEO)가 어렵다.
   
   
   
   

📌 MPA란?

MPA란 Multi Page Application 의 약자로 여러개의 페이지로 구성된 애플리케이션을 말한다.

작동방식

MPA는 각 페이지별로 문서가 따로 존재하며, 새로운 페이지를 요청할 때 마다 서버에서 랜더링 된 정적 리소스(HTML, CSS, JS)가 다운로드 된다.
페이지를 이동하거나 새로고침 할 때 마다 전체 페이지를 다시 랜더링 한다.
MPA는 SSR(Server Side Rendering) 방식으로 랜더링.

장점

1. 검색엔진최적화(SEO)에 유리하다.
   
   

단점

1. 페이지 요청마다 전체 페이지를 랜더링 하기 때문에 로딩 시간이 발생한다.
2. 프론트와 백의 구분이 명확하지 않다.