Master Frontend Routing & Navigation
Deep-dive resources on client-side routing architecture, the History API, nested layouts, query-string state, accessibility, service worker navigation, and framework-specific patterns — written for frontend developers, UI engineers, and performance specialists.
Modern web applications rely on routing not merely as navigation — but as the foundational state synchronisation layer between the user, the browser, and the application. Whether you're building a lightweight SPA or an enterprise platform, the decisions you make about routing architecture directly influence SEO, performance, and user experience.
From understanding how browsers handle navigation history to implementing production-grade routers in React, Next.js, Vue, SvelteKit, and Angular — and making them work offline with service workers — this site covers the full spectrum of frontend routing knowledge across four areas, twenty-five topics and more than fifty focused deep dives.
Routing Architecture & Fundamentals
Core routing principles, SPA vs MPA tradeoffs, route matching algorithms, dynamic segments, nested layouts, accessible route changes, and resilient fallback strategies.
History API & State Management
Browser history primitives, pushState & replaceState patterns, popstate event handling, scroll restoration, deep linking, and keeping filters and search terms in the query string.
Framework-Specific Routing Patterns
React Router, Next.js App Router vs Pages, Vue Router configuration, SvelteKit conventions, Angular standalone routing, and migrating between routers — with production-grade TypeScript examples.
Service Worker & Offline Routing
How a service worker intercepts navigation requests — routing strategies, offline fallback pages, app-shell caching, and navigation preload with streamed shell composition for resilient, instant-loading apps.
Start here
New to the site? These pages answer the questions that come up first, and each links onward to the deeper material around it.
- Hash routing vs History mode — which URL style your deployment can actually support.
- Configuring SPA fallback rewrites — the catch-all rule that makes deep links survive a cold load.
- pushState vs replaceState — the decision behind every well-behaved back button.
- Nested & layout routing — why shared chrome should never remount on a sibling navigation.
- Route change accessibility — everything a real page load does that pushState does not.
- Query string state sync — filters and search terms that survive sharing, reload and the back button.
Recently added
The newest deep dives, covering the platform features that have changed most in the last year.
- View Transitions with the Navigation API — animating route changes without stuck frames.
- Speculation Rules for route prerendering — letting the browser prerender the next document.
- Navigation preload & streaming — removing service worker boot latency from every navigation.
- Router migration & interop — two routers, one history stack, no broken bookmarks.
- Angular standalone component routing — routing with no NgModules at all.
- Trie-based route matching — O(k) resolution that ignores how many routes you registered.