Glossary › Web Development › SPA

SPA

A single-page application (SPA) is a web application that updates the current document with JavaScript as you move between screens, instead of loading a new HTML document for each screen. It can have many views and URLs: “single-page” describes how navigation works, not how much content the application contains.

How does a single-page application work?

  1. The browser receives the initial HTML, styles, and JavaScript needed to start the application.
  2. When you open another view, JavaScript handles navigation and can request data from an API.
  3. The application updates the relevant part of the screen. A client-side router can update the URL and browser history without replacing the whole document.

For example, an order-management dashboard could keep its navigation and filters in place while you open an order, change its status, and return to the list. The server still stores and validates the data; the SPA controls how the browser presents it.

SPA versus multi-page application

In a traditional multi-page application (MPA), navigating to another page normally requests a new HTML document from the server. An SPA handles those transitions within the current document. Either approach can support interactive features; adding JavaScript to a form does not by itself make a website an SPA.

SPA navigation and the first page's rendering strategy are separate choices. An application can receive server-rendered HTML initially and then use client-side navigation for later views.

Benefits and tradeoffs

  • Continuity: Updating a view can preserve useful interface state and avoid repeated document loads, but an SPA is not automatically faster. Large JavaScript downloads and slow data requests can delay the experience.
  • Navigation: Direct links, refreshes, and the Back and Forward buttons need deliberate routing and server configuration.
  • Accessibility: After a view changes, update the page title and manage keyboard focus so people can understand where they are. Announce important loading, success, and error messages to assistive technology.
  • SEO: Google can render JavaScript, but essential content must be available in the rendered HTML. Public views need crawlable links, distinct URLs, descriptive metadata, and appropriate handling of missing pages. Server rendering or prerendering can help deliver content to crawlers that do not run JavaScript.

When is an SPA a good fit?

Consider an SPA for an interactive workspace with frequent transitions and shared state, such as a dashboard or editing tool. For a small brochure site or a collection of articles, a multi-page site may meet the same needs with less routing and JavaScript complexity. Choose around the users' tasks, accessibility, initial loading, and maintenance needs rather than assuming one architecture is always better.

Further reading