SPA

Single-Page Application

Updated September 29, 20262 min read

In short

An SPA is a web application that loads a single HTML page and then updates content with JavaScript, so moving between views does not reload the page.

What is an SPA?

A single-page application loads one HTML shell and a JavaScript bundle up front. After that, when the user clicks a link or submits a form, JavaScript fetches only the data it needs, usually as JSON from an API, and redraws part of the page instead of asking the server for a whole new document.

To make this feel like normal browsing, SPAs use client-side routing: the browser's History API changes the URL and the back button keeps working, even though no full page load happens. Libraries and frameworks such as React, Vue, Angular, and Svelte are commonly used to build SPAs.

Think of a traditional website as turning to a new printed page each time, while an SPA is more like a whiteboard where only the part that changes is erased and redrawn. That makes apps like email clients, dashboards, and design tools feel fast and fluid once they have loaded.

The trade-offs are a slower first load, because a lot of JavaScript must download and run before anything useful appears, and weaker SEO if search engines or AI crawlers only see an empty shell. That is why many modern frameworks combine SPA-style navigation with server-side rendering (SSR) or static generation for the first view. The opposite model is a multi-page application (MPA), where every navigation loads a new HTML page from the server.

Key takeaways

An SPA loads one HTML page and updates it with JavaScript.
Navigation is handled in the browser without full page reloads.
Data usually comes from an API as JSON.
The first load can be slow, and SEO needs extra care.
SSR or static generation is often combined with SPAs to fix those issues.

Example

Client-side navigation without a page reloadjavascript

// Intercept clicks on in-app links instead of reloading
document.addEventListener("click", async (event) => {
  const link = event.target.closest("a[data-spa]");
  if (!link) return;
  event.preventDefault();

  // Change the URL without a full page load
  history.pushState({}, "", link.href);

  // Fetch only the data and redraw part of the page
  const res = await fetch(`/api/pages${link.pathname}`);
  const page = await res.json();
  document.querySelector("h1").textContent = page.title;
});

Readers ask

What is the difference between an SPA and an MPA?

In an MPA, or multi-page application, every link loads a new HTML document from the server. In an SPA, the page is loaded once and JavaScript updates the content for later navigation.

Are SPAs bad for SEO?

They can be if the server sends an almost empty HTML page and relies on JavaScript to show the content. Rendering the initial HTML on the server or at build time solves most of these problems.

Is React an SPA?

React is a library for building user interfaces, not an SPA by itself. It is often used to build SPAs, but it can also render pages on the server through frameworks such as Next.js.

SPA