Blog
3 min read

SPA vs MPA: Single-Page vs Multi-Page Applications Explained

A single-page app loads once and swaps content with JavaScript; a multi-page app loads a new HTML page for each link. How each works, what it means for speed, SEO, hosting and complexity, and why modern frameworks like Next.js and Astro blur the line.

When people describe how a web app is built, two terms come up: SPA (single-page application) and MPA (multi-page application). The difference is what happens when you click a link.

MPA: a new page for every click

In a multi-page application, every link loads a brand new HTML page from the server. Click "Pricing" → the browser requests /pricing → the server sends a complete page → the browser displays it.

This is how the web worked from the beginning. WordPress, classic PHP sites, Django and Rails apps, and most marketing sites work this way.

SPA: load once, then swap content

In a single-page application, the browser loads one HTML page and a bundle of JavaScript at the start. After that, clicking a link doesn't load a new page — JavaScript changes the URL and redraws the part of the screen that changed, fetching any data it needs from an API.

Apps made with React + Vite, Vue or Angular are usually SPAs. Gmail, Figma and Trello feel like SPAs. Many AI-built apps (Lovable, Bolt) are SPAs. (What is React?, What is Vite?)

Side by side

MPA SPA
First load Fast — just one page Slower — loads the app's JavaScript first
Clicking around Full page reload each time Instant, app-like
SEO Easy — each page is real HTML Harder — content appears after JavaScript runs
Works without JavaScript Yes No
Hosting Server renders pages Static files + an API
Complexity Simpler More moving parts (routing, state)

Problems you'll hit with SPAs

  • 404 on refresh. Refresh /settings and the server says "not found", because the only real file is index.html. The host must send every route to index.html. (Why refreshing gives a 404)
  • SEO. Search engines can run JavaScript but less reliably, and social link previews often see a blank page. (SEO basics for your app)
  • Blank page after deploy when a script fails to load. (React blank page after deploy)
  • Big JavaScript bundles making the first load slow on phones.

Problems you'll hit with MPAs

  • Every click re-downloads and redraws the page — fine for content, clunky for highly interactive tools.
  • Sharing state between pages (like an open chat panel) is harder.

The modern answer: both

Frameworks like Next.js, Remix/React Router, Nuxt, SvelteKit and Astro do a hybrid: the first page is rendered on the server as real HTML (good for speed and SEO), and then the app takes over in the browser so navigation feels instant. (SSR vs CSR vs SSG)

That's why "SPA vs MPA" matters less than it used to. The more useful question is where each page is rendered.

Which should you build?

  • Content site, blog, marketing pages: MPA or a static/hybrid framework like Astro. (Astro vs Next.js)
  • Logged-in dashboard or tool where SEO doesn't matter: an SPA is perfectly fine and simple to host.
  • Both public pages and an app: a hybrid framework like Next.js, or a static marketing site plus an SPA on app.yourdomain.com.

EasySpawn hosts SPAs, MPAs and hybrid frameworks alike — with the routing set up so refreshes don't 404 — on a server that also runs your API and database. See how it works or join the waitlist.

Related: SSR vs CSR vs SSG · Static vs Dynamic Websites · What Is Next.js? · Why Refreshing Your React Page Gives a 404

Keep reading