What Is SPA?
Single-Page Application
A SPA is a web application that loads a single HTML page and dynamically updates content using JavaScript, without full page reloads. React, Vue, and Angular apps are typically SPAs.
How SPA Works
In a traditional website, clicking a link loads an entirely new HTML page from the server. In a SPA, JavaScript intercepts navigation, fetches data via API calls, and re-renders just the parts that changed. This feels instant — like a native app.
The tradeoff: SPAs have poor initial load performance and SEO challenges because the HTML is empty until JavaScript runs. This led to SSR (server-side rendering) and SSG (static site generation) as hybrid solutions.
Key Concepts
- Client-Side Routing — JavaScript handles URL changes without full page reloads — React Router, Vue Router
- Initial Bundle — The JavaScript file(s) the browser must download and execute before the app is usable
- API-First — SPAs fetch all data from backend APIs, completely separating frontend and backend
Frequently Asked Questions
What is the difference between a SPA and a regular website?
A regular website loads new HTML pages from the server on each navigation. A SPA loads once and updates dynamically using JavaScript — no full page reloads.
Are SPAs bad for SEO?
Historically yes, because search crawlers couldn't execute JavaScript. Modern crawlers (Googlebot) can render SPAs, but SSR/SSG still provides faster indexing and better initial load performance.