Frontend & browser·topic 11 of 13
Routing and navigation
The moment an application takes the address bar away from the browser, it inherits everything the browser was doing for free. This is the list of what it inherited, most of which gets rediscovered as a bug report.
Read in order · tick what you already know
- 01
the address bar changes and the content swaps, but the browser never loads a new document.
Single-page application
- 02
every link is a real navigation and the server sends a whole new document each time.
Multi-page application
- 03
the page changed without a reload, so none of your load-time metrics fired for it.
Soft navigation
- 04
you clicked a link and the whole document reloaded, losing everything held in memory.
Hard navigation
- 05
you intercepted the link click, pushed a new URL and rendered a different component in place.
Client-side routing
- 06
you changed the URL with `pushState` and nothing was fetched, because that is all it does.
History API
- 07
the deep link worked from inside the app and returned a 404 when you refreshed the page.
SPA fallback
- 08
you navigated from one profile to another and the component kept the previous user's data on screen.
Route parameter
- 09
the sidebar stayed mounted and kept its scroll position while the panel next to it changed.
Nested route
- 10
someone pasted a URL from three screens in and it opened exactly that state, not the home page.
Deep link
- 11
you pressed back and landed at the top of the list instead of where you had scrolled to.
Scroll restoration
- 12
you pressed back and the previous page appeared instantly, exactly as you left it, with no requests.
Back-forward cache
- 13
hovering the link quietly fetched the next route's code and data before the click landed.
Route prefetching
- 14
the element animated smoothly from its position on one page into its position on the next.
View transition