JAN's History

SPA와 MPA의 차이점 완전 정리 본문

React

SPA와 MPA의 차이점 완전 정리

JANNNNNN 2025. 4. 20. 14:06

웹 개발을 하다 보면 SPA(Single Page Application)와 MPA(Multi Page Application)라는 개념을 자주 접하게 되는데요.

둘 다 웹 애플리케이션을 만드는 방식이지만, 사용자 경험과 기술 구조에서 큰 차이가 있어요!

이 글에서는 두 방식의 개념, 동작 방식, 장단점, 그리고 React를 예시로 한 구현 방식까지 상세하게 살펴보겠습니다 

✅ SPA(Single Page Application)

SPA는 말 그대로 하나의 HTML 페이지에서 모든 동작이 이루어지는 방식이에요.

브라우저는 최초에 하나의 HTML 파일 (index.html)과 필요한 자바스크립트 번들을 서버로부터 받아오고, 이후에는 사용자의 동작(클릭, 이동 등)에 따라 필요한 컴포넌트를 클라이언트에서 동적으로 렌더링해요. React, Vue, Angular 등 대부분의 프론트엔드 프레임워크는 이 방식을 기반으로 한답니다.

 

React SPA 기본 흐름 예시를 함께 코드로 살펴볼게요.

<!-- public/index.html -->
<body>
  <div id="root"></div>
</body>
// src/main.tsx
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
// src/App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

라우팅도 클라이언트에서 처리하므로 전체 페이지를 새로고침하지 않고, 필요한 부분만 DOM을 갱신해요.

이로 인해 UX가 부드럽고 빠르며, 모바일 앱과 유사한 느낌을 줄 수 있게 된답니다!

✅ MPA(Multi Page Application)

MPA는 전통적인 웹 애플리케이션 방식으로, 사용자가 페이지를 이동할 때마다 서버로 새로운 HTML 페이지를 요청해요.

페이지 전환 시 전체 화면이 새로고침되며, 서버에서 렌더링된 결과를 받아오는 방식이에요.

대표적인 예시로는

  • JSP
  • PHP
  • Django

같은 백엔드 중심의 프레임워크가 있어요.

MPA 흐름 예시도 함께 살펴보자면!

  1. 사용자가 /login 접속 → 서버가 login.html 반환
  2. /mypage로 이동 → 서버가 mypage.html 반환
  3. 각 요청마다 전체 HTML을 새로 가져오고 렌더링

📊 SPA vs MPA 비교

렌더링 방식 클라이언트 사이드 렌더링 (CSR) 서버 사이드 렌더링 (SSR)
페이지 이동 JavaScript로 DOM 조작 새로운 HTML 요청 후 전체 페이지 새로고침
초기 로딩 속도 느릴 수 있음 빠름
사용자 경험 앱처럼 부드러움 깜빡이거나 끊김 있음
SEO 어렵지만 개선 가능 (예: Next.js) 상대적으로 유리
서버 부담 낮음 (초기 로딩 후에는 서버 호출 적음) 높음 (모든 요청에 대해 HTML 생성 필요)

❓그렇다면 왜 SPA는 SEO에 불리한가?

SPA는 현대적인 웹앱에 적합한 방식이라 많이 사용하고 있죠.

빠르고 부드러운 UX를 제공하지만 SEO나 초기 로딩 속도면에서는 한계가 있어요 

1. 렌더링 위치의 차이 (클라이언트 vs 서버)

  • SPA는 클라이언트 사이드 렌더링(CSR) 방식이라, 사용자가 페이지를 요청하면 처음엔 거의 빈 HTML(index.html에 <div id="root" />만 있는 상태)을 받고, 그 후에 JS가 실행되면서 실제 콘텐츠를 화면에 보여줘요.
  • 이 과정은 브라우저에서 JS가 실행된 후에야 완료되겠죠?

그런데 검색엔진 크롤러는 자바스크립트 실행을 제대로 하지못하거나, 느리거나, 건너뛰기도 해서

Google, Bing 같은 봇이 콘텐츠를 보러올 때 빈 div만 있으면 내용이 없는 페이지로 인식할 수 있어요.

➡️이게 바로 SPA가 SEO에 불리한 이유랍니다.

🔍 예를 들어:

<!-- 크롤러가 보는 SPA의 index.html -->
<html>
  <body>
    <div id="root"></div> <!-- 실제 내용 없음 -->
    <script src="/main.js"></script>
  </body>
</html>
  • 브라우저는 JS를 실행해서 DOM을 채우지만, 크롤러는 여기까지만 보고 판단할 수 있어요.

❓그럼 MPA는 왜 SEO에 유리할까?

MPA는 서버가 요청마다 HTML을 이미 다 채운 상태로 보내주기 때문에, 검색엔진이 페이지를 열자마자 내용이 다 들어 있어요.

<!-- MPA의 서버 렌더링된 페이지 예시 -->
<html>
  <body>
    <h1>사용자 프로필</h1>
    <p>이름: 홍길동</p>
  </body>
</html>

➡️크롤러는 이렇게 실제 콘텐츠를 바로 확인할 수 있기 때문에, SEO에 훨씬 유리해요.

⭐그렇다면 SSR은 뭘까 ??

SSR은 SPA의 SEO 문제나 초기 로딩 속도 문제를 해결하기 위한 방법 중 하나인데요.

SSR = 서버 측 렌더링이라고 생각하면 돼요.

React 같은 프론트엔드 프레임워크를 사용하면서도, 초기 화면을 서버에서 미리 그려서 보내주는 방식이랍니다

🔁 SPA와 비교해서 흐름을 보면

일반 SPA (Client Side Rendering)

  1. 브라우저가 index.html 요청
  2. <div id="root">만 있음
  3. JS가 실행되고 React 앱이 동작
  4. 그제야 화면이 보임

👉 그래서 검색엔진 봇이 내용을 못 볼 수도 있고, 유저도 초기 로딩이 느릴 수 있음

SSR

  1. 브라우저가 /page 요청
  2. 서버가 React 코드를 실행해서 HTML을 완성된 형태로 렌더링
  3. HTML을 응답으로 내려줌
  4. 브라우저는 이미 내용이 다 있는 페이지를 받아서 바로 보여줌
  5. 이후에는 React가 hydrate(수분 공급, 즉 연결) 해서 CSR로 전환됨

hydrate  = 서버에서 먼저 렌더링한 HTML에, 브라우저에서 React가 기능(이벤트 핸들링 등)을 붙이는 과정

예시 (SSR로 내려온 HTML)

<body>
  <div id="root">
    <h1>안녕하세요, 홍길동님!</h1>
  </div>
  <script src="/main.js"></script>
</body>

 

// Node.js 서버 코드 예시 (Express + React)
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import App from './App';

const server = express();

server.get('*', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);

  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div id="root">${html}</div>
        <script src="/main.js"></script>
      </body>
    </html>
  `);
});

server.listen(3000);
  • HTML이 이미 콘텐츠를 포함한 상태로 내려오니까,
  • 사용자도 바로 내용을 볼 수 있고,
  • 검색엔진도 문제없이 콘텐츠 인식 가능

⚠️ 단점

  • ❌ 서버에 부담: 요청마다 렌더링을 새로 해야 하니까 CPU 리소스 더 씀
  • ❌ 페이지마다 서버 응답이 필요 → CDN 캐싱 힘듦
  • ❌ 개발/배포 복잡성 증가 (Next.js 같은 SSR 프레임워크 필요)

 

그럼 "번들링"은 SPA 전용일까? 

그러면 여기에서 궁금증이 생기죠!

클라이언트에서 로드를 담당하므로 성능을 위해서 SPA는 번들링이 필요할 것 같은데 

MPA도 번들링리 필요할까?

🛠 번들링이란?

 

  • 여러 개의 JS, CSS, 이미지 파일 등을 하나 또는 몇 개의 큰 파일로 합치는 작업
  • Webpack, Vite, Rollup 등이 이 역할을 하고있어요.

SPA에서 번들링이 중요한 이유

  • SPA는 모든 페이지의 로직이 하나의 자바스크립트 앱 안에 들어 있어요.
  • 그래서 번들링하지 않으면 수많은 파일을 각각 요청해야 하니까 성능 저하가 돼요.
  • 초기 로딩 속도도 느려지고, 유지보수도 어려워진답니다.
  • 따라서 SPA는 거의 필수적으로 번들링이 필요해요

그렇다면 MPA는?

  • MPA는 각 페이지가 별도 HTML이고, 자바스크립트도 페이지별로 따로 로드할 수 있어요.
  • 페이지마다 필요한 스크립트만 포함시키면 되기 때문에 꼭 번들링할 필요는 없어요.
  • 물론 현대적인 MPA에서도 성능 최적화를 위해 번들링을 하기도 한다네용.. (하지만 필수는 아님)

 

'React' 카테고리의 다른 글

React 학습하기 - 상호작용 더하기  (3) 2025.07.30
React 학습하기 - UI 표현하기  (2) 2025.07.26
React 학습하기 - 빠르게 시작하기  (1) 2025.07.21
ReactNode, ReactElement, JSX.Element 완전 정복 (feat. 바벨과 createElement까지)  (1) 2025.04.22
브라우저의 기본 렌더링 방식과 React.js의 렌더링 방식 살펴보기(With Virtual DOM)  (0) 2025.04.06
'React' Related Articles more