SPA — Explained with Examples

A Single Page Application (SPA) loads a single HTML page and dynamically updates content via JavaScript, avoiding full page reloads.

SPAs load the entire application on the first request — HTML, CSS, and JavaScript bundle. Subsequent navigation and data fetching happen through JavaScript (AJAX/fetch) without reloading the page. Client-side routing (React Router, Vue Router) updates the URL and renders the appropriate view. Frameworks like React, Angular, and Vue are designed for SPA architecture.

Think of an SPA like a well-organized filing cabinet. When you open it (initial load), you see all the folders (components) and documents (data). Switching between folders just moves the dividers — you never close and reopen the cabinet. An MPA (multi-page) is like going to a filing room, opening one drawer, closing it, opening another, each time walking back to your desk.

SPAs provide a smooth, app-like user experience after the initial load. However, they have downsides: slower initial load, SEO challenges (partially solved by SSR/SSG), and JavaScript dependency.

// Client-side routing (simplified)
const routes = {
    '/': HomePage,
    '/users': UsersPage,
    '/users/:id': UserDetailPage,
};

function navigate(path) {
    history.pushState(null, '', path);
    renderRoute();
}

function renderRoute() {
    const path = window.location.pathname;
    const Component = routes[path] || NotFound;
    document.getElementById('app').innerHTML = Component.render();
}

// Handle browser back/forward
window.addEventListener('popstate', renderRoute);

The tradeoff is clear: SPAs excel for dynamic, interactive applications (dashboards, social media, collaboration tools). MPAs are better for content-heavy, SEO-critical sites (blogs, documentation, e-commerce).

MPA, SSR, SSG, Virtual DOM, DOM

SPA vs MPA