What is the difference between Client-Side Routing and Server-Side Routing in web applications?

Short answer

Client-Side Routing changes components and the URL through the browser History API without reloading the page, while Server-Side Routing requests a completely new HTML page from the server.

Explanation

Single-page applications (SPAs) load the JavaScript bundle once. As users navigate, a router such as React Router intercepts links and updates the UI and URL locally, giving an immediate desktop-app-like experience without a screen reload flicker.

Code example

// Client-side navigation without a full reload
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      {/* Link Intercepts the click and uses history.pushState */}
      <Link to="/dashboard">Dashboard</Link>
    </nav>
  );
}

Common mistakes

• Using a regular <a href="/path"> link inside an SPA, reloading the page and clearing all application state from memory.

Follow-up questions

• What strategies reset Scroll to the top of the page after a route change (Scroll Restoration)?

Sources

• React Router docs — Picking a Mode