Learn the concept
Single Page Applications
A Single Page Application loads one HTML page and dynamically updates content using JavaScript without full page reloads. The browser handles routing client-side, fetching data via APIs and re-rendering only the parts that change.
A Single Page Application (SPA) is a web application that loads a single HTML document and dynamically rewrites the page content as the user interacts with it.
How SPAs work:
SPA vs Traditional (MPA): | SPA | Multi-Page App | |-----|---------------| | One HTML page | Multiple HTML pages | | Client-side routing | Server-side routing | | Faster navigation | Full page reloads | | Heavier initial load | Lighter per-page load | | SEO requires SSR/SSG | SEO built-in |
Examples: Gmail, Google Maps, Trello, Spotify Web
Frameworks: React, Vue, Angular, Svelte
// SPA entry point — one HTML file
// <div id="root"></div>
// Client-side routing (simplified)
window.addEventListener('popstate', () => {
renderPage(window.location.pathname);
});
function navigate(path) {
window.history.pushState({}, '', path);
renderPage(path);
}
function renderPage(path) {
const root = document.getElementById('root');
switch (path) {
case '/':
root.innerHTML = '<h1>Home</h1>';
break;
case '/about':
root.innerHTML = '<h1>About</h1>';
break;
default:
root.innerHTML = '<h1>404</h1>';
}
}Complex CRUD interfaces with navigation between views without full page reloads
Apps like document editors and chat where maintaining persistent client state across views is critical
SPAs combined with service workers for offline-capable mobile-like experiences in the browser
Build a simple hash-based router that renders different views without page reloads
Build a SPA using pushState and popstate with dynamic content loading and URL management