SPA vs. MPA

1. What Is a Single-Page Application (SPA)?

A Single-Page Application loads one HTML document once, and every subsequent "page" is rendered dynamically by JavaScript in the browser — no full page reloads. The URL changes (via the History API), but the browser never actually navigates away from the original shell page.

Core idea: The server serves a minimal HTML file + a JS bundle. The browser runs the JavaScript, which takes over routing, fetching data, and rendering UI.

Common frameworks: React (with Vite/CRA), Vue, Angular, Svelte.

---

2. What Is a Multi-Page Application (MPA)?

A Multi-Page Application works the way the web was originally designed. Every URL corresponds to a separate HTML document generated by the server. When a user clicks a link, the browser makes a full new HTTP request, the server builds and returns a complete HTML page, and the browser replaces everything on screen.

Core idea: The server does the work — it queries the database, assembles the HTML, and sends a finished page. The browser just renders it.

Common approaches: Django, Rails, Laravel, PHP, Next.js (SSR/SSG), traditional WordPress.