SPA vs MPA

 

 

 

 

SPA (Single-Page Application)

📌 한 개의 HTML 페이지로 동작하는 웹 애플리케이션 구조

📌 최초 요청 시 index.html + JS/CSS를 로드하고, 이후 페이지 이동은 JavaScript가 DOM을 동적으로 바꾸는 방식

📌 일반적으로 CSR(Client Side Rendering) 방식으로 렌더링

장점

• 페이지 전환이 빠름 (리로드 없음)
• 사용자 경험(UX)이 좋음
• 프론트엔드 로직을 재사용하기 좋음
• 라우터(Vue Router, React Router)로 자유로운 화면 구성 가능

단점

• 초기 로딩이 상대적으로 느림 (모든 정적 리소스를 최초 접근시 모두 다운로드하기 때문)
• SEO(검색엔진 최적화)에 불리함(SSR로 해결 가능)
• 클라이언트 렌더링 복잡성 증가
• 복잡한 상태 관리와 메모리 누수 문제에 직면할 수 있으며, 이를 관리하기 위해 추가적인 개발 노력이 요구

 

 

 

MPA (Multi-Page Application)

📌 페이지마다 별도의 HTML 파일을 갖는 전통적인 웹 구조

📌 페이지 이동 시마다 서버에서 HTML을 새로 받아옴

📌 SSR(Server Side Application) 방식으로 렌더링

장점

• SEO(검색엔진 최적화) 매우 강함
• 초기 로딩이 빠름 (필요한 HTML만 받음)
• 보안/접근성 측면에서 단순함
• 서버 렌더링 기반이라 구조 명확

단점

• 페이지 이동마다 깜빡임과 리로드 발생
• 화면 간 UI 상태가 유지되지 않음
• 클라이언트 상호작용이 많은 서비스에는 비효율적

 

 

 

 

프론트엔드 개발에서의 SPA와 MPA의 차이점 및 선택 기준

📌 SPA가 적합한 경우는

=> 사용자 경험을 최우선으로 고려하고, 동적인 인터랙션이 많은 웹 애플리케이션

=> 앱처럼 끊김 없이 빠른 웹앱

 

📌 MPA가 적합한 경우는

=> SEO를 중요시하고, 각 페이지마다 고유한 URL을 가지는 것이 중요한 웹 사이트

=> 검색·문서 중심 사이트