🔹 What is an SPA?
A Single Page Application is a web app that loads a single HTML page initially, and updates the content dynamically using JavaScript without reloading the entire page.
🔹 Core Idea:
Instead of navigating between full pages from the server, an SPA:
-
Loads once
-
Uses JavaScript to update the DOM as you interact
-
Talks to the backend via API calls (AJAX/fetch)
🔹 Analogy:
Imagine a whiteboard where only the relevant content is erased and rewritten,
instead of replacing the entire board each time you want to change something.
🔹 What Happens Under the Hood?
-
User visits the SPA — browser loads:
-
index.html -
Bundled JS (React, Vue, etc.)
-
-
JS takes over — renders UI components
-
Navigation between “pages” is simulated by updating the DOM and URL (using
History API) -
All data is fetched via AJAX or fetch from APIs
-
Only parts of the screen update — no full-page reload
🔹 Benefits:
-
Fast, smooth user experience after initial load
-
Efficient client-server communication (JSON APIs)
-
Feels like a mobile/native app
-
Full control over routing, state, animations, etc.
🔹 Downsides:
-
Initial load time is heavier (large JS bundle)
-
SEO is challenging (bots might not see JS-rendered content unless SSR is used)
-
Needs more client-side code (routing, error handling, state management)
-
Manual management of browser behavior (history, scroll, titles, etc.)
🔹 Popular SPA Frameworks/Libraries:
| Tool | Description |
|---|---|
| React | Most popular SPA library |
| Vue.js | Lightweight and flexible |
| Angular | Full-featured SPA framework |
| Svelte | Compiler-based, minimal JS |
🔹 Key SPA Concepts:
| Concept | Purpose |
|---|---|
| Client-Side Routing | Maps URLs to components (e.g., React Router) |
| State Management | Manages data/UI state (e.g., Redux, Zustand) |
| Component Lifecycle | How components mount, update, unmount |
| AJAX/Data Fetching | Communication with backend (fetch/axios) |
🔹 SPA vs MPA (Multi Page App)
| Feature | SPA | MPA |
|---|---|---|
| Page reloads | No | Yes |
| Speed | Fast after initial load | Slower (each page reloads) |
| SEO | Harder | Easier (HTML served per route) |
| Complexity | More frontend logic required | Simpler |
| Use case | Dashboards, apps | Blogs, content sites |