Skip to content
Frontend Architecture Patterns

Multi-Page Applications (MPA)

Multi-Page Applications (MPA) are the traditional model for web applications. Every time the user navigates to a new URL, the browser requests a completely new HTML document from the server.

What it is

Section titled “What it is”

In an MPA, the routing logic and page rendering happen on the server. The client (browser) is primarily responsible for displaying the HTML and CSS provided by the server.

When it works well

Section titled “When it works well”
  • SEO-critical sites: Since the server sends fully rendered HTML, search engines can easily crawl the content.
  • Content-heavy sites: Blogs, news sites, and informational platforms.
  • Simplicity: Lower technical overhead and native browser behavior for history and focus management.
  • Performance: Excellent Time to Interactive (TTI) and easy CDN caching of static pages.

Modern Enhancements

Section titled “Modern Enhancements”

The line between MPAs and SPAs is blurring with technologies like HTMX, Turbo (Hotwire), and Unpoly. These allow for partial page updates without full reloads while maintaining a server-centric model.

When it becomes problematic

Section titled “When it becomes problematic”
  • Highly dynamic state: Complex UI state is lost on every page reload unless persisted in cookies or storage.
  • Rich transitions: Native MPAs cannot easily perform cross-page animations.

Technical Complexity

Section titled “Technical Complexity”

Low. Most traditional frameworks (Rails, Django, Laravel, PHP) are built for this pattern.

Section titled “Related Patterns”