Single Page Application

Explanation

In a traditional multi-page application (MPA), every navigation triggers a full HTTP request to the server, which returns a new HTML document. The browser discards the current page and renders the new one. In a SPA, the initial page load fetches the full JavaScript application; subsequent navigation is handled by client-side routing — JavaScript intercepts link clicks, updates the URL (using the History API), fetches only the new data needed, and re-renders just the changed parts of the UI. No full page reload occurs. Client-side routing is implemented by libraries like React Router, Vue Router, or Next.js's App Router. The router maps URL patterns to components: when the URL changes, the router renders the matching component into the page without a server roundtrip. This creates the illusion of page navigation with the speed of in-app state updates. SPA advantages: fluid navigation (no full-page reload means no white flash), reduced server load (the server only serves data, not HTML), rich interactivity (state persists between "pages"), and better support for real-time features. Disadvantages: slower initial load (must download entire app bundle), SEO challenges without SSR, and complex routing, state management, and loading state handling. Large SPAs can be code-split: instead of one massive bundle, each "page" has its own JavaScript chunk loaded on demand. React.lazy() and dynamic import() enable this. Next.js does code-splitting automatically per page/route.

Code Example

// React SPA with client-side routing (React Router v6)
import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom';

function App() {
  return (
    
      

      
        } />
        } />
        } />
        } />
        } />
      
    
  );
}

// Programmatic navigation
function LoginForm() {
  const navigate = useNavigate();
  const handleSubmit = async (data) => {
    await login(data);
    navigate('/dashboard'); // redirect after login
  };
  // ...
}

Why It Matters for Engineers

SPAs are the dominant architecture for complex web applications. Knowing how client-side routing works, what code-splitting is, and when a SPA creates more problems than it solves (e.g., for a content-heavy public site) lets you make informed architectural decisions and debug routing issues. SPA routing bugs are a common source of real-world issues: broken deep links (refreshing a SPA URL returns 404 because the server doesn't know about client-side routes), blank screens after navigation (missing route definitions), and browser back-button inconsistencies. These require understanding how the History API and client-side routing interact.