(CS) SPA vs MPA

SPA (Single Page Application)

• 단일 HTML 파일에서 동작하는 웹 애플리케이션

• 페이지 전환 시 브라우저가 전체 페이지를 다시 요청하지 않고 자바스크립트가 라우팅을 처리하고 필요한 데이터만 받아와서 화면을 갱신

• history.pushState 등으로 브라우저 주소만 바꾸고 JS를 통해 DOM을 조작하여 뷰를 갱신

• 전체 새로고침 없음

• 대표 프레임워크: React, Vue, Angular

  • 예: example.com/dashboard → 전체 페이지 새로고침 없이 JS로 화면만 변경

⸻

MPA (Multi Page Application)

• 페이지마다 별도의 HTML 파일을 서버에서 받아오는 전통적인 웹 방식

• URL이 바뀔 때마다 서버에 새 요청을 보내고 전체 HTML 페이지를 새로 로드

• 대표 프레임워크: Spring MVC, Django, PHP 등 서버 렌더링 기반 앱

  • 예: example.com/login → 로그인하면 example.com/mypage로 이동하며 전체 페이지 새로고침 발생

⸻

작동 방식 비교

항목	SPA	MPA
라우팅 방식	클라이언트 라우팅 (React Router 등)	서버 라우팅 (URL마다 요청 발생)
페이지 전환 방식	전체 새로고침 없이 자바스크립트로 전환	페이지마다 전체 새로고침 발생
자바스크립트 의존도	높음	낮음 (HTML만으로도 동작 가능)

⸻

SPA

장점

• 페이지 전환이 빠르고 사용자 경험이 부드러움
• 프론트엔드 개발자에게 익숙한 개발 방식
• 프론트에서 상태 관리, 라우팅 등을 자유롭게 구현 가능

단점

• 초기 로딩이 느림 (모든 JS를 한번에 로드)
• SEO에 불리함 (검색엔진이 JS 렌더링을 지원하지 않으면 콘텐츠 인식 못 함)
• 보안에 더 신경 써야 함 (모든 로직이 클라이언트에 있음)

⸻

MPA

장점

• 초기 렌더링이 빠름 (서버에서 HTML을 즉시 응답)
• SEO 친화적 (HTML에 콘텐츠 포함되어 있음)
• 서버 사이드 권한 관리가 용이함

단점

• 매 페이지 전환마다 서버 요청이 필요해 UX가 끊김
• 페이지마다 중복되는 리소스 요청 가능성 있음
• 서버 부하 증가 가능성

⸻

간단 비교

항목	SPA	MPA
구성 구조	단일 페이지 (index.html)	다중 HTML 페이지
라우팅 방식	클라이언트 라우팅 (React Router 등)	서버 라우팅 (URL마다 서버 요청)
페이지 전환 속도	빠름 (JS로 렌더링)	느림 (전체 페이지 새로고침)
초기 로딩 속도	느림 (JS 로딩 필요)	빠름 (서버에서 HTML 바로 응답)
SEO	약함 (기본 상태에선 크롤러에 취약)	강함 (HTML 기반 콘텐츠 제공)
상태 관리	클라이언트에서 직접 구현 필요	서버 중심 처리 가능
적용 사례	대시보드, SNS, SaaS 앱	블로그, 포털, 전통 웹사이트