Skip to content
Free Tool Arena

Glossary · Definition

SPA

A SPA (Single-Page Application) loads one HTML page and one JS bundle, then uses JavaScript to swap content as the user navigates — no full-page reload between routes. React, Vue, Svelte, Angular all enable SPAs by default. The pattern dominated 2014-2020.

Updated May 2026 · 4 min read
100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →

Definition

A SPA (Single-Page Application) loads one HTML page and one JS bundle, then uses JavaScript to swap content as the user navigates — no full-page reload between routes. React, Vue, Svelte, Angular all enable SPAs by default. The pattern dominated 2014-2020.

What it means

Browser fetches /index.html → loads the main JS bundle → JS takes over routing, fetches data via API, renders the right view. Subsequent navigation: client-side router updates the URL, fetches the page's data, re-renders without a network round-trip for HTML. The trade-off: initial load is heavier (you ship the whole app's JS upfront), SEO is harder (search engines see an empty HTML shell + JS, though they execute JS now), and broken JS = broken app. Modern frameworks (Next.js, Remix, SvelteKit, Nuxt) added SSR (server-side rendering) on top of SPA so the initial page is fully rendered HTML, then JS hydrates for interactivity. React Server Components (2024+) goes further: components run on the server, send only the rendered output + interactivity boundaries.

Advertisement

Why it matters

SPAs make sense when: the app is interactive enough that route transitions feel like a bottleneck (Gmail, Linear, Figma — apps where you live for hours), the audience has reliable JS (most do, but accessibility / no-JS is a real concern for some), and you want app-like state continuity across pages. They don't make sense when: SEO matters and you can't pay the SSR cost (use SSG or SSR), the app is mostly content (a blog, marketing site, or tool catalog should be SSG), or your team can't operate a real client-side state architecture (it's a real ongoing complexity tax).

Frequently asked questions

SPA vs SSR vs SSG?

SPA: client renders everything from a JSON API. SSR: server renders the page on every request, then hydrates. SSG: server renders the page once at build time. Modern frameworks (Next.js, SvelteKit) let you mix all three per route.

Is SPA dead?

Pure SPA is less common for new sites — modern Next/Remix/SvelteKit apps are SSR + hydration by default. But behind the hydration boundary they ARE SPAs. The term refers to a design choice you mostly inherit by framework default now.

What about React Server Components?

RSC let components run on the server, with only specified components hydrating on the client. Reduces JS shipped + simplifies data fetching. Mature in Next.js 13+; early in other frameworks. Effectively a return to server-first rendering with SPA-like interactivity where needed.

Related terms