웹 애플리케이션을 개발할 때, SPA(Single Page Application) 와 MPA(Multiple Page Application) 두 가지 구조 중에서 선택할 수 있다.
각각의 방식은 장점과 단점이 다르며, 프로젝트의 요구사항에 따라 적절한 방식을 선택해야 한다.
1. SPA와 MPA 개요
✔ SPA (Single Page Application)
- 하나의 HTML 페이지에서 모든 콘텐츠를 동적으로 업데이트하는 방식
- 주로 React, Vue, Angular 등의 프레임워크와 함께 사용됨
✔ MPA (Multiple Page Application)
- 각 페이지마다 새로운 HTML을 요청하는 방식
- 전통적인 웹 애플리케이션 방식으로 서버 중심 렌더링
2. SPA (Single Page Application)
✅ SPA란?
SPA는 최초에 하나의 HTML을 로드한 후, JavaScript를 이용해 동적으로 콘텐츠를 변경하는 방식이다.
추가적인 페이지 이동이 필요할 때 서버에서 새로운 HTML을 불러오는 것이 아니라, 클라이언트 측에서 데이터를 가져와 업데이트한다.
✅ SPA의 동작 방식
- 사용자가 웹사이트에 접속하면 최초 HTML 파일과 JavaScript 파일을 다운로드한다.
- 이후 새로운 페이지로 이동할 때, JavaScript가 서버에서 필요한 데이터만 받아와 화면을 업데이트한다.
- 기존 HTML을 그대로 유지하면서 필요한 부분만 변경하기 때문에 빠른 페이지 전환이 가능하다.
✅ SPA의 장점
✔ 빠른 페이지 전환 속도
- 페이지를 새로고침하지 않고, 필요한 데이터만 업데이트하여 사용자 경험(UX) 이 부드럽다.
✔ 네이티브 앱과 유사한 UX 제공 - React, Vue 같은 프레임워크에서 클라이언트 측 라우팅(Client-Side Routing) 을 활용하여 네이티브 앱처럼 작동할 수 있다.
✔ 서버 요청 감소 - 전체 페이지를 새로 로드하지 않고 필요한 데이터만 가져오기 때문에 서버 부하가 적다.
✅ SPA의 단점
❌ 초기 로딩 속도 지연
- 첫 번째 요청 시, JavaScript 번들을 모두 다운받아야 하기 때문에 초기 로딩이 느릴 수 있다.
❌ SEO(검색 엔진 최적화)가 어려움 - 검색 엔진이 JavaScript를 실행하지 못하면, SPA의 콘텐츠를 크롤링하기 어려울 수 있다.
→ SSR(서버 사이드 렌더링) 또는 프리렌더링을 활용하여 해결 가능
✅ SPA의 대표적인 예시
- Gmail
- React, Vue, Angular 기반 웹 애플리케이션
3. MPA (Multiple Page Application)
✅ MPA란?
MPA는 페이지마다 별도의 HTML 파일을 요청하는 방식이다.
전통적인 웹사이트(블로그, 쇼핑몰 등)에서 가장 많이 사용되는 구조이며, 각 페이지 요청 시 서버에서 새로운 HTML을 반환한다.
✅ MPA의 동작 방식
- 사용자가 새로운 페이지로 이동하면, 서버에서 새로운 HTML을 요청하고 렌더링한다.
- 페이지 이동 시 새로운 요청이 발생하여 브라우저가 전체 HTML을 새로 로드한다.
- 서버가 직접 HTML을 생성하여 반환하기 때문에, SEO가 유리하다.
✅ MPA의 장점
✔ SEO(검색 엔진 최적화)에 유리
- 각 페이지가 독립된 HTML을 제공하므로, 검색 엔진이 쉽게 크롤링할 수 있다.
✔ 초기 로딩 속도가 빠름 - 첫 번째 요청에서 필요한 HTML과 CSS만 로드하면 되므로 초기 화면 표시 속도가 빠르다.
✔ 보안이 강함 - 서버에서 HTML을 생성하기 때문에, 클라이언트 측에서 민감한 데이터가 노출될 가능성이 적다.
✅ MPA의 단점
❌ 페이지 전환 시 새로고침 발생
- 사용자가 다른 페이지로 이동할 때마다 전체 페이지가 새로고침되므로 UX가 부드럽지 않을 수 있다.
❌ 서버 부하 증가 - 매번 새로운 HTML을 요청하므로, 서버에서 각 요청을 처리하는 부담이 커질 수 있다.
❌ 복잡한 상태 관리 - 각 페이지가 독립적으로 동작하기 때문에, 페이지 간 상태(state)를 공유하기 어려움
✅ MPA의 대표적인 예시
- 네이버, 다음 같은 포털 사이트
- 온라인 쇼핑몰 (쿠팡, G마켓, 11번가 등)
- 위키피디아
- 전통적인 서버 기반 웹 애플리케이션 (Django, Spring 기반 프로젝트 등)
4. SPA와 MPA 비교
| 구분 | SPA (Single Page Application) | MPA (Multiple Page Application) |
|---|---|---|
| 페이지 로딩 방식 | 하나의 HTML에서 동적으로 변경 | 요청마다 새로운 HTML을 받음 |
| SEO (검색 최적화) | 어려움 (SSR 필요) | 쉬움 |
| 초기 로딩 속도 | 느림 (JS 번들 다운로드 필요) | 빠름 |
| 페이지 전환 속도 | 빠름 (데이터만 변경) | 느림 (전체 HTML 새로고침) |
| UX (사용자 경험) | 앱처럼 부드러운 전환 가능 | 전통적인 웹사이트 느낌 |
| 서버 부하 | 낮음 (최소한의 요청) | 높음 (HTML 요청 많음) |
| 보안 | 클라이언트 측 렌더링 → API 노출 가능성 | 서버에서 HTML 생성 → 상대적으로 안전 |
✔ SPA는 부드러운 페이지 전환과 빠른 사용자 경험이 필요한 웹앱에 적합
✔ MPA는 SEO가 중요한 웹사이트(블로그, 쇼핑몰, 뉴스 사이트)에 적합
5. SPA와 MPA 선택 기준
🔹 SPA를 선택해야 하는 경우
✔ 네이티브 앱과 유사한 경험이 필요한 경우 (예: 대시보드, 소셜 네트워크 서비스)
✔ 빠른 페이지 전환이 중요한 경우 (예: Gmail, Trello)
✔ 상태 관리가 중요한 애플리케이션 (예: React 상태 관리가 필요한 프로젝트)
🔹 MPA를 선택해야 하는 경우
✔ SEO가 중요한 경우 (예: 블로그, 뉴스 사이트, 검색 엔진 의존도가 높은 사이트)
✔ 페이지 간 연관성이 낮고 독립적인 콘텐츠가 많은 경우 (예: 쇼핑몰, 포털 사이트)
✔ 서버에서 직접 렌더링해야 하는 경우 (예: 보안이 중요한 금융 사이트)
6. 하이브리드 방식 (SSR을 활용한 Next.js)
최근에는 SPA와 MPA의 장점을 결합한 하이브리드 방식이 많이 사용된다.
Next.js 같은 SSR(Server Side Rendering) 지원 프레임워크를 활용하면 SEO 문제를 해결하면서도 SPA의 장점을 유지할 수 있다.
📌 Next.js 활용 예시
export async function getServerSideProps() {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const data = await res.json();
return {
props: { data }
};
}
export default function Home({ data }) {
return (
<div>
{data.map((post) => (
<h2 key={post.id}>{post.title}</h2>
))}
</div>
);
}✔ Next.js는 SEO 최적화(SSR)와 빠른 페이지 전환(CSR)을 동시에 지원한다.
✔ 실무에서는 Next.js를 활용하여 SEO 문제를 해결하고, 성능을 최적화하는 경우가 많다.
🎯 결론
- SPA는 한 개의 HTML로 모든 콘텐츠를 동적으로 변경하여 빠른 페이지 전환을 제공하지만 SEO와 초기 로딩 속도 문제가 있다.
- MPA는 각 페이지마다 새로운 HTML을 요청하여 SEO에 유리하지만, 페이지 전환 속도가 느리고 서버 부하가 크다.
- Next.js 같은 SSR 프레임워크를 활용하면 SPA의 장점과 MPA의 장점을 결합할 수 있다.
