diff --git a/.changeset/client-side-navigation.md b/.changeset/client-side-navigation.md
new file mode 100644
index 000000000..2b7b0dc22
--- /dev/null
+++ b/.changeset/client-side-navigation.md
@@ -0,0 +1,5 @@
+---
+'@doc-kit/generator-react': minor
+---
+
+feat(html): navigate between pages client-side with the Navigation API, prefetching them on hover, keep the search index and remote config in memory across pages, scope speculation rules to links that leave the site, and hash fonts (reported through the bundler's new `fonts`) so every asset can be cached immutably
diff --git a/.oxlintrc.json b/.oxlintrc.json
index 41346e31b..a794496da 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -206,7 +206,8 @@
     {
       "files": [
         "packages/node-legacy/src/legacy-html/assets/*.js",
-        "packages/react/src/html/ui/**/*"
+        "packages/react/src/html/ui/**/*",
+        "e2e/**/*.spec.js"
       ],
       "globals": {
         "AsyncDisposableStack": "readonly",
diff --git a/docs/publishing.md b/docs/publishing.md
index 94b475804..5ab4f3233 100644
--- a/docs/publishing.md
+++ b/docs/publishing.md
@@ -23,6 +23,39 @@ convention). Two things to know about the result:
   index alongside the pages by targeting both generators — `target: ['html',
 'orama-db']`, so the search box has data to query.
 
+## Cache the assets
+
+Every file the `html` generator writes to `assets/` (scripts, stylesheets,
+fonts) is named after a hash of its content, so a changed file always gets a
+new name. Serve that directory with a long-lived, immutable cache, and let
+everything else (the pages, the search index) revalidate:
+
+```
+/assets/*   Cache-Control: public, max-age=31536000, immutable
+```
+
+Most hosts default to revalidating every file on every load instead, which
+costs a request per asset each time a new tab opens the site. On Vercel:
+
+```json displayName="vercel.json"
+{
+  "headers": [
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
+  ]
+}
+```
+
+Within a visit, moving between pages loads no assets at all: the site
+navigates client-side, swapping in the next page's content.
+
 ## Tell doc-kit its public URL
 
 Set `baseURL` to where the site will live. Generators that emit absolute
diff --git a/e2e/client-side-navigation.spec.js b/e2e/client-side-navigation.spec.js
new file mode 100644
index 000000000..010129800
--- /dev/null
+++ b/e2e/client-side-navigation.spec.js
@@ -0,0 +1,124 @@
+import { expect, test } from '@playwright/test';
+
+const REMOTE_CONFIG_URL = 'https://nodejs.org/site.json';
+
+/**
+ * Navigates the way following a link does, and waits for the navigation to
+ * finish.
+ */
+const navigate = (page, url) =>
+  page.evaluate(url => navigation.navigate(url).finished.then(() => {}), url);
+
+test.describe('Client-side navigation', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route(REMOTE_CONFIG_URL, route =>
+      route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          websiteBanners: { index: { text: 'Important announcement' } },
+        }),
+      })
+    );
+
+    await page.goto('/assert.html');
+
+    // A full load would start a new document, and lose this
+    await page.evaluate(() => (window.__document = 'first'));
+  });
+
+  test('swaps the next page in without loading assets again', async ({
+    page,
+  }) => {
+    const loaded = await page.evaluate(() =>
+      [
+        ...document.querySelectorAll(
+          'script[src], link[rel="stylesheet"], link[as="font"]'
+        ),
+      ].map(element => element.src || element.href)
+    );
+
+    const requests = [];
+    page.on('request', request => requests.push(request.url()));
+
+    await navigate(page, 'all.html');
+
+    await expect(page).toHaveURL(/\/all\.html$/);
+    await expect(page).toHaveTitle(/^All \|/);
+    await expect(page.locator('meta[property="og:title"]')).toHaveAttribute(
+      'content',
+      /^All \|/
+    );
+    expect(await page.evaluate(() => window.__document)).toBe('first');
+
+    // The scripts, stylesheets and fonts are still loaded
+    expect(requests.filter(url => loaded.includes(url))).toEqual([]);
+  });
+
+  test('goes back to the previous page, where it was scrolled to', async ({
+    page,
+  }) => {
+    await page.evaluate(() => scrollTo(0, 2000));
+    await navigate(page, 'all.html');
+    await page.evaluate(() => navigation.back().finished.then(() => {}));
+
+    // Hosts with clean URLs redirect the first page to one without `.html`
+    await expect(page).toHaveURL(/\/assert(\.html)?$/);
+    await expect(page).toHaveTitle(/^Assert \|/);
+    expect(await page.evaluate(() => scrollY)).toBe(2000);
+    expect(await page.evaluate(() => window.__document)).toBe('first');
+  });
+
+  test('prefetches a page as its link is hovered', async ({ page }) => {
+    await page.evaluate(() =>
+      document
+        .querySelector('main')
+        .insertAdjacentHTML('beforeend', '<a id="all" href="all.html">All</a>')
+    );
+
+    // Hosts with clean URLs answer the prefetch with a redirect first
+    const prefetched = page.waitForResponse(
+      response => /\/all(\.html)?$/.test(response.url()) && response.ok()
+    );
+
+    await page.hover('#all');
+    await prefetched;
+
+    const requests = [];
+    page.on('request', request => requests.push(request.url()));
+
+    await page.click('#all');
+
+    await expect(page).toHaveTitle(/^All \|/);
+    expect(requests).toEqual([]);
+  });
+
+  test('keeps the remote config, and shows its banner at once', async ({
+    page,
+  }) => {
+    const banner = page.getByRole('region', { name: 'Announcement' });
+    await expect(banner).toBeVisible();
+
+    let fetched = 0;
+
+    await page.route(REMOTE_CONFIG_URL, route => {
+      fetched++;
+      return route.fallback();
+    });
+
+    await navigate(page, 'all.html');
+
+    await expect(banner).toBeVisible();
+    // It animates in on the first page only
+    await expect(banner).toHaveCSS('animation-name', 'none');
+    expect(fetched).toBe(0);
+  });
+
+  test('leaves links to files that are not pages to the browser', async ({
+    page,
+  }) => {
+    await page.getByRole('link', { name: 'JSON' }).click();
+
+    await expect(page).toHaveURL(/\/assert\.json$/);
+    expect(await page.evaluate(() => window.__document)).toBeUndefined();
+  });
+});
diff --git a/packages/react/src/html/README.md b/packages/react/src/html/README.md
index 257d45171..cdb7dbc9e 100644
--- a/packages/react/src/html/README.md
+++ b/packages/react/src/html/README.md
@@ -215,10 +215,12 @@ generator's `constants.mjs`), so that the page and the library share one Preact.
 `buildClient` receives `{ entry, virtualImports, config }`. The client `entry`
 is a single program shared by every page. It must be bundled into
 `config.output` and the call must return
-`{ scripts, preloads, stylesheets }`: paths relative to the output root of the
-module scripts to load, the chunks they statically import (rendered as
-`modulepreload` hints), and the stylesheets. The generator renders those into
-every page, resolved against the page's location.
+`{ scripts, preloads, stylesheets, fonts }`: paths relative to the output root
+of the module scripts to load, the chunks they statically import (rendered as
+`modulepreload` hints), the stylesheets, and optionally the fonts to preload.
+The generator renders those into every page, resolved against the page's
+location. Name every file after its content (a hash), so hosts can cache them
+indefinitely (see [Publishing](../../../docs/publishing.md#cache-the-assets)).
 
 `config` is the resolved `html` configuration. The adapter must compile the
 generated Preact JSX and CSS imports and resolve the supplied theme aliases and
@@ -309,9 +311,10 @@ plugins see and can transform every module of the client and server builds but
 never the HTML pages. Customize the pages through the
 [HTML template](#html-template) instead.
 
-The adapter reads the client asset names from Vite's manifest. A manifest is
-written either way; pass `build: { manifest: true }` (or a file name) to
-`createViteBundler` to keep it in the output for another tool.
+The adapter reads the client asset names from Vite's manifest, including the
+hashed names of the fonts to preload. A manifest is written either way; pass
+`build: { manifest: true }` (or a file name) to `createViteBundler` to keep it
+in the output for another tool.
 
 The adapter is only ever used on the main thread, so function-valued plugins
 and hooks are supported. Worker threads receive the `html` configuration with
@@ -488,7 +491,11 @@ The HTML template file (set via `templatePath`) uses JavaScript template literal
 - `dehydrated` {string} Server-rendered HTML for the page content.
 - `assets` {string} The `<script>` and `<link>` tags loading the client
   assets, resolved against this page's location.
-- `speculationRules` {string} Speculation rules JSON for prefetching.
+- `preloads` {string} The preload hints for the fonts the bundler reported.
+- `speculationRules` {string} Speculation rules JSON that prefetches the
+  same-origin links leaving the site when they are hovered or pressed. Links
+  within the site navigate client-side instead (see
+  [Client-side navigation](#client-side-navigation)).
 - `themeScript` {string} Inline script that applies the saved theme before paint.
 - `root` {string} Relative or absolute path to the site root.
 - `metadata` {Object} Full page metadata (frontmatter, path, heading, etc.).
@@ -505,3 +512,38 @@ Since the template supports arbitrary JS expressions, you can use conditionals a
 The populated page is the final HTML: it is minified when `minify` is set and
 written as is. Put `${assets}` in the `<head>`, or the page loads no script and
 no stylesheet.
+
+## Client-side navigation
+
+The site moves between its own pages client-side, through the
+[Navigation API](https://developer.mozilla.org/docs/Web/API/Navigation_API):
+following a link to another page fetches that page and swaps it into the
+current document instead of loading a new one. Scripts, stylesheets and fonts
+stay loaded, the search index and the remote config are fetched once per visit,
+and the sidebar keeps its scroll position. Back and forward, scroll restoration
+and focus behave as they do for full loads, and the old page cross-fades into
+the new one where view transitions are supported.
+
+Pages are prefetched into memory when a link is hovered (unless the browser
+asks to save data) or pressed, so most navigations do not wait on the network.
+
+Everything else is a regular navigation: links outside the site (including
+other versions of the docs), files that are not pages (such as the JSON and
+Markdown renderings), and every navigation in a browser without the Navigation
+API. So is a page that loads scripts or stylesheets the current one did not,
+such as one from a newer deployment.
+
+When customizing the site, keep in mind that:
+
+- The whole `<body>` is replaced, and scripts in it do not run. Of the
+  `<head>`, only the `<title>` and the page-specific tags follow the page:
+  `<meta>` tags, and `<link>` tags other than stylesheets and preloads (such as
+  `canonical`).
+- Islands are unmounted and hydrated again on every page. Anything shared
+  across pages belongs in module scope, which lasts for the whole visit. An
+  island that scrolls keeps its position when the next page renders it too.
+- Once the document has navigated client-side, the `<html>` element has a
+  `data-navigated` attribute, for styles that only belong on the first page,
+  such as entry animations.
+- Analytics can count client-side page views through the Navigation API's
+  `navigatesuccess` event.
diff --git a/packages/react/src/html/__tests__/generate.test.mjs b/packages/react/src/html/__tests__/generate.test.mjs
index cc72980bb..f01ca1437 100644
--- a/packages/react/src/html/__tests__/generate.test.mjs
+++ b/packages/react/src/html/__tests__/generate.test.mjs
@@ -12,6 +12,7 @@ import buildContent from '../../jsx-ast/utils/buildContent.mjs';
 import { buildNotFoundPage } from '../../jsx-ast/utils/synthetic/404.mjs';
 import { generate as chunk } from '../../section-pages/generate.mjs';
 import { compile, createViteBundler } from '../bundlers/vite.mjs';
+import { FONTS } from '../constants.mjs';
 import { generate } from '../generate.mjs';
 
 /**
@@ -105,6 +106,18 @@ describe('web generate', () => {
     assert.match(fsHTML, /on:idle[^>]*data-island-name=SearchBox/);
     // The manifest the asset tags were read from does not ship
     assert.equal((await readdir(output)).includes('.vite'), false);
+
+    // Fonts are hashed like every other asset, and preloaded from where the
+    // bundler actually wrote them
+    const fonts = [...fsHTML.matchAll(/href=\.\.\/(assets\/[^ ]+\.woff2)/g)];
+    const written = await readdir(join(output, 'assets'));
+
+    assert.strictEqual(fonts.length, FONTS.length);
+
+    for (const [, font] of fonts) {
+      assert.match(font, /-[\w-]{8}\.woff2$/);
+      assert.ok(written.includes(font.slice('assets/'.length)), font);
+    }
   });
 
   it('assembles all.html from the module pages, in sidebar order', async context => {
@@ -349,6 +362,9 @@ describe('web generate', () => {
       html,
       /<script type=module crossorigin src=\.\/custom\/index\.js>/
     );
+    assert.match(html, /data-router/);
+    // The adapter reported no fonts, so there are none to preload
+    assert.doesNotMatch(html, /as=font/);
     assert.match(
       html,
       /<link rel=modulepreload crossorigin href=\.\/custom\/shared\.js>/
diff --git a/packages/react/src/html/bundlers/vite.mjs b/packages/react/src/html/bundlers/vite.mjs
index 73e3c0042..7f4231195 100644
--- a/packages/react/src/html/bundlers/vite.mjs
+++ b/packages/react/src/html/bundlers/vite.mjs
@@ -1,5 +1,5 @@
 import { readFile, rm, rmdir } from 'node:fs/promises';
-import { dirname, join, resolve } from 'node:path';
+import { dirname, join, posix, resolve } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 
 import {
@@ -10,7 +10,7 @@ import {
   transformWithOxc,
 } from 'vite';
 
-import { FONT_DIRECTORY, JSX_PRAGMA, JSX_PRAGMA_FRAG } from '../constants.mjs';
+import { FONTS, JSX_PRAGMA, JSX_PRAGMA_FRAG } from '../constants.mjs';
 
 const VIRTUAL_PREFIX = 'virtual:doc-kit/';
 const RESOLVED_VIRTUAL_PREFIX = '\0doc-kit:';
@@ -234,16 +234,10 @@ export const createViteConfig = ({
           ...vite.build?.rolldownOptions?.output,
           format: 'es',
 
-          /**
-           * Determine the asset names for different files
-           */
-          assetFileNames: asset =>
-            asset.names.some(name => name.endsWith('.woff2'))
-              ? // We need to know where the fonts are to preload
-                // them. Using a dynamic hash would make this
-                // difficult.
-                `${FONT_DIRECTORY}/[name][extname]`
-              : 'assets/[name]-[hash][extname]',
+          // Every emitted file, fonts included, is named after its content, so
+          // hosts can cache `assets/` indefinitely. The fonts to preload are
+          // found through the manifest (see `buildClient`).
+          assetFileNames: 'assets/[name]-[hash][extname]',
 
           ...(server
             ? {
@@ -351,6 +345,15 @@ const collectImports = (manifest, chunk, seen = new Set()) => {
   return [...seen].map(key => manifest[key].file);
 };
 
+/**
+ * Whether a manifest entry is one of the fonts to preload. Fonts get a manifest
+ * entry of their own, under the source file they were emitted from.
+ *
+ * @param {{ src: string }} entry
+ * @returns {boolean}
+ */
+const isPreloadedFont = ({ src }) => FONTS.includes(posix.basename(src));
+
 /**
  * Bundles the client entry into the site and reads back, from Vite's
  * manifest, the assets every page has to load.
@@ -411,10 +414,16 @@ export const buildClient = async ({
     .map(({ file }) => file)
     .filter(file => file.endsWith('.css'));
 
+  const fonts = entries
+    .filter(({ src }) => src)
+    .filter(isPreloadedFont)
+    .map(({ file }) => file);
+
   return {
     scripts: [chunk.file],
     preloads: collectImports(manifest, chunk),
     stylesheets: [...new Set(stylesheets)],
+    fonts,
   };
 };
 
diff --git a/packages/react/src/html/constants.mjs b/packages/react/src/html/constants.mjs
index f894e0611..63cc661ad 100644
--- a/packages/react/src/html/constants.mjs
+++ b/packages/react/src/html/constants.mjs
@@ -84,30 +84,11 @@ export const JSX_PRAGMA = '_jsx';
 export const JSX_PRAGMA_FRAG = '_Fragment';
 
 /**
- * Where the bundler emits fonts
- */
-export const FONT_DIRECTORY = 'assets/fonts';
-
-/**
- * Fonts to preload
+ * Fonts to preload, by the name of their source file. The bundler hashes them
+ * like any other asset, so the files it emits are looked up by these names.
  */
 export const FONTS = [
   'open-sans-latin-wght-normal.woff2',
   'open-sans-latin-wght-italic.woff2',
   'ibm-plex-mono-latin-400-normal.woff2',
 ];
-
-/**
- * Specification rules for resource hints like prerendering and prefetching.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API
- */
-export const SPECULATION_RULES = JSON.stringify({
-  // Eagerly prefetch all links that point to the API docs themselves
-  // in a moderate eagerness to improve resource loading
-  prefetch: [{ where: { href_matches: '/*' }, eagerness: 'eager' }],
-  prerender: [
-    // Eagerly prerender Sidebar links for faster navigation
-    // These will be done in a moderate eagerness (hover, likely next navigation)
-    { where: { selector_matches: '[rel~=prefetch]' }, eagerness: 'moderate' },
-  ],
-});
diff --git a/packages/react/src/html/types.d.ts b/packages/react/src/html/types.d.ts
index ff9471e02..5bfb72510 100644
--- a/packages/react/src/html/types.d.ts
+++ b/packages/react/src/html/types.d.ts
@@ -55,6 +55,8 @@ export type ClientAssets = {
   preloads: Array<string>;
   // Stylesheets.
   stylesheets: Array<string>;
+  // Fonts to preload, so text does not wait on the stylesheet to request them.
+  fonts?: Array<string>;
 };
 
 export type ServerBundleOptions = {
diff --git a/packages/react/src/html/ui/__tests__/router.test.mjs b/packages/react/src/html/ui/__tests__/router.test.mjs
new file mode 100644
index 000000000..87ce5bb87
--- /dev/null
+++ b/packages/react/src/html/ui/__tests__/router.test.mjs
@@ -0,0 +1,54 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import { isPage, withoutFragment } from '../router.mjs';
+
+const root = 'https://nodejs.org/docs/latest/api/';
+
+describe('isPage', () => {
+  it('accepts the HTML pages under the site root', () => {
+    for (const page of [
+      'fs.html',
+      'fs/promises.html',
+      'fs.html?view=all#fs_readfile',
+      '',
+    ]) {
+      assert.ok(isPage(new URL(page, root), root), page);
+    }
+  });
+
+  it('accepts extensionless pages, as hosts with clean URLs serve them', () => {
+    assert.ok(isPage(new URL('fs', root), root));
+    assert.ok(isPage(new URL('fs/', root), root));
+  });
+
+  it("rejects the site's other files", () => {
+    for (const file of ['fs.json', 'fs.md', 'orama-db.json', 'llms.txt']) {
+      assert.ok(!isPage(new URL(file, root), root), file);
+    }
+  });
+
+  it('rejects pages outside the site root', () => {
+    for (const page of [
+      'https://nodejs.org/learn/getting-started',
+      'https://nodejs.org/docs/latest-v22.x/api/fs.html',
+      'https://nodejs.org/docs/latest/api',
+      'https://example.com/docs/latest/api/fs.html',
+    ]) {
+      assert.ok(!isPage(new URL(page), root), page);
+    }
+  });
+});
+
+describe('withoutFragment', () => {
+  it('strips the fragment and keeps the query', () => {
+    assert.strictEqual(
+      withoutFragment(`${root}fs.html?view=all#fs_readfile`),
+      `${root}fs.html?view=all`
+    );
+  });
+
+  it('leaves a URL without a fragment unchanged', () => {
+    assert.strictEqual(withoutFragment(`${root}fs.html`), `${root}fs.html`);
+  });
+});
diff --git a/packages/react/src/html/ui/components/SideBar/index.jsx b/packages/react/src/html/ui/components/SideBar/index.jsx
index 8d2c3cbe9..143e3302d 100644
--- a/packages/react/src/html/ui/components/SideBar/index.jsx
+++ b/packages/react/src/html/ui/components/SideBar/index.jsx
@@ -129,7 +129,6 @@ const Sidebar = ({ metadata }) => {
       pathname={`${metadata.basename}.html`}
       groups={buildGroups(metadata)}
       onSelect={redirect}
-      as={props => <a {...props} rel="prefetch" />}
       title="Navigation"
     >
       {/* A site built without a `changelog` has no versions to switch between. */}
diff --git a/packages/react/src/html/ui/constants.mjs b/packages/react/src/html/ui/constants.mjs
new file mode 100644
index 000000000..1c86502bc
--- /dev/null
+++ b/packages/react/src/html/ui/constants.mjs
@@ -0,0 +1,8 @@
+// How long a hovered link waits before its page is prefetched.
+export const ROUTER_HOVER_DELAY = 80;
+
+// How long a fetched page is reused for, whether prefetched or visited.
+export const ROUTER_PAGE_LIFETIME = 5 * 60 * 1000;
+
+// How many fetched pages are kept at once.
+export const ROUTER_MAX_PAGES = 10;
diff --git a/packages/react/src/html/ui/hooks/useOrama.mjs b/packages/react/src/html/ui/hooks/useOrama.mjs
index 4b6f068df..1709a7ef6 100644
--- a/packages/react/src/html/ui/hooks/useOrama.mjs
+++ b/packages/react/src/html/ui/hooks/useOrama.mjs
@@ -1,55 +1,68 @@
 import { create, search, load } from '@orama/orama';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
 
 import { relativeOrAbsolute } from '../utils/relativeOrAbsolute.mjs';
 
 /**
- * Hook for initializing and managing Orama search database.
+ * The search client for this visit, shared across every page navigated to
+ * client-side. The Orama index (several MB) is fetched once on the first
+ * search and reused from then on.
+ *
+ * @type {import('@orama/orama').AnyOrama | null}
+ */
+let client = null;
+
+/**
+ * Returns the shared search client, creating it on the first call.
+ *
+ * @param {string} url - Absolute URL of the search data, resolved once at
+ * creation so the client outlives the page it was first used on.
+ */
+const getClient = url => {
+  if (client) {
+    return client;
+  }
+
+  const db = create({ schema: {} });
+  let loaded;
+
+  // TODO(@avivkeller): Ask Orama to support this functionality natively
+  /** @param {any} options */
+  db.search = async options => {
+    loaded ??= fetch(url)
+      .then(response => response.ok && response.json())
+      .then(data => load(db, data))
+      .catch(() => {
+        loaded = undefined;
+      });
+
+    await loaded;
+
+    return search(db, options);
+  };
+
+  client = db;
+
+  return client;
+};
+
+/**
+ * Hook for initializing and managing the Orama search client.
  * The search data is lazily fetched on the first search call.
  *
  * @param {string} pathname - The current page's path (e.g., '/api/fs')
  */
 export default pathname => {
-  const [client, setClient] = useState(null);
-  const loaded = useRef(null);
+  const [db, setDb] = useState(null);
 
   useEffect(() => {
-    // Reset loaded state when pathname changes
-    loaded.current = null;
-
-    // Create the database instance
-    const db = create({
-      schema: {},
-    });
-
-    /**
-     * Ensures the search data is loaded.
-     * @returns {Promise<void>} A promise that resolves when the data is loaded.
-     */
-    const ensureLoaded = () => {
-      if (!loaded.current) {
-        loaded.current = fetch(relativeOrAbsolute('/orama-db.json', pathname))
-          .then(response => response.ok && response.json())
-          .then(data => load(db, data))
-          .catch(() => {
-            loaded.current = null;
-          });
-      }
-
-      return loaded.current;
-    };
-
-    // TODO(@avivkeller): Ask Orama to support this functionality natively
-    /**
-     * @param {any} options
-     */
-    db.search = async options => {
-      await ensureLoaded();
-      return search(db, options);
-    };
-
-    queueMicrotask(() => setClient(db));
+    const { href } = new URL(
+      relativeOrAbsolute('/orama-db.json', pathname),
+      location.href
+    );
+
+    queueMicrotask(() => setDb(getClient(href)));
   }, [pathname]);
 
-  return client;
+  return db;
 };
diff --git a/packages/react/src/html/ui/hooks/useRemoteConfig.mjs b/packages/react/src/html/ui/hooks/useRemoteConfig.mjs
index 3db52a32d..323fdccf8 100644
--- a/packages/react/src/html/ui/hooks/useRemoteConfig.mjs
+++ b/packages/react/src/html/ui/hooks/useRemoteConfig.mjs
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 import { remoteConfigUrl } from '#theme/config';
 
@@ -16,32 +16,57 @@ import { remoteConfigUrl } from '#theme/config';
  * list so that docs built for an older release still list current releases.
  */
 
+/**
+ * The remote config fetched for this visit, shared by every island that reads
+ * it. Islands hydrate as separate roots, so no context provider could span
+ * them; module scope is the shared store.
+ *
+ * @type {Promise<RemoteConfig | undefined> | undefined}
+ */
+let remoteConfig;
+
+/**
+ * Fetches the remote config, unless it is already loaded or on its way.
+ *
+ * @returns {Promise<RemoteConfig | null>}
+ */
+const loadRemoteConfig = () => {
+  remoteConfig ??= fetch(remoteConfigUrl)
+    .then(response => response.json())
+    .catch(() => {
+      // Not kept, so that the next island to mount tries again
+      remoteConfig = undefined;
+    });
+
+  return remoteConfig;
+};
+
 /**
  * Fetches the remote site configuration once the component mounts.
  *
- * @returns {RemoteConfig | null} `null` until loaded, or when there is no
- * `remoteConfigUrl` or the fetch fails.
+ * @returns {RemoteConfig | undefined} `undefined` until loaded, or when there
+ * is no `remoteConfigUrl` or the fetch fails.
  */
 export default () => {
   const [config, setConfig] = useState(
-    /** @type {RemoteConfig | null} */ (null)
+    /** @type {RemoteConfig | undefined} */ (undefined)
   );
 
-  useEffect(() => {
+  // A layout effect, so that a page navigated to client-side renders with a
+  // config loaded earlier before it is painted, and its banner does not push
+  // the page down a frame later
+  useLayoutEffect(() => {
     if (!remoteConfigUrl) {
       return;
     }
 
     let mounted = true;
 
-    fetch(remoteConfigUrl)
-      .then(response => response.json())
-      .then(loaded => {
-        if (mounted) {
-          setConfig(loaded);
-        }
-      })
-      .catch(() => {});
+    loadRemoteConfig().then(loaded => {
+      if (mounted) {
+        setConfig(loaded);
+      }
+    });
 
     return () => {
       mounted = false;
diff --git a/packages/react/src/html/ui/index.css b/packages/react/src/html/ui/index.css
index 6653b39ec..7e2b07faa 100644
--- a/packages/react/src/html/ui/index.css
+++ b/packages/react/src/html/ui/index.css
@@ -56,6 +56,12 @@ island-slot {
   display: contents;
 }
 
+/* The banner slides in once, as the site loads, rather than again with every
+   page navigated to client-side (see `router.mjs`) */
+[data-navigated] is-land[data-island-name='Banner'] > * {
+  animation: none;
+}
+
 /* TODO(@avivkeller): make this component's CSS more agnostic */
 is-land[data-island-name='SideBar'] {
   display: flex;
diff --git a/packages/react/src/html/ui/islands/runtime.mjs b/packages/react/src/html/ui/islands/runtime.mjs
index a90aea5f3..6a4c055e1 100644
--- a/packages/react/src/html/ui/islands/runtime.mjs
+++ b/packages/react/src/html/ui/islands/runtime.mjs
@@ -1,8 +1,26 @@
 import { Island } from '@11ty/is-land';
-import { h, hydrate } from 'preact';
+import { h, hydrate, render } from 'preact';
 
 import loaders from './loaders.mjs';
 
+/**
+ * The islands hydrated so far. Exported so the router can save their scroll
+ * positions before a navigation discards them, without querying the document.
+ *
+ * @type {Set<HTMLElement>}
+ */
+export const hydrated = new Set();
+
+/**
+ * The components loaded so far, by island name. Even an `import()` of a module
+ * that has already loaded settles a task later, and so after the page has been
+ * painted: a page navigated to client-side would show its islands before they
+ * hydrate (the banner would pop in). Loaded components hydrate right away.
+ *
+ * @type {Map<string, import('preact').ComponentType>}
+ */
+const loaded = new Map();
+
 /**
  * Adds the generator's component map to the registry.
  *
@@ -10,6 +28,23 @@ import loaders from './loaders.mjs';
  */
 export const registerIslands = components => Object.assign(loaders, components);
 
+/**
+ * Unmounts the hydrated islands inside `root`. Detaching their markup is not
+ * enough: the components' effects would never be cleaned up, and the global
+ * listeners they registered (the search box's `⌘ K`, the theme toggle's media
+ * query) would pile up with every page navigated through.
+ *
+ * @param {Node} root
+ */
+export const unmountIslands = root => {
+  for (const island of hydrated) {
+    if (root.contains(island)) {
+      render(null, island);
+      hydrated.delete(island);
+    }
+  }
+};
+
 /**
  * Re-renders an island's server-rendered children as the markup they already
  * are. Preact keeps the existing DOM because the HTML is identical, so nothing
@@ -52,9 +87,17 @@ Island.addInitType('preact', async island => {
   }
 
   try {
-    const { default: Component } = await loader();
+    if (!loaded.has(name)) {
+      loaded.set(name, (await loader()).default);
+    }
+
+    // A client-side navigation can replace the page while its component loads
+    if (!island.isConnected) {
+      return;
+    }
 
-    hydrate(h(Component, props), island);
+    hydrate(h(loaded.get(name), props), island);
+    hydrated.add(island);
   } catch (error) {
     // is-land awaits this callback, so a rejection would leave the island
     // silently stuck: never marked ready, and never reported anywhere.
diff --git a/packages/react/src/html/ui/page.mjs b/packages/react/src/html/ui/page.mjs
new file mode 100644
index 000000000..3c3428cad
--- /dev/null
+++ b/packages/react/src/html/ui/page.mjs
@@ -0,0 +1,144 @@
+/**
+ * DOM utilities for client-side page swaps: fetching, parsing, and replacing
+ * the document body and page-specific head elements.
+ */
+
+/**
+ * @typedef {{ url: string, html: string }} Page A fetched page: its final
+ * URL, after redirects, and its markup.
+ */
+
+// The `<head>` elements that belong to the page rather than to the site, and
+// are replaced with it: `<meta>` tags (`og:title`) and the links that are not
+// resources (`canonical`). Scripts and stylesheets run and apply once.
+const PAGE_HEAD =
+  ':scope > meta, :scope > link:not([rel~="stylesheet"], [rel~="preload"], [rel~="modulepreload"])';
+
+/**
+ * Fetches a page, returning its final URL and HTML, or `null` on failure or a
+ * non-HTML response.
+ *
+ * @param {string} url
+ * @returns {Promise<Page | null>}
+ */
+export const fetchPage = url =>
+  fetch(url, { priority: 'low', headers: { Accept: 'text/html' } })
+    .then(async response =>
+      response.ok &&
+      response.headers.get('content-type')?.startsWith('text/html')
+        ? { url: response.url, html: await response.text() }
+        : null
+    )
+    .catch(() => null);
+
+/**
+ * Keys an iterable of islands by name and occurrence, so that the same island
+ * is found again on the next page.
+ *
+ * @param {Iterable<HTMLElement>} source
+ * @returns {Map<string, HTMLElement>}
+ */
+export const keyIslands = source => {
+  const counts = new Map();
+
+  return new Map(
+    [...source].map(island => {
+      const name = island.getAttribute('data-island-name');
+      counts.set(name, (counts.get(name) ?? 0) + 1);
+
+      return [`${name}:${counts.get(name)}`, island];
+    })
+  );
+};
+
+/**
+ * Replaces the page-specific `<head>` elements with the next page's, leaving
+ * the ones both pages share in place.
+ *
+ * @param {Document} doc - The next page
+ */
+const updateHead = doc => {
+  document.title = doc.title;
+
+  const next = new Map(
+    [...doc.head.querySelectorAll(PAGE_HEAD)].map(element => [
+      element.outerHTML,
+      element,
+    ])
+  );
+
+  for (const element of document.head.querySelectorAll(PAGE_HEAD)) {
+    // What is left in `next` afterwards is what the current page lacks
+    if (!next.delete(element.outerHTML)) {
+      element.remove();
+    }
+  }
+
+  document.head.append(...next.values());
+};
+
+/**
+ * Runs a DOM update, keeping the call-site uniform for a future transition.
+ *
+ * @param {() => void} update
+ */
+export const transition = update => update();
+
+/**
+ * Parses a fetched page and checks that its assets match this build.
+ * Returns `null` when the page belongs to a different build (e.g. after a
+ * new deploy) and only a full load can show it.
+ *
+ * @param {Page} page
+ * @param {Set<string>} assets - Absolute hrefs of this build's scripts and stylesheets
+ * @returns {Document | null}
+ */
+export const parsePage = ({ url, html }, assets) => {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const tag = doc.querySelector('script[data-router]');
+
+  if (!tag) {
+    return null;
+  }
+
+  /** @type {{ root: string, assets: Array<string> }} */
+  const pageConfig = JSON.parse(tag.textContent);
+
+  return pageConfig.assets
+    .map(href => new URL(href, url).href)
+    .every(href => assets.has(href))
+    ? doc
+    : null;
+};
+
+/**
+ * Swaps the current page for another, preserving island scroll positions.
+ *
+ * @param {Document} doc - The next page
+ * @param {() => void} scroll - Scrolls to where the navigation leads
+ * @param {(root: Node) => void} unmount - Unmounts islands before the swap
+ * @param {Set<HTMLElement>} islands - The hydrated islands to save scroll for
+ */
+export const showPage = (doc, scroll, unmount, islands) => {
+  const scrolled = [...keyIslands(islands)]
+    .filter(([, island]) => island.scrollTop || island.scrollLeft)
+    .map(([key, { scrollLeft, scrollTop }]) => [key, scrollLeft, scrollTop]);
+
+  unmount(document.body);
+  updateHead(doc);
+  document.body.replaceWith(doc.body);
+
+  // Styles can then keep what animates in as the site loads (the banner)
+  // from animating again with every page
+  document.documentElement.setAttribute('data-navigated', '');
+
+  const next = keyIslands(
+    document.body.querySelectorAll('is-land[data-island-name]')
+  );
+
+  for (const [key, left, top] of scrolled) {
+    next.get(key)?.scrollTo({ left, top, behavior: 'instant' });
+  }
+
+  scroll();
+};
diff --git a/packages/react/src/html/ui/router.mjs b/packages/react/src/html/ui/router.mjs
new file mode 100644
index 000000000..15e57b63f
--- /dev/null
+++ b/packages/react/src/html/ui/router.mjs
@@ -0,0 +1,226 @@
+/**
+ * Client-side navigation between the pages of the site, on top of the
+ * Navigation API.
+ *
+ * Following a link to another page fetches that page and swaps it into the
+ * current document instead of loading a new one: the scripts, stylesheets and
+ * fonts stay loaded, the data shared by every page (the search index, the
+ * remote config) stays in memory, and the sidebar keeps its scroll position.
+ * The Navigation API supplies everything else a real navigation does: history
+ * entries, back and forward, scroll restoration, focus reset, the browser's
+ * loading indicator, and aborting a navigation another one supersedes.
+ *
+ * Pages are prefetched into memory when a link is hovered or pressed, so most
+ * navigations never wait on the network.
+ *
+ * Everything else is left to the browser: links to other sites, to other
+ * builds (another version of the docs), to files that are not pages, and every
+ * navigation in a browser without the Navigation API.
+ */
+
+import {
+  ROUTER_HOVER_DELAY,
+  ROUTER_MAX_PAGES,
+  ROUTER_PAGE_LIFETIME,
+} from './constants.mjs';
+import { fetchPage, parsePage, showPage, transition } from './page.mjs';
+
+/**
+ * Whether a URL is a page of the site under `root`: an HTML file, or an
+ * extensionless path (hosts may serve pages without their `.html`), and not
+ * one of the site's other files (JSON, Markdown, the search index).
+ *
+ * @param {URL} url
+ * @param {string} root - The site's root URL, ending in `/`
+ */
+export const isPage = (url, root) =>
+  url.href.startsWith(root) && /(\.html|\/[^./]*)$/.test(url.pathname);
+
+/**
+ * A URL without its fragment: the address of the page it points into.
+ *
+ * @param {string} href
+ */
+export const withoutFragment = href => href.split('#')[0];
+
+/**
+ * Whether a link element is one the router can follow: an anchor that does
+ * not trigger a download and does not open in another browsing context.
+ *
+ * @param {Element | null} link
+ * @returns {link is HTMLAnchorElement}
+ */
+export const shouldFollowLink = link =>
+  link instanceof HTMLAnchorElement &&
+  !link.hasAttribute('download') &&
+  (!link.target || link.target === '_self');
+
+/**
+ * Whether a navigation event should be intercepted by the router.
+ *
+ * @param {NavigateEvent} event
+ * @param {URL} url
+ * @param {string} root
+ */
+const shouldIntercept = (event, url, root) =>
+  event.canIntercept &&
+  !event.hashChange &&
+  event.downloadRequest === null &&
+  !event.formData &&
+  event.navigationType !== 'reload' &&
+  isPage(url, root);
+
+/**
+ * Starts handling navigations between the pages of the site, unless the
+ * browser lacks the Navigation API or the page does not carry router data
+ * (see `buildAssetTags`).
+ *
+ * @param {object} options
+ * @param {(root: Node) => void} options.unmount - Unmounts the components
+ * rendered inside the part of the document that is about to be discarded.
+ * @param {Set<HTMLElement>} options.islands - The runtime's set of hydrated
+ * islands; used to save scroll positions before the body is replaced.
+ */
+export const startRouter = ({ unmount, islands }) => {
+  const tag = document.querySelector('script[data-router]');
+
+  if (!('navigation' in window) || !tag) {
+    return;
+  }
+
+  /** @type {{ root: string, assets: Array<string> }} */
+  const config = JSON.parse(tag.textContent);
+  const root = new URL(config.root, location.href).href;
+  const assets = new Set(
+    config.assets.map(href => new URL(href, location.href).href)
+  );
+
+  /** @type {Map<string, { page: Promise<import('./page.mjs').Page | null>, expires: number }>} */
+  const pages = new Map();
+
+  /**
+   * Fetches a page, or reuses the copy fetched moments ago.
+   *
+   * @param {string} url - The page's URL, without a fragment
+   * @returns {Promise<import('./page.mjs').Page | null>} `null` when the
+   * response is not a page to show: an error, or anything but HTML.
+   */
+  const loadPage = url => {
+    const cached = pages.get(url);
+
+    if (cached && cached.expires > Date.now()) {
+      return cached.page;
+    }
+
+    const page = fetchPage(url);
+
+    pages.delete(url);
+    pages.set(url, { page, expires: Date.now() + ROUTER_PAGE_LIFETIME });
+
+    if (pages.size > ROUTER_MAX_PAGES) {
+      pages.delete(pages.keys().next().value);
+    }
+
+    // A failure is not kept, so the next attempt fetches again
+    page.then(result => {
+      if (!result && pages.get(url)?.page === page) {
+        pages.delete(url);
+      }
+    });
+
+    return page;
+  };
+
+  /**
+   * The page a link leads to, when following it would be handled here.
+   *
+   * @param {EventTarget | null} target - The link, or an element inside it
+   * @returns {string | undefined} The page's URL, without a fragment
+   */
+  const getLinkedPage = target => {
+    const link = target instanceof Element ? target.closest('a[href]') : null;
+
+    if (!shouldFollowLink(link)) {
+      return;
+    }
+
+    const url = withoutFragment(link.href);
+
+    // Links within the current page have nothing to fetch
+    if (isPage(new URL(url), root) && url !== withoutFragment(location.href)) {
+      return url;
+    }
+  };
+
+  navigation.addEventListener('navigate', event => {
+    const url = new URL(event.destination.url);
+
+    if (!shouldIntercept(event, url, root)) {
+      return;
+    }
+
+    event.intercept({
+      // Scrolling waits for the page to be swapped in (see `showPage` in page.mjs)
+      scroll: 'manual',
+
+      /**
+       * Swaps in the page the navigation leads to.
+       */
+      async handler() {
+        const page = await loadPage(withoutFragment(url.href));
+
+        if (event.signal.aborted) {
+          return;
+        }
+
+        const doc = page && parsePage(page, assets);
+
+        if (!doc) {
+          // The navigation has already moved to the page's URL, so reloading
+          // is a full load of that page
+          location.reload();
+
+          return;
+        }
+
+        transition(() => showPage(doc, () => event.scroll(), unmount, islands));
+      },
+    });
+  });
+
+  let hovered;
+
+  document.addEventListener(
+    'pointerover',
+    ({ pointerType, target }) => {
+      clearTimeout(hovered);
+
+      const url =
+        pointerType === 'mouse' &&
+        !navigator.connection?.saveData &&
+        getLinkedPage(target);
+
+      if (url) {
+        hovered = setTimeout(loadPage, ROUTER_HOVER_DELAY, url);
+      }
+    },
+    { passive: true }
+  );
+
+  document.addEventListener('pointerout', () => clearTimeout(hovered), {
+    passive: true,
+  });
+
+  // Pressing a link is as good as following it: fetch right away
+  document.addEventListener(
+    'pointerdown',
+    ({ target }) => {
+      const url = getLinkedPage(target);
+
+      if (url) {
+        loadPage(url);
+      }
+    },
+    { passive: true }
+  );
+};
diff --git a/packages/react/src/html/utils/__tests__/processing.test.mjs b/packages/react/src/html/utils/__tests__/processing.test.mjs
index e3080def0..bf050f133 100644
--- a/packages/react/src/html/utils/__tests__/processing.test.mjs
+++ b/packages/react/src/html/utils/__tests__/processing.test.mjs
@@ -6,11 +6,11 @@ import {
   setConfig,
 } from '@doc-kit/core/utils/configuration/index.mjs';
 
-import { FONTS } from '../../constants.mjs';
 import {
   buildAssetTags,
   buildPreloads,
   buildHead,
+  buildSpeculationRules,
   pageFileName,
   populateWithEvaluation,
   resolvePageRoot,
@@ -116,33 +116,85 @@ describe('resolvePageRoot', () => {
 });
 
 describe('buildPreloads', () => {
-  it('resolves every shipped font against the page root', () => {
-    const result = buildPreloads('../');
+  const fonts = [
+    'assets/open-sans-latin-wght-normal-abc.woff2',
+    'assets/ibm-plex-mono-latin-400-normal-def.woff2',
+  ];
 
-    // A hint per shipped face, or the unlisted ones load late after all.
-    assert.strictEqual(result.match(/rel="preload"/g).length, FONTS.length);
+  it('resolves every font against the page root', () => {
+    const result = buildPreloads(fonts, '../');
 
-    for (const font of FONTS) {
-      assert.ok(result.includes(`href="../assets/fonts/${font}"`));
+    // A hint per font, or the unlisted ones load late after all.
+    assert.strictEqual(result.match(/rel="preload"/g).length, fonts.length);
+
+    for (const font of fonts) {
+      assert.ok(result.includes(`href="../${font}"`));
     }
   });
 
   it('keeps an absolute root absolute', () => {
-    const result = buildPreloads('https://nodejs.org/docs/');
+    const result = buildPreloads(fonts, 'https://nodejs.org/docs/');
 
-    assert.ok(
-      result.includes(`href="https://nodejs.org/docs/assets/fonts/${FONTS[0]}"`)
-    );
+    assert.ok(result.includes(`href="https://nodejs.org/docs/${fonts[0]}"`));
   });
 
   it('renders crossorigin valueless, since fonts are fetched in CORS mode', () => {
     // Without it the stylesheet re-fetches the font instead of reusing it.
-    const hints = buildPreloads('./').split('\n');
+    const hints = buildPreloads(fonts, './').split('\n');
 
     for (const hint of hints) {
       assert.match(hint, /as="font" type="font\/woff2" crossorigin \/>$/);
     }
   });
+
+  it('renders nothing without fonts', () => {
+    assert.strictEqual(buildPreloads([], './'), '');
+  });
+});
+
+describe('buildSpeculationRules', () => {
+  /**
+   * The pattern a page's rules exclude from prefetching, resolved as the
+   * browser resolves it: against the page's own URL.
+   */
+  const excluded = (root, page) => {
+    const [{ where }] = JSON.parse(buildSpeculationRules(root)).prefetch;
+    const [, { not }] = where.and;
+
+    return new URLPattern(not.href_matches, page);
+  };
+
+  it('prefetches same-origin links on hover or press', () => {
+    const [rule] = JSON.parse(buildSpeculationRules('./')).prefetch;
+
+    assert.deepStrictEqual(rule.where.and[0], { href_matches: '/*' });
+    assert.strictEqual(rule.eagerness, 'moderate');
+  });
+
+  it("leaves the site's own pages to the client-side router", () => {
+    for (const [root, page] of [
+      ['./', 'https://nodejs.org/docs/latest/api/fs.html'],
+      ['../', 'https://nodejs.org/docs/latest/api/fs/promises.html'],
+      ['../../', 'https://nodejs.org/docs/latest/api/fs/promises/open.html'],
+    ]) {
+      const site = excluded(root, page);
+
+      assert.ok(site.test('https://nodejs.org/docs/latest/api/fs.html'), root);
+      assert.ok(site.test('https://nodejs.org/docs/latest/api/fs/x.html#y'));
+      assert.ok(!site.test('https://nodejs.org/learn/getting-started'), root);
+      assert.ok(!site.test('https://nodejs.org/docs/latest-v22.x/api/fs.html'));
+    }
+  });
+
+  it('keeps an absolute root absolute', () => {
+    const site = excluded(
+      'https://nodejs.org/docs/',
+      'https://nodejs.org/docs/fs.html'
+    );
+
+    assert.ok(site.test('https://nodejs.org/docs/fs.html'));
+    assert.ok(!site.test('https://nodejs.org/learn/'));
+  });
 });
 
 describe('buildHead', () => {
@@ -206,12 +258,13 @@ describe('buildAssetTags', () => {
     stylesheets: ['assets/style-ghi.css'],
   };
 
-  it('resolves every asset against the page root, scripts first', () => {
+  it('resolves every asset against the page root, router data tag first', () => {
     const tags = buildAssetTags(assets, '../').split('\n');
 
     assert.deepStrictEqual(
       tags.map(tag => tag.trim()),
       [
+        `<script type="application/json" data-router>${JSON.stringify({ root: '../', assets: ['../assets/client-abc.js', '../assets/style-ghi.css'] })}</script>`,
         '<script type="module" crossorigin src="../assets/client-abc.js"></script>',
         '<link rel="modulepreload" crossorigin href="../assets/shared-def.js" />',
         '<link rel="stylesheet" crossorigin href="../assets/style-ghi.css" />',
@@ -227,10 +280,10 @@ describe('buildAssetTags', () => {
     );
   });
 
-  it('renders nothing for an empty asset list', () => {
+  it('renders only the router tag for an empty asset list', () => {
     assert.strictEqual(
       buildAssetTags({ scripts: [], preloads: [], stylesheets: [] }, './'),
-      ''
+      '<script type="application/json" data-router>{"root":"./","assets":[]}</script>'
     );
   });
 });
diff --git a/packages/react/src/html/utils/generate.mjs b/packages/react/src/html/utils/generate.mjs
index da6876d40..c8b0def57 100644
--- a/packages/react/src/html/utils/generate.mjs
+++ b/packages/react/src/html/utils/generate.mjs
@@ -158,17 +158,27 @@ export default () => {
     ),
 
     createImportDeclaration(
-      'registerIslands',
+      'registerIslands, unmountIslands, hydrated',
       resolve(ROOT, './ui/islands/runtime.mjs'),
       false
     ),
 
+    createImportDeclaration(
+      'startRouter',
+      resolve(ROOT, './ui/router.mjs'),
+      false
+    ),
+
     `registerIslands({${componentImports
       .map(
         ({ name, source }) =>
           `${JSON.stringify(name)}: () => import(${JSON.stringify(source)})`
       )
       .join(', ')}});`,
+
+    // Navigations between pages swap the page in place, so the islands of the
+    // page being left have to be unmounted rather than simply dropped
+    'startRouter({ unmount: unmountIslands, islands: hydrated });',
   ].join('\n');
 
   return { buildLibraryProgram, buildPageProgram, clientProgram };
diff --git a/packages/react/src/html/utils/processing.mjs b/packages/react/src/html/utils/processing.mjs
index 9d344e59e..fe00c81d0 100644
--- a/packages/react/src/html/utils/processing.mjs
+++ b/packages/react/src/html/utils/processing.mjs
@@ -1,7 +1,6 @@
 import getConfig from '@doc-kit/core/utils/configuration/index.mjs';
 import { populate } from '@doc-kit/core/utils/configuration/templates.mjs';
 
-import { FONT_DIRECTORY, FONTS, SPECULATION_RULES } from '../constants.mjs';
 import { THEME_SCRIPT } from '../ui/theme-script.mjs';
 import createConfigSource from './config.mjs';
 import { relativeOrAbsolute } from './relativeOrAbsolute.mjs';
@@ -85,18 +84,63 @@ const renderTag = (tag, attrs) => {
 };
 
 /**
- * Renders the preload hints for a page
+ * The attributes of a font's preload hint. `crossorigin` is required: fonts
+ * are fetched in CORS mode, so without it the stylesheet fetches the font again
+ * instead of reusing the preloaded one.
+ *
+ * @param {string} href - The font's URL
+ * @returns {Record<string, string | boolean>}
  */
-export const buildPreloads = root =>
-  FONTS.map(font =>
-    renderTag('link', {
-      rel: 'preload',
-      href: `${root}${FONT_DIRECTORY}/${font}`,
-      as: 'font',
-      type: 'font/woff2',
-      crossorigin: true,
-    })
-  ).join('\n  ');
+const createFontPreload = href => ({
+  rel: 'preload',
+  href,
+  as: 'font',
+  type: 'font/woff2',
+  crossorigin: true,
+});
+
+/**
+ * Renders the preload hints for a page's fonts.
+ *
+ * @param {Array<string>} fonts - Output-relative font paths
+ * @param {string} root - The page's root (see {@link resolvePageRoot})
+ * @returns {string}
+ */
+export const buildPreloads = (fonts, root) =>
+  fonts
+    .map(font => renderTag('link', createFontPreload(`${root}${font}`)))
+    .join('\n  ');
+
+/**
+ * Renders a page's speculation rules.
+ *
+ * Navigations between the site's own pages happen client-side (see
+ * `ui/router.mjs`), which prefetches those pages itself: a document the
+ * browser speculatively fetches can only serve a full navigation, so prefetching
+ * them here would download each twice. What is left are the links that leave
+ * the site for other pages on its origin (the rest of nodejs.org, for docs
+ * served under nodejs.org/docs): those are prefetched when hovered or pressed.
+ *
+ * @param {string} root - The page's root (see {@link resolvePageRoot})
+ * @returns {string} The rules, as JSON
+ */
+export const buildSpeculationRules = root => {
+  // Patterns resolve against the page, but a wildcard after a `/` takes that
+  // slash as its prefix and leaves the dot segment before it unresolved (`../*`
+  // matches nothing), while `..*` resolves to the directory, as intended.
+  const site = root.startsWith('.') ? `${root.slice(0, -1)}*` : `${root}*`;
+
+  return JSON.stringify({
+    prefetch: [
+      {
+        where: {
+          and: [{ href_matches: '/*' }, { not: { href_matches: site } }],
+        },
+        eagerness: 'moderate',
+      },
+    ],
+  });
+};
 
 /**
  * Builds the configurable `<head>` markup shared by every page from the
@@ -119,12 +163,22 @@ export const buildHead = ({ meta = [], links = [], html = [] }) =>
  * statically import as preload hints (as the bundler would inject them), and
  * the stylesheets as links.
  *
+ * Also emits a `<script type="application/json" data-router>` tag carrying the
+ * root and asset URLs so the client-side router can read them without querying
+ * the DOM for script attributes or re-discovering loaded scripts and stylesheets.
+ *
  * @param {import('../types').ClientAssets} assets - Output-relative asset paths
  * @param {string} root - The page's root (see {@link resolvePageRoot})
  * @returns {string}
  */
 export const buildAssetTags = ({ scripts, preloads, stylesheets }, root) =>
   [
+    [
+      `<script type="application/json" data-router>${JSON.stringify({
+        root,
+        assets: [...scripts, ...stylesheets].map(file => `${root}${file}`),
+      })}</script>`,
+    ],
     scripts.map(
       file => `<script type="module" crossorigin src="${root}${file}"></script>`
     ),
@@ -180,9 +234,9 @@ export const populatePage = ({ template, data, dehydrated, assets }) => {
     ),
     dehydrated,
     assets: buildAssetTags(assets, root),
-    speculationRules: SPECULATION_RULES,
+    speculationRules: buildSpeculationRules(root),
     themeScript: THEME_SCRIPT,
-    preloads: buildPreloads(root),
+    preloads: buildPreloads(assets.fonts ?? [], root),
     root,
     metadata: data,
     config,
diff --git a/vercel.json b/vercel.json
index bd6fd8faa..deda36bcc 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,3 +1,14 @@
 {
-  "cleanUrls": true
+  "cleanUrls": true,
+  "headers": [
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
+  ]
 }