SPA vs MPA 개념정리 및 장단점

1. SPA (Single Page Application)

개념

SPA란? Single Page Application의 줄임말로 뜻 그대로 하나의 페이지로 구성이 되어있는 어플리케이션을 말합니다.
SPA의 핵심 가치는 사용자 경험(UX) 향상에 있고, 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어서
모바일 퍼스트(Mobile First) 전략에 부합합니다.

작동방식

SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드하고,
이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만 따로 전달받아 페이지를 갱신을 합니다.
기존 페이지의 내부를 수정해서 보여주는 방식이라고 이해하시면 됩니다.
기본적으로 SPA는 클라이언트 사이드 렌더링, CSR 방식의 렌더링입니다.

장점

1. 사용자 경험 향상! 정적 리소스를 모두 다운받기 때문에 페이지 갱신시 화면 깜빡임 X
2. 갱신에 필요한 데이터만 받기 때문에 속도와 응답시간이 빠름
3. 컴포넌트 기반의 코드를 작성하기 때문에 재사용성이 높다.
4. 모바일 앱도 SPA와 동일한 아키텍처에서 개발되기 때문에 모바일을 염두해두면 동일한 백엔드 코드를 재사용하도록 할 수 있다.

단점

1. 모든 리소스를 최초 접근시에 다 다운하기 때문에 초기 구현 속도가 느림
2. JavaScript로 구축되기 때문에 검색엔진최적화(SEO)가 어려움
3. 보안이 약하다. JavaScript는 코드 컴파일을 수행하지 않으므로 악의적인 사용자가 액세스할 수 있기 때문

2. MPA (Multi Page Application)

개념

MPA란 Multi Page Application의 줄임말로 위의 설명한 SPA의 반대되는 개념입니다.
즉, 다중 페이지 어플리케이션 입니다.

작동방식

MPA는 각 페이지별로 HTML문서가 따로 존재하여, 페이지를 이동할 때마다 새로운 html 페이지를 받아와서
새로 렌더링하는 전통적인 웹페이지 구성 방식입니다.

장점

1. SEO 최적화
   여러 페이지를 생성할 수 있기 때문에 훨씬 더 많은 수의 키워드를 타겟팅할 수 있고,
   따라서 Google에서 얻을 수 있는 유기적 트래픽의 양이 자동으로 향상된다고 합니다.

단점

1. 페이지 이동시 새로운 파일을 받아야하기 때문에 로딩 시간 증가
2. 여러 페이지의 규모가 너무 커지면 유지 관리 및 업데이트가 어려울 수 있다.

참고

Which one you actually need-“Single Page Application or Multi Page Application”
SPA vs. MPA
SPA vs MPA와 SSR vs CSR 장단점 뜻정리
SPA vs MPA 개념, 장단점