MPAs vs. SPAs
Understanding the tradeoffs between Multi-Page Application (MPA) and Single-Page Application (SPA) architecture is key to understanding what makes Astro different from other web frameworks like Next.js and Remix.
TerminologySection titled Terminology
A Multi-Page Application (MPA) is a website consisting of multiple HTML pages, mostly rendered on a server. When you navigate to a new page, your browser requests a new page of HTML from the server. Astro is an MPA framework. Traditional MPA frameworks also include Ruby on Rails, Python Django, PHP Laravel, WordPress, Joomla, Drupal and static site builders like Eleventy or Hugo.
Astro vs. other MPAsSection titled Astro vs. other MPAs
The result is a developer experience that feels a lot like Next.js and other modern web frameworks, but with performance characteristics of a more traditional MPA site architecture.
MPAs vs. SPAsSection titled MPAs vs. SPAs
There are three main differences to be aware of when comparing MPAs vs. SPAs:
Server rendering (MPA) vs. client rendering (SPA)Section titled Server rendering (MPA) vs. client rendering (SPA)
Server routing (MPA) vs. client routing (SPA)Section titled Server routing (MPA) vs. client routing (SPA)
Where does your website router live? In an MPA, every request to the server decides which HTML to respond with, so the routing logic lives in the server. In a SPA, your router locally runs in the browser and hijacks any navigation to render the new page without ever hitting a server.
SPAs can also offer more powerful transitions across page navigation because they control so much about page rendering. To match this support, MPAs leverage tools like Hotwire’s Turbo that mimic client routing by also controlling navigation in the browser. The HTML is still rendered on the server, but Turbo can now display a seamless transition between pages similar to client routing in an SPA.
Server state management (MPA) vs. client state management (SPA)Section titled Server state management (MPA) vs. client state management (SPA)
Are MPAs Better than SPAs?Section titled Are MPAs Better than SPAs?
When comparing MPAs vs SPAs, there is no “better” or “worse” choice. It all comes down to tradeoffs.
Astro prioritizes the performance and simplicity of MPAs because it makes the most sense for our usecase of content-focused websites. More stateful, interaction-heavy websites may benefit more from the app-like architecture that SPAs bring at the expense of first-load performance.
Case StudiesSection titled Case Studies
Below are all of the public Astro comparisons that we are aware of:
- Astro vs. SPA (Next.js) - 34% faster load
- Astro vs. SPA (Next.js) – 65% network usage reduction
- Astro vs. SPA (Remix, SvelteKit) - “That [Lighthouse score] is incredible.”
- Astro vs. Qwik - 43% faster TTI
If you know a public migration or benchmark and don’t see it listed here, please create a PR to add it.
More ResourcesSection titled More Resources
If you’d like to learn more, Surma (Google) and Jake Archibald (Google) recorded a great back-and-forth discussion on this exact topic.