# SPA (Single-Page Application)

URL: https://softwaredictionary.org/terms/spa
Category: Web Development
Last updated: 2026-09-29

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 reload

```javascript
// 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;
});
```

## Frequently asked questions

**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.

---

Software Dictionary: https://softwaredictionary.org/ · https://softwaredictionary.org/llms.txt