Skip to content
Frontend Architecture Patterns

Single-Page Applications (SPA)

Single-Page Applications (SPA) load a single HTML shell and use JavaScript (typically via a framework like React, Vue, or Angular) to update the DOM as the user navigates.

What it is

Section titled “What it is”

The server provides a minimal HTML file, and the client-side JavaScript handles routing, data fetching, and rendering.

When it works well

Section titled “When it works well”
  • Highly interactive apps: Dashboards, SaaS platforms, and tools where users stay on the same “page” for long periods.
  • Rich transitions: Smooth animations between views without full page reloads.
  • Complex state: Maintaining global state (like a music player or real-time chat) across different views.

When it becomes problematic

Section titled “When it becomes problematic”
  • SEO Reliability: While modern search engines can render JS, it is more resource-intensive and less reliable than static HTML.
  • Initial Load Time: Large JavaScript bundles can slow down the “First Meaningful Paint.”
  • Browser Behavior: Requires manual management of the back/forward buttons, deep linking, and accessibility (focus management).
  • Longevity: Client-side memory leaks can accumulate in long-running sessions.

Technical Complexity

Section titled “Technical Complexity”

Medium. Requires client-side routing, state management, and careful performance optimization.

Section titled “Related Patterns”