← Lessons

quiz vs the machine

Silver1050

Frontend

Client Side Routing

Swap views without full page reloads by intercepting URL changes in JavaScript.

4 min read · intro · beat Silver to climb

What it is

Client side routing keeps a single HTML document loaded while JavaScript swaps the visible view as the URL changes. The browser never makes a full document request, so navigation feels instant.

How it works

  • A link click is intercepted so the browser does not navigate away.
  • The router updates the URL with the History API (pushState) without reloading.
  • The router matches the new path to a component and renders it.

The trade off

  • Pros: fast transitions, preserved application state, smooth animations.
  • Cons: the initial bundle is larger, and you must handle the back button, titles, and accessibility focus yourself.

The server should still respond to any deep URL with the app shell so a hard refresh works.

Why it matters

Replacing only the changed part of the page avoids re downloading shared layout, scripts, and styles. This is the foundation of single page applications.

Key idea

Client side routing intercepts navigation and uses the History API to render new views in place, avoiding full page reloads.

Check yourself

Answer to earn rating on the learn ladder.

1. What browser API updates the URL without a reload?

2. Why must the server return the app shell for deep URLs?