fix(html): follow the host's redirect to clean URLs

Assisted-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: ovflowd

e2e/client-side-navigation.spec.js

@@ -3,11 +3,21 @@ 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.
+ * Navigates the way following a link does, and waits for the page to show.
+ * On hosts with clean URLs, the navigation that shows it follows the redirect.
  */
 const navigate = (page, url) =>
-  page.evaluate(url => navigation.navigate(url).finished.then(() => {}), url);
+  page.evaluate(
+    url =>
+      new Promise(resolve => {
+        navigation.addEventListener('navigatesuccess', () => resolve(), {
+          once: true,
+        });
+
+        navigation.navigate(url);
+      }),
+    url
+  );
 
 test.describe('Client-side navigation', () => {
   test.beforeEach(async ({ page }) => {
@@ -42,7 +52,8 @@ test.describe('Client-side navigation', () => {
 
     await navigate(page, 'all.html');
 
-    await expect(page).toHaveURL(/\/all\.html$/);
+    // `serve` redirects `all.html` to `all`, as hosts with clean URLs do
+    await expect(page).toHaveURL(/\/all$/);
     await expect(page).toHaveTitle(/^All \|/);
     await expect(page.locator('meta[property="og:title"]')).toHaveAttribute(
       'content',

packages/react/src/html/ui/router.mjs

@@ -113,19 +113,26 @@ export const startRouter = ({ unmount, islands }) => {
     }
 
     const page = fetchPage(url);
+    const entry = { page, expires: Date.now() + ROUTER_PAGE_LIFETIME };
 
     pages.delete(url);
-    pages.set(url, { page, expires: Date.now() + ROUTER_PAGE_LIFETIME });
+    pages.set(url, entry);
 
-    if (pages.size > ROUTER_MAX_PAGES) {
+    // Redirected pages take two entries (below)
+    while (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 => {
+      // A failure is not kept, so the next attempt fetches again
       if (!result && pages.get(url)?.page === page) {
         pages.delete(url);
       }
+
+      // Following the redirect (see the handler) then needs no second fetch
+      if (result && result.url !== url) {
+        pages.set(result.url, entry);
+      }
     });
 
     return page;
@@ -167,12 +174,21 @@ export const startRouter = ({ unmount, islands }) => {
        * Swaps in the page the navigation leads to.
        */
       async handler() {
-        const page = await loadPage(withoutFragment(url.href));
+        const href = withoutFragment(url.href);
+        const page = await loadPage(href);
 
         if (event.signal.aborted) {
           return;
         }
 
+        // Hosts with clean URLs redirect `fs.html` to `fs`: follow the redirect
+        // as a full load would, replacing this navigation's history entry
+        if (page && page.url !== href) {
+          navigation.navigate(page.url + url.hash, { history: 'replace' });
+
+          return;
+        }
+
         const doc = page && parsePage(page, assets);
 
         if (!doc) {