@uniflowed/router 0.0.0-alpha.37 → 0.0.0-alpha.39

package/action.js

@@ -111,6 +111,7 @@ import {
   decodeActionResult,
   encodeActionArguments,
 } from "./internal/action-wire.js";
+import { clearNavigationCache } from "./internal/navigation-cache.js";
 
 export type { ActionArgument, ActionValue } from "./internal/action-wire.js";
 export {
@@ -264,6 +265,11 @@ export function createServerReference(id: string, name: string): ServerActionFun
       headers,
       body,
     });
+    // A route a navigation kept may no longer show what this action wrote, and
+    // which routes is the server's to know, so every kept route is asked for
+    // again. Whatever the status: an action that failed part-way may have
+    // written before it failed. See `./internal/navigation-cache.js`.
+    clearNavigationCache();
     if (!response.ok) {
       throw new ServerActionError(name, response.status);
     }

package/client.js

@@ -109,6 +109,7 @@ import {
   installNavigation,
   installRoutes,
   installRouting,
+  installStaleTime,
   matchRoute,
   resolveFailure,
   resolveMatch,
@@ -135,6 +136,7 @@ export async function hydrate(options: {|
   readonly navigation?: Navigation,
   readonly basePath?: string,
   readonly trailingSlash?: TrailingSlash,
+  readonly staleTime?: number,
 |}): Promise<void> {
   const table: RouteTable = {
     routes: options.routes,
@@ -148,6 +150,7 @@ export async function hydrate(options: {|
   // means: the default is the behaviour, not the absence of one.
   installNavigation(options.navigation ?? "client");
   installRouting({ basePath: options.basePath, trailingSlash: options.trailingSlash });
+  installStaleTime(options.staleTime ?? 0);
   // The route table has no base path in it, and the address bar does.
   const applicationPath = applicationPathOf(window.location.pathname) ?? window.location.pathname;
 
@@ -270,6 +273,7 @@ export async function render(options: {|
   readonly navigation?: Navigation,
   readonly basePath?: string,
   readonly trailingSlash?: TrailingSlash,
+  readonly staleTime?: number,
 |}): Promise<void> {
   const table: RouteTable = {
     routes: options.routes,
@@ -279,6 +283,7 @@ export async function render(options: {|
   installRoutes(table);
   installNavigation(options.navigation ?? "client");
   installRouting({ basePath: options.basePath, trailingSlash: options.trailingSlash });
+  installStaleTime(options.staleTime ?? 0);
 
   const url =
     (applicationPathOf(window.location.pathname) ?? window.location.pathname) +

package/internal/compose.js

@@ -412,6 +412,11 @@ component SlotView(slot: ResolvedSlot, pathname: string, searchParams: SearchPar
   const at = slot.intercepted?.pathname ?? pathname;
   const query = slot.intercepted?.searchParams ?? searchParams;
   const Page = pageComponent(page);
+  // The slot module's own export, looked up by slot: `pageComponent` hands back
+  // its `default` or `Page` as it is, so this is the same component on every
+  // render of the same slot. The React Compiler cannot see through the lookup
+  // and reports a component created during render.
+  // uf-lint-disable-next-line react-compiler/static-components
   let element: React.Node = <Page params={slot.params} searchParams={query} data={undefined} />;
   const templateContext = {
     pathname: at,
@@ -425,6 +430,10 @@ component SlotView(slot: ResolvedSlot, pathname: string, searchParams: SearchPar
         continue;
       }
       const Fallback = loadingComponent(boundary.module);
+      // The same lookup as `Page` above: `loadingComponent` hands back the
+      // boundary module's own export as it is, so this is the same component
+      // on every render of that boundary.
+      // uf-lint-disable-next-line react-compiler/static-components
       element = <Suspense fallback={<Fallback />}>{element}</Suspense>;
     }
     const errorBoundary = slot.errorBoundary;
@@ -439,6 +448,9 @@ component SlotView(slot: ResolvedSlot, pathname: string, searchParams: SearchPar
     if (depth > 0) {
       const Layout = layoutComponent(slot.layouts[depth - 1]);
       element = (
+        // The layout module's own export, looked up by depth, for the same
+        // reason as `Page` above.
+        // uf-lint-disable-next-line react-compiler/static-components
         <Layout {...slotsAt(slot.slots, depth, { pathname, searchParams })} params={slot.params}>
           {element}
         </Layout>

package/internal/error-view.js

@@ -78,6 +78,10 @@ component RouteErrorView(module: ?ErrorModule, error: RouteError, reset: () => v
     return <DefaultRouteError error={error} reset={reset} />;
   }
   const Boundary = errorComponent(module);
+  // The error module's own export, looked up by route, for the same reason as
+  // the page component in `compose.js`: the same component on every render of
+  // that route, through a lookup the compiler cannot see into.
+  // uf-lint-disable-next-line react-compiler/static-components
   return <Boundary error={error} reset={reset} />;
 }
 

package/internal/flight-chunks.js

@@ -55,9 +55,33 @@ function elementJson(value: FlightChunk): string {
     .replace(/\u2029/g, "\\u2029");
 }
 
-/** The element for one chunk, or the end marker for `null`. */
-export function flightChunkElement(chunk: FlightChunk): string {
-  return `<script type="application/json" ${FLIGHT_CHUNK_ATTRIBUTE}>${elementJson(chunk)}</script>`;
+/**
+ * The element for one chunk, or the end marker for `null`.
+ *
+ * `nonce` is this response's, and it is carried even though the element is
+ * `application/json` and therefore a data block the browser never executes.
+ * Two reasons, and neither is "in case the spec changes". A uf document's
+ * invariant is that every `<script>` in it carries the nonce — that is what
+ * `packages/router/streaming.test.js` pins, and an invariant with an exception
+ * in it is one a reader has to check every new script against. And these are
+ * written as text into a stream rather than rendered by React, so unlike the
+ * payload rows in `./runtime.js` there is no second render on the client to
+ * disagree with; the attribute costs a comparison nobody makes.
+ */
+export function flightChunkElement(chunk: FlightChunk, nonce?: string | null): string {
+  const carried = nonce == null ? "" : ` nonce="${escapeNonce(nonce)}"`;
+  return `<script type="application/json"${carried} ${FLIGHT_CHUNK_ATTRIBUTE}>${elementJson(chunk)}</script>`;
+}
+
+/**
+ * A nonce, as an attribute value.
+ *
+ * uf's own nonces are base64 and hold none of these, so this is about the one a
+ * project supplied: the value reaches a document that a browser parses as
+ * HTML, and a `"` in it would end the attribute and open whatever follows.
+ */
+function escapeNonce(value: string): string {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
 }
 
 /**
@@ -74,7 +98,7 @@ export type ChunkEncoder = {|
   readonly end: () => string,
 |};
 
-export function createChunkEncoder(): ChunkEncoder {
+export function createChunkEncoder(nonce?: string | null): ChunkEncoder {
   const strict = new TextDecoder("utf-8", { fatal: true });
   let carry: Uint8Array = new Uint8Array(0);
 
@@ -87,17 +111,17 @@ export function createChunkEncoder(): ChunkEncoder {
     }
     const body = joined.subarray(0, complete);
     try {
-      return flightChunkElement(strict.decode(body));
+      return flightChunkElement(strict.decode(body), nonce);
     } catch {
-      return flightChunkElement({ bytes: base64(body) });
+      return flightChunkElement({ bytes: base64(body) }, nonce);
     }
   }
 
   function end(): string {
     const rest = carry;
     carry = new Uint8Array(0);
-    const tail = rest.length === 0 ? "" : flightChunkElement({ bytes: base64(rest) });
-    return `${tail}${flightChunkElement(null)}`;
+    const tail = rest.length === 0 ? "" : flightChunkElement({ bytes: base64(rest) }, nonce);
+    return `${tail}${flightChunkElement(null, nonce)}`;
   }
 
   return { encode, end };

package/internal/navigation-cache.js

@@ -0,0 +1,144 @@
+// @flow
+//
+// Internal to `@uniflowed/router`: the routes a navigation already has.
+//
+// A navigation used to ask the server every time. A `Link` prefetched a route's
+// payload on hover and handed it to exactly one click, and every other way back
+// to a page the reader had just seen, a second visit or the back button, waited
+// on the network again (ubugeeei-prod/uf#960). This module is what a navigation
+// reads first instead: the route it fetched or prefetched, kept for
+// `app.rendering.staleTime` seconds and asked for again after that.
+//
+// # Off until a project says a number
+//
+// uf's caches are opt-in, and this one is too. `staleTime` is `0` until a
+// project writes one, and at `0` nothing is kept, so a navigation shows what the
+// server answered for it just now, which is the guarantee every project had
+// before the setting existed.
+//
+// # What is kept
+//
+// One promise per route, never a copy of what it resolved to:
+//
+// - an application React Server Components render keeps the payload fetch: the
+//   route's state and its tree, with the `$loading.js` fallbacks the tree
+//   carries, so going back to a page that was still streaming shows the loading
+//   shell the first visit did;
+// - an application rendered from its modules keeps the resolved route: the
+//   loader's data, and the page, layouts and loading boundaries it loaded.
+//
+// A promise rather than its value, so a click on a link whose prefetch is still
+// in flight waits on that request instead of making a second one. The router
+// forgets an entry whose fetch failed or turned out not to be a route.
+//
+// # Keyed by the application path
+//
+// The path and query the route table is asked about, without
+// `app.router.basePath`: `/docs/guide?tab=api` under `/docs` is kept as
+// `/guide?tab=api`. A fragment is never part of a key, because a server never
+// sees one.
+//
+// # Cleared, not revalidated in place
+//
+// `router.refresh()` and every server action clear the whole cache. An action
+// is a write, and which pages it changed is the server's to know, so the next
+// navigation to any of them asks again rather than showing what the write made
+// untrue.
+
+import { applicationPathOf } from "./base-path.js";
+import type { FetchedFlight } from "./flight.js";
+import type { ResolvedRoute } from "./resolve.js";
+
+/** How many routes each cache keeps at once. Past it, the oldest is dropped. */
+export const NAVIGATION_CACHE_LIMIT = 32;
+
+let staleTimeMs: number = 0;
+
+/**
+ * Say how long, in seconds, a route a navigation fetched is shown again without
+ * asking. `0`, the default, keeps nothing. Called once, by the entry that
+ * started the application.
+ */
+export function installStaleTime(seconds: number): void {
+  staleTimeMs = Number.isFinite(seconds) && seconds > 0 ? seconds * 1000 : 0;
+  if (staleTimeMs === 0) {
+    clearNavigationCache();
+  }
+}
+
+/** Whether navigations keep what they fetch. */
+export function keepsNavigations(): boolean {
+  return staleTimeMs > 0;
+}
+
+/** The key a URL's route is kept under: its application path, then its query. */
+export function navigationKey(pathname: string, search: string): string {
+  return `${applicationPathOf(pathname) ?? pathname}${search}`;
+}
+
+/** One kind of kept route. */
+export type NavigationCache<T> = {|
+  /** The route kept under `key`, while it is fresh. A stale one is dropped. */
+  readonly read: (key: string) => T | null,
+  /** Keep `value` under `key` from now. Nothing is kept while the stale time is `0`. */
+  readonly store: (key: string, value: T) => void,
+  /** Drop what `key` keeps, if it is still `value`. */
+  readonly forget: (key: string, value: T) => void,
+  readonly clear: () => void,
+  /** How many routes are kept, fresh or not. */
+  readonly size: () => number,
+|};
+
+function createNavigationCache<T>(): NavigationCache<T> {
+  const entries: Map<string, {| readonly value: T, readonly at: number |}> = new Map();
+  return {
+    read(key) {
+      const entry = entries.get(key);
+      if (entry == null) {
+        return null;
+      }
+      if (Date.now() - entry.at >= staleTimeMs) {
+        entries.delete(key);
+        return null;
+      }
+      return entry.value;
+    },
+    store(key, value) {
+      if (staleTimeMs === 0) {
+        return;
+      }
+      // Deleted first, so a route kept again moves to the young end.
+      entries.delete(key);
+      if (entries.size >= NAVIGATION_CACHE_LIMIT) {
+        const oldest = entries.keys().next();
+        if (oldest.done !== true) {
+          entries.delete(oldest.value);
+        }
+      }
+      entries.set(key, { value, at: Date.now() });
+    },
+    forget(key, value) {
+      if (entries.get(key)?.value === value) {
+        entries.delete(key);
+      }
+    },
+    clear() {
+      entries.clear();
+    },
+    size() {
+      return entries.size;
+    },
+  };
+}
+
+/** Payload fetches, for an application React Server Components render. */
+export const flightNavigations: NavigationCache<Promise<FetchedFlight>> = createNavigationCache();
+
+/** Resolved routes, for an application rendered from its modules. */
+export const routeNavigations: NavigationCache<Promise<ResolvedRoute>> = createNavigationCache();
+
+/** Forget every kept route. `router.refresh()` and each server action call this. */
+export function clearNavigationCache(): void {
+  flightNavigations.clear();
+  routeNavigations.clear();
+}

package/internal/runtime.js

@@ -77,6 +77,13 @@ import { composeRoute, pageComponent } from "./compose.js";
 import { type FetchedFlight, type FlightRoot, type RouteState, routeState } from "./flight.js";
 import { Head } from "./head.js";
 import { addressOf, applicationPathOf, canonicalAddress } from "./base-path.js";
+import {
+  clearNavigationCache,
+  flightNavigations,
+  keepsNavigations,
+  navigationKey,
+  routeNavigations,
+} from "./navigation-cache.js";
 import { hasClientPage, matchRoute, nearestBoundary } from "./routing.js";
 import type { RouteParams, SearchParams } from "./routing.js";
 import {
@@ -142,6 +149,10 @@ export { resolveFailure, resolveMatch } from "./resolve.js";
 export type { RoutingSettings, TrailingSlash } from "./base-path.js";
 export { basePath, installRouting } from "./base-path.js";
 
+// `app.rendering.staleTime`, installed by the same entry; see
+// `./navigation-cache.js`.
+export { installStaleTime } from "./navigation-cache.js";
+
 // ---------------------------------------------------------------------------
 // View transitions
 // ---------------------------------------------------------------------------
@@ -671,9 +682,13 @@ component ModuleRouter(url: string, initial: ResolvedRoute, children: React.Node
     }
     setPending(true);
     try {
+      // An interception depends on the page it starts from, so it is resolved
+      // every time; any other navigation reads what this page kept while it is
+      // fresh. See `./navigation-cache.js`.
+      const key = navigationKey(target.pathname, target.search);
       const nextResolved =
         (intercepting ? await resolveInterception(routeTable(), origin, next) : null) ??
-        (await resolveMatch(routeTable(), next));
+        (await (routeNavigations.read(key) ?? keepRoute(key, resolveMatch(routeTable(), next))));
       // An intercepted entry remembers where it was intercepted from, so back
       // and forward can put the page underneath under it again. Every other
       // entry is written the way it always was.
@@ -781,7 +796,8 @@ component ModuleRouter(url: string, initial: ResolvedRoute, children: React.Node
         window.location.reload();
         return;
       }
-      resolveMatch(routeTable(), next).then(arrive);
+      const key = navigationKey(window.location.pathname, window.location.search);
+      (routeNavigations.read(key) ?? keepRoute(key, resolveMatch(routeTable(), next))).then(arrive);
     };
     window.addEventListener("popstate", onPopState);
     return () => {
@@ -824,6 +840,17 @@ component ModuleRouter(url: string, initial: ResolvedRoute, children: React.Node
       if (matched == null || load == null) {
         return;
       }
+      // With `app.rendering.staleTime` set, the whole route: its loader runs
+      // now, and the click, a later visit and the back button read what it
+      // answered while it is fresh. Otherwise only the modules it will need.
+      if (keepsNavigations()) {
+        const key = navigationKey(target.pathname, target.search);
+        await (
+          routeNavigations.read(key) ??
+          keepRoute(key, resolveMatch(routeTable(), applicationPath + target.search))
+        );
+        return;
+      }
       await Promise.all([
         loadOnce(load),
         ...matched.route.layouts.map((layout) => loadOnce(layout)),
@@ -841,6 +868,9 @@ component ModuleRouter(url: string, initial: ResolvedRoute, children: React.Node
         window.location.reload();
         return;
       }
+      // Everything a navigation kept is older than what this asks for, so none
+      // of it is shown again; see `./navigation-cache.js`.
+      clearNavigationCache();
       // A refresh of an intercepted page refreshes both of its halves: the
       // page underneath, resolved again for its own URL, and the interception
       // resolved again over it. Resolving only the address bar's URL would
@@ -935,7 +965,14 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
     }
     setPending(true);
     try {
-      const fetched = await (takePrefetched(next) ?? fetchFlight(next));
+      // The route this page already has while it is fresh, then a prefetch
+      // still in hand, then the network. See `./navigation-cache.js`.
+      const key = navigationKey(target.pathname, target.search);
+      const fetched = await (
+        flightNavigations.read(key) ??
+        takePrefetched(next) ??
+        keepFlight(key, fetchFlight(next))
+      );
       // Not a payload: a redirect off this origin, or a host that has no payload
       // for this URL. The browser loads it as a document, which is what the
       // anchor would have done.
@@ -994,8 +1031,10 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
     const onPopState = () => {
       const next = window.location.pathname + window.location.search;
       // The history entry already moved; a payload that cannot be had for it is
-      // a document to load, and a reload is the browser's way to load it.
-      fetchFlight(next).then(
+      // a document to load, and a reload is the browser's way to load it. While
+      // this page keeps the route fresh, what it kept is what comes back.
+      const key = navigationKey(window.location.pathname, window.location.search);
+      (flightNavigations.read(key) ?? keepFlight(key, fetchFlight(next))).then(
         (fetched) => {
           if (fetched.kind === "document") {
             window.location.reload();
@@ -1037,7 +1076,15 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
       if (target.origin !== window.location.origin) {
         return;
       }
-      await prefetchFlight(target.pathname + target.search);
+      const next = target.pathname + target.search;
+      // Kept for every navigation to it while it is fresh, when a project set
+      // `app.rendering.staleTime`; otherwise held for the one click after it.
+      if (keepsNavigations()) {
+        const key = navigationKey(target.pathname, target.search);
+        await (flightNavigations.read(key) ?? keepFlight(key, fetchFlight(next)));
+        return;
+      }
+      await prefetchFlight(next);
     },
     refresh: async () => {
       if (!isBrowser()) {
@@ -1047,7 +1094,13 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
         window.location.reload();
         return;
       }
-      const fetched = await fetchFlight(window.location.pathname + window.location.search);
+      // Everything a navigation kept is older than what this asks for, so none
+      // of it is shown again; see `./navigation-cache.js`.
+      clearNavigationCache();
+      const fetched = await keepFlight(
+        navigationKey(window.location.pathname, window.location.search),
+        fetchFlight(window.location.pathname + window.location.search),
+      );
       if (fetched.kind === "document") {
         window.location.reload();
         return;
@@ -1098,6 +1151,57 @@ const prefetchedFlights: Map<
   {| readonly fetched: Promise<FetchedFlight>, readonly at: number |},
 > = new Map();
 
+/**
+ * `fetched`, kept under `key` for as long as `app.rendering.staleTime` says,
+ * and forgotten again if it turns out not to be a route to show twice: a
+ * request that failed, an answer that was a document rather than a payload, or
+ * a payload React could not read.
+ */
+function keepFlight(key: string, fetched: Promise<FetchedFlight>): Promise<FetchedFlight> {
+  if (!keepsNavigations()) {
+    return fetched;
+  }
+  flightNavigations.store(key, fetched);
+  const forget = () => {
+    flightNavigations.forget(key, fetched);
+  };
+  void fetched.then((answer) => {
+    if (answer.kind === "document") {
+      forget();
+      return;
+    }
+    // A route that answered with its error or not-found boundary is shown this
+    // once: asked again, it may have recovered.
+    void answer.root.then((root) => {
+      if (root.route.status !== 200) {
+        forget();
+      }
+    }, forget);
+  }, forget);
+  return fetched;
+}
+
+/**
+ * `resolved`, kept under `key` for as long as `app.rendering.staleTime` says,
+ * and forgotten again if it did not resolve to a page: a loader that threw or
+ * redirected, or a route that answered with its error or not-found boundary.
+ */
+function keepRoute(key: string, resolved: Promise<ResolvedRoute>): Promise<ResolvedRoute> {
+  if (!keepsNavigations()) {
+    return resolved;
+  }
+  routeNavigations.store(key, resolved);
+  const forget = () => {
+    routeNavigations.forget(key, resolved);
+  };
+  void resolved.then((route) => {
+    if (route.status !== 200) {
+      forget();
+    }
+  }, forget);
+  return resolved;
+}
+
 function prefetchFlight(url: string): Promise<FetchedFlight> {
   const existing = prefetchedFlights.get(url);
   if (existing != null && Date.now() - existing.at < PREFETCH_LIFETIME_MS) {
@@ -1289,12 +1393,20 @@ component RenderedPage(data: mixed) {
   }
   const resolved = view.resolved;
   const Page = pageComponent(resolved.page);
+  // The route module's own export, looked up by route: `pageComponent` hands
+  // back its `default` or `Page` as it is, so this is the same component on
+  // every render of the same route. The React Compiler cannot see through the
+  // lookup and reports a component created during render. The block form,
+  // because the finding is on a JSX child and a `//` comment cannot stand
+  // between JSX children without becoming text.
+  // uf-lint-disable react-compiler/static-components
   return (
     <>
       <Page params={resolved.params} searchParams={resolved.searchParams} data={data} />
       {payloadElements(data)}
     </>
   );
+  // uf-lint-enable react-compiler/static-components
 }
 
 /**

package/internal/shell.js

@@ -78,8 +78,8 @@ export function redirectDocument(error: RedirectError): RenderResult {
  * carried two of them, one in each place, and only one was where a browser
  * looks. Hoisting the rendered one leaves the metadata with a single source.
  */
-export function shellFor(assets: RenderAssets): DocumentShell {
-  const head = headTags(assets);
+export function shellFor(assets: RenderAssets, nonce?: string | null): DocumentShell {
+  const head = headTags(assets, nonce);
   return {
     head,
     open: `<!doctype html>\n<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">`,
@@ -88,7 +88,7 @@ export function shellFor(assets: RenderAssets): DocumentShell {
   };
 }
 
-function headTags(assets: RenderAssets): string {
+function headTags(assets: RenderAssets, nonce?: string | null): string {
   let tags = "";
   for (const href of assets.styles) {
     tags += `<link rel="stylesheet" href="${escapeAttribute(href)}">`;
@@ -96,8 +96,16 @@ function headTags(assets: RenderAssets): string {
   for (const href of assets.preloads) {
     tags += `<link rel="modulepreload" href="${escapeAttribute(href)}">`;
   }
+  // The nonce goes on the client entry even though it is `src` rather than
+  // inline, because a policy of `script-src 'nonce-…'` admits *no* script
+  // without one — a nonce policy is not an inline policy with an exception in
+  // it. A project whose policy also names `'self'` pays nothing for the
+  // attribute being here, and one whose policy is `'strict-dynamic'` needs it:
+  // that is the directive under which this script is the root of trust every
+  // chunk it imports inherits from.
+  const carried = nonce == null ? "" : ` nonce="${escapeAttribute(nonce)}"`;
   for (const src of assets.scripts) {
-    tags += `<script type="module" src="${escapeAttribute(src)}"></script>`;
+    tags += `<script type="module" src="${escapeAttribute(src)}"${carried}></script>`;
   }
   return tags;
 }

package/internal/stream.js

@@ -667,6 +667,23 @@ export type RenderOptions = {|
    * [`interleaved`], which says where it may and may not go.
    */
   readonly payload?: ReadableStream<Uint8Array>,
+  /**
+   * This response's Content-Security-Policy nonce, or absent for none.
+   *
+   * Absent is what every render had before nonces existed and what every
+   * render still has in a project that has not asked for one, so a document
+   * written without it is byte-for-byte the document uf has always written.
+   *
+   * Present, it reaches three places, and it has to reach all three or the
+   * page is broken rather than merely unprotected: React's own option, which
+   * nonces every inline script React emits — the runtime that reveals a
+   * `<Suspense>` boundary, and the bootstrap; `shell.open`/`shell.body`, which
+   * carry the client entry; and the payload chunk elements, which
+   * [`interleaved`] writes as text.
+   *
+   * `prerenderDocument` is deliberately never given one. See its own paragraph.
+   */
+  readonly nonce?: string | null,
 |};
 
 /**
@@ -706,6 +723,7 @@ export function renderDocument(node: React.Node, options: RenderOptions): Promis
                 withPayload(
                   assembled(queue.chunks(), options.shell, options.transformHead),
                   options.payload,
+                  options.nonce,
                 ),
                 options.onStream,
               ),
@@ -717,6 +735,11 @@ export function renderDocument(node: React.Node, options: RenderOptions): Promis
           reject(error);
         },
         onError: options.onError,
+        // Every inline script React writes for this document, from one option:
+        // the streaming runtime that reveals a boundary and patches a segment,
+        // and the bootstrap. uf nonces the scripts it writes itself; these are
+        // React's, and there is no other way to reach them.
+        nonce: options.nonce ?? undefined,
       });
       return;
     }
@@ -744,6 +767,7 @@ type ReadableStreamRenderer = (
   settings: {|
     readonly onError: (error: mixed) => void,
     readonly signal: AbortSignal,
+    readonly nonce?: string,
   |},
 ) => Promise<ByteSource>;
 
@@ -769,20 +793,24 @@ export function renderWithReadableStream(
   options: RenderOptions,
 ): Promise<DocumentBody> {
   const controller = new AbortController();
-  return render(node, { onError: options.onError, signal: controller.signal }).then(
-    (stream: ByteSource) =>
-      bodyOf(
-        outgoing(
-          withPayload(
-            assembled(decoded(stream), options.shell, options.transformHead),
-            options.payload,
-          ),
-          options.onStream,
+  return render(node, {
+    onError: options.onError,
+    signal: controller.signal,
+    nonce: options.nonce ?? undefined,
+  }).then((stream: ByteSource) =>
+    bodyOf(
+      outgoing(
+        withPayload(
+          assembled(decoded(stream), options.shell, options.transformHead),
+          options.payload,
+          options.nonce,
         ),
-        () => {
-          controller.abort();
-        },
+        options.onStream,
       ),
+      () => {
+        controller.abort();
+      },
+    ),
   );
 }
 
@@ -843,8 +871,9 @@ export async function prerenderDocument(node: React.Node, options: RenderOptions
 function withPayload(
   chunks: AsyncGenerator<string, void, void>,
   payload: ?ReadableStream<Uint8Array>,
+  nonce?: string | null,
 ): AsyncGenerator<string, void, void> {
-  return payload == null ? chunks : interleaved(chunks, payload);
+  return payload == null ? chunks : interleaved(chunks, payload, nonce);
 }
 
 /**
@@ -892,8 +921,9 @@ function withPayload(
 async function* interleaved(
   chunks: AsyncGenerator<string, void, void>,
   payload: ReadableStream<Uint8Array>,
+  nonce?: string | null,
 ): AsyncGenerator<string, void, void> {
-  const encoder = createChunkEncoder();
+  const encoder = createChunkEncoder(nonce);
   const reader = payload.getReader();
   let written = "";
   let ended = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/router",
-  "version": "0.0.0-alpha.37",
+  "version": "0.0.0-alpha.39",
   "description": "The file-system router for Flow React applications: matching, layouts, loaders, navigation, server rendering and hydration.",
   "type": "module",
   "license": "MIT",
@@ -57,7 +57,7 @@
     }
   },
   "dependencies": {
-    "@uniflowed/hooks": "0.0.0-alpha.37",
-    "@uniflowed/server": "0.0.0-alpha.37"
+    "@uniflowed/hooks": "0.0.0-alpha.39",
+    "@uniflowed/server": "0.0.0-alpha.39"
   }
 }

package/rsc-client.js

@@ -39,6 +39,7 @@ import {
   installFlightFetch,
   installNavigation,
   installRouting,
+  installStaleTime,
 } from "./internal/runtime.js";
 
 /**
@@ -72,10 +73,12 @@ export async function hydrateFlight(options: {|
   readonly navigation?: Navigation,
   readonly basePath?: string,
   readonly trailingSlash?: TrailingSlash,
+  readonly staleTime?: number,
 |}): Promise<void> {
   requireServerComponentsReact("@uniflowed/router/rsc/client");
   installNavigation(options.navigation ?? "client");
   installRouting({ basePath: options.basePath, trailingSlash: options.trailingSlash });
+  installStaleTime(options.staleTime ?? 0);
   installFlightFetch(fetchFlight);
   installBrowserModules();
   const flight = readDocumentPayload(document, domObserver(document));

package/rsc-ssr.js

@@ -32,6 +32,8 @@ import { type StreamRecord, streamReporter } from "./internal/inspector.js";
 import { requireServerComponentsReact } from "./internal/react-version.js";
 import { RedirectError } from "./internal/routing.js";
 import type { AppProps } from "./internal/runtime.js";
+import { currentNonce } from "@uniflowed/server/host";
+
 import { redirectDocument, redirectResult, shellFor } from "./internal/shell.js";
 import { type DocumentBody, prerenderDocument, renderDocument } from "./internal/stream.js";
 import type { FlightRenderer } from "./rsc.js";
@@ -101,13 +103,19 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
     |},
   ): Promise<DocumentBody> {
     const [forHtml, forBrowser] = stream.tee();
+    // Read rather than minted, for the reason `../server.js` gives: a project
+    // that has not asked for a nonce gets `null` and the document it has
+    // always had. Read here rather than passed in because both of this
+    // renderer's callers reach `documentOf`, and a render is one response.
+    const nonce = currentNonce();
     try {
       return await renderDocument(<App url={url} flight={readPayload(forHtml)} />, {
-        shell: shellFor(assets),
+        shell: shellFor(assets, nonce),
         onError: settings.onError,
         transformHead: settings.transformHead,
         onStream: settings.onStream,
         payload: forBrowser,
+        nonce,
       });
     } catch (error) {
       void forBrowser.cancel();

package/rsc.js

@@ -238,6 +238,11 @@ component RoutePage(
   data: mixed,
 ) {
   const Page = pageComponent(page);
+  // The route module's own export, looked up by route: `pageComponent` hands
+  // back its `default` or `Page` as it is, so this is the same component on
+  // every render of the same route. The React Compiler cannot see through the
+  // lookup and reports a component created during render.
+  // uf-lint-disable-next-line react-compiler/static-components
   return <Page params={params} searchParams={searchParams} data={data} />;
 }
 

package/server.js

@@ -44,6 +44,8 @@ import {
 } from "./internal/runtime.js";
 
 import { type StreamDiagnostic, streamReporter } from "./internal/inspector.js";
+import { currentNonce } from "@uniflowed/server/host";
+
 import { redirectDocument, redirectResult, shellFor } from "./internal/shell.js";
 
 /** Asset URLs to reference from the document. */
@@ -357,6 +359,11 @@ export function createRenderer(options: {|
     // browser was actually sent rather than the one that was abandoned.
     const send = settings?.onStream;
     const onStream = send == null ? undefined : streamReporter(url, send);
+    // Read rather than minted: a project that has not asked for a nonce gets
+    // `null` and the document it has always had. Read once for both renders
+    // below, so the error document a failed shell falls back to carries the
+    // same nonce as the policy already on the response.
+    const nonce = currentNonce();
 
     // React reports an exception to `onError` *and*, if it was in the shell, to
     // `onShellError` — so forwarding both would tell the host about one failure
@@ -377,10 +384,11 @@ export function createRenderer(options: {|
     let body: DocumentBody;
     try {
       body = await renderDocument(<App url={url} initial={resolved} />, {
-        shell: shellFor(assets),
+        shell: shellFor(assets, nonce),
         onError,
         transformHead: settings?.transformHead,
         onStream,
+        nonce,
       });
       streaming = true;
       // Recovered before the shell was ready: a `<Suspense>` boundary whose
@@ -409,10 +417,11 @@ export function createRenderer(options: {|
       // where somebody can fix it.
       streaming = true;
       body = await renderDocument(<App url={url} initial={resolved} />, {
-        shell: shellFor(assets),
+        shell: shellFor(assets, nonce),
         onError,
         transformHead: settings?.transformHead,
         onStream,
+        nonce,
       });
     }