MPA 와 SPA

오늘은 MPA와 SPA가 무엇인지 각각 알아보고, 둘의 차이점을 알아볼 예정이다.

 

MPA (Multi Page Application) 란?

사용자가 /panda.html 을 서버에 요청한 상황이다.

사용자 - 브라우저 - 서버는 각각 위와 같은 역할 및 동작을 수행한다. 

MPA는 사용자가 페이지를 이동할 때마다 서버에서 새로운 HTML 페이지를 받아오는 방식이다.

- 전통적인 웹사이트 구조 (ex. 네이버, 다음)

- 각 URL마다 실제 HTML 파일이나 서버에서 생성된 HTML 페이지가 존재

- 페이지를 이동할 때마다 전체 페이지가 새로 로드

 

예시 흐름

- GET /home → 서버에서 home.html 응답

- GET /products → 서버에서 products.html 응답

브라우저는 각 요청에 대해 새 HTML 문서를 받아오고, CSS/JS도 다시 요청하게 됨.

SPA (Single Page Application) 란?

SPA는 애플리케이션 전체가 하나의 HTML 페이지로 구성되고, 필요한 데이터나 UI만 동적으로 변경되는 방식이다.

- 최초 한 번만 HTML을 로딩

- 이후에는 JavaScript를 통해 화면의 일부만 동적으로 갱신

- 페이지 이동은 브라우저 URL은 바뀌지만 화면은 새로고침 없이 변경

 

예시 흐름 (React, Vue 등 SPA 프레임워크 기반)

- GET / → 서버에서 index.html + JS 번들 응답

- 사용자가 /profile 이동 → JS 라우터가 동작하여 해당 컴포넌트를 렌더링 (서버 요청 없음 또는 API만 요청)

 

이제 차이점을 표로 이해해보자.

 

차이점 정리

항목	MPA (Multi-Page)	SPA (Single-Page)
페이지 구성	HTML 파일 여러 개	HTML 하나 + JavaScript로 동적 구성
페이지 이동	전체 페이지 새로고침	전체 새로고침 없이 일부만 변경
초기 로딩 속도	빠름 (필요한 페이지만 받음)	느릴 수 있음 (전체 로직 초기 로드 필요)
SEO(검색 최적화)	우수 (기본적으로 HTML 있음)	어려움 (CSR만 쓸 경우 크롤러 인식 어려움)
개발 난이도	상대적으로 단순	라우팅, 상태관리 등 복잡
서버 의존성	높음 (페이지 이동마다 서버 요청)	낮음 (API만 요청하고 화면은 클라이언트 처리)
브라우저 히스토리	기본 브라우저 기능	History API 사용 필요