SPA(Single Page Application)와 MPA(Multi Page Application) 란?

 

SPA (Single Page Application)

SPA는 한 번의 페이지 로드 후 필요한 데이터만 동적으로 가져와 화면을 갱신하는 방식입니다.

주요 특징:

• 빠른 사용자 경험: 페이지 전체를 새로고침하지 않고 필요한 부분만 업데이트
• AJAX 활용: 서버와 비동기 통신으로 필요한 데이터만 가져옴
• 라우팅 처리: 클라이언트 측에서 라우팅 관리 (React, Vue, Angular 등 활용)

장점:

1. 부드러운 사용자 경험 (Seamless UX)
2. 서버 요청 최소화로 빠른 속도 제공
3. 프론트엔드와 백엔드 분리가 용이

단점:

1. 초기 로딩 속도가 느릴 수 있음
2. SEO(검색 엔진 최적화) 문제
3. 복잡한 상태 관리 필요

예시:

// React를 사용한 SPA 간단 예제
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
    return (
        <Router>
            <Switch>
                <Route path="/home" component={HomePage} />
                <Route path="/about" component={AboutPage} />
            </Switch>
        </Router>
    );
}

MPA (Multi Page Application)

MPA는 각 요청마다 새로운 HTML 페이지를 서버에서 가져오는 전통적인 웹 애플리케이션 방식입니다.

주요 특징:

• 페이지 새로고침: 요청마다 새로운 HTML 로드
• 서버 기반 렌더링: 서버에서 전체 페이지를 렌더링 후 클라이언트로 전달
• SEO 친화적: 각 페이지가 고유 URL과 메타데이터를 가짐

장점:

1. SEO 최적화에 유리
2. 초기 로딩 속도 빠름
3. 기존 웹 기술과 호환성이 높음

단점:

1. 사용자 경험이 SPA보다 떨어질 수 있음
2. 페이지 전환 시 전체 새로고침 발생
3. 서버 요청이 많아질 수 있음

예시:

<!-- 간단한 MPA 예제 -->
<a href="/home">Home</a>
<a href="/about">About</a>

<!-- 서버에서 각 경로를 처리하여 HTML 반환 -->

SPA vs MPA 비교

특징	SPA	MPA
렌더링 방식	클라이언트 측	서버 측
속도	초기 느림, 이후 빠름	요청마다 느릴 수 있음
SEO	추가 설정 필요 (예: SSR, Prerendering)	기본적으로 SEO 친화적
사용 기술	React, Vue, Angular 등	JSP, Thymeleaf, Django 등

---