How it works
In a SPA the browser downloads the app once. Clicking a link does not load a new document; a client-side router changes the URL with the History API and redraws only the parts that differ, fetching data from an API as needed. Gmail and most admin dashboards work this way.
SPAs usually render on the client, which brings the CSR trade-offs: a slower first load and weaker SEO unless a framework adds server rendering. They also have to handle things browsers give multi-page sites for free, such as scroll position, focus after navigation and announcing page changes to screen readers.
Single-page app (SPA) pros and cons
Pros
- Smooth, app-like navigation without full page reloads
- State such as open panels or playing audio survives navigation
- Static hosting on any CDN, with the API kept separate
Cons
- Slower first load while the JavaScript bundle downloads
- SEO and link previews need extra work
- Must rebuild browser basics: focus, scroll and accessibility on navigation
When to use Single-page app (SPA)
Pick it when
- Dashboards, tools and apps where people stay a long time
- Rich interactivity with state that should survive navigation
Skip it when
- Content sites whose visitors read one or two pages and leave
- Search traffic is the main source of visitors
Single-page app (SPA) vs the alternatives
Related terms
More in Rendering and architecture
App shapes