@timber-js/app 0.2.0-alpha.196 → 0.2.0-alpha.198

package/src/server/node-stream-transforms.ts

@@ -24,6 +24,7 @@ import { pipeline } from 'node:stream/promises';
 import {
   BufferAggregator,
   FlightInjectorCore,
+  type FlightInjectorOptions,
   SUFFIX_BYTES,
   createInjectorState,
   createSuffixState,
@@ -34,7 +35,7 @@ import {
 } from './html-injector-core.ts';
 import { logStreamingError } from './logger.ts';
 import { createTickCoalescer } from './coalesce-tick.ts';
-import { isAbortError, NOINDEX_SCRIPT } from './render-utils.ts';
+import { isAbortError, noindexScript } from './render-utils.ts';
 
 // ─── Buffered Transform ──────────────────────────────────────────────────────
 
@@ -167,21 +168,6 @@ export function createNodeHeadInjector(headHtml: string): Transform {
 
 // ─── RSC Flight Injection ────────────────────────────────────────────────────
 
-/**
- * Options for the Node.js flight injector.
- */
-export interface NodeFlightInjectorOptions {
-  /**
-   * Timeout in milliseconds for individual RSC stream reads. If a single
-   * `rscReader.read()` call does not resolve within this duration, the
-   * read is aborted and the stream errors with a `RenderTimeoutError`.
-   * Default: 30000 (30s).
-   */
-  renderTimeoutMs?: number;
-  /** Signal that fires when an unhandled RSC error is detected. */
-  errorSignal?: AbortSignal;
-}
-
 /**
  * Node.js `Transform` that merges RSC script tags into the HTML stream.
  *
@@ -202,7 +188,7 @@ export interface NodeFlightInjectorOptions {
  */
 export function createNodeFlightInjector(
   rscStream: ReadableStream<Uint8Array> | undefined,
-  options?: NodeFlightInjectorOptions
+  options?: FlightInjectorOptions
 ): Transform {
   if (!rscStream) {
     return new Transform({
@@ -212,7 +198,7 @@ export function createNodeFlightInjector(
     });
   }
 
-  const core = new FlightInjectorCore(rscStream, options?.renderTimeoutMs, options?.errorSignal);
+  const core = new FlightInjectorCore(rscStream, options);
 
   const drain = (): void => {
     while (core.pending.length > 0) transform.push(Buffer.from(core.pending.shift()!));
@@ -300,7 +286,8 @@ export function createNodeFlightInjector(
 export function runNodePipelineWithErrorHandling(
   source: Readable,
   transforms: readonly [Transform, ...Transform[]],
-  signal?: AbortSignal
+  signal?: AbortSignal,
+  nonce?: string
 ): PassThrough {
   const output = new PassThrough();
   const last = transforms[transforms.length - 1]!;
@@ -329,7 +316,7 @@ export function runNodePipelineWithErrorHandling(
       return;
     }
     logStreamingError({ error });
-    output.end(Buffer.from(NOINDEX_SCRIPT, 'utf-8'));
+    output.end(Buffer.from(noindexScript(nonce), 'utf-8'));
   });
 
   return output;

package/src/server/nuqs-ssr-provider.tsx

@@ -45,17 +45,18 @@ function makeNuqsSsrAdapter(searchParams: URLSearchParams) {
  * Wrap the SSR element tree with a nuqs adapter context.
  *
  * Called by ssr-entry.ts before passing the element to renderSsrStream.
- * Takes the NavContext search params and provides them to nuqs hooks
+ * Takes the NavContext raw query string and provides it to nuqs hooks
  * running during SSR so they render with the correct initial values.
  *
- * @param searchParamsRecord - The request's search params as a plain record
+ * The raw string — not a collapsed record — is what preserves repeated
+ * query keys (`?tag=a&tag=b`) for nuqs multi parsers, matching the raw
+ * `location.search` the client adapter reads after hydration (TIM-1428).
+ *
+ * @param search - The request's raw app-visible query string (`''` or `?…`)
  * @param children - The React element tree to wrap
  */
-export function withNuqsSsrAdapter(
-  searchParamsRecord: Record<string, string>,
-  children: ReactNode
-): ReactNode {
-  const searchParams = new URLSearchParams(searchParamsRecord);
+export function withNuqsSsrAdapter(search: string, children: ReactNode): ReactNode {
+  const searchParams = new URLSearchParams(search);
   const Provider = makeNuqsSsrAdapter(searchParams);
   // AdapterProvider types require children in the props object (not as 3rd arg)
   // eslint-disable-next-line react/no-children-prop

package/src/server/pipeline-phases.ts

@@ -23,6 +23,7 @@ import {
   setMatchedSegmentPath,
 } from './request-context.ts';
 import { withSpan } from './tracing.ts';
+import { requestCspNonce } from './csp-nonce.ts';
 import { logRenderError } from './logger.ts';
 import { RedirectSignal, DenySignal } from './primitives.ts';
 import { ParamCoercionError } from './route-element-builder.ts';
@@ -126,6 +127,10 @@ export async function runMiddlewarePhase(
     requestHeaders: requestHeaderOverlay,
     headers: responseHeaders,
     segmentParams: match.segmentParams,
+    // Lazy: reading it is the opt-in that makes the render nonce its scripts.
+    get nonce() {
+      return requestCspNonce();
+    },
     earlyHints: (hints) => {
       for (const hint of hints) {
         // Match Cloudflare's cached Early Hints attribute order: `as` before `rel`.

package/src/server/prebuilt/key-discipline.ts

@@ -6,13 +6,19 @@
  * values in cached output are the data-leak danger zone (design/06
  * security note). During a capture render the ALS store is wrapped in a
  * transparent observing proxy; any request-context read produces a
- * once-per-component warning.
+ * structured, rate-limited production diagnostic.
+ *
+ * The diagnostic fires per offending component, rate-limited to once per
+ * interval (default 60 s) — not once per process. This ensures the
+ * signal stays visible in log aggregators across restarts and deploys.
+ *
+ * When `strictKeyDiscipline` is enabled (via timber.config.ts
+ * `cache.strictKeyDiscipline: true`), the diagnostic is promoted to a
+ * thrown error that prevents the tainted payload from being cached.
  */
 
 import type { RequestContextStore } from '../als-registry.ts';
-
-/** Components already warned — exported so tests can reset between cases. */
-export const keyDisciplineWarned = new Set<string>();
+import { getLogger } from '../logger.ts';
 
 const REQUEST_CONTEXT_FIELDS: Record<string, string> = {
   headers: 'headers()',
@@ -20,6 +26,35 @@ const REQUEST_CONTEXT_FIELDS: Record<string, string> = {
   searchParams: 'searchParams',
 };
 
+/** Rate-limit interval: one diagnostic per component per 60 seconds. */
+const RATE_LIMIT_MS = 60_000;
+
+/** Last emission timestamp per component ID. */
+const lastEmitted = new Map<string, number>();
+
+let strict = false;
+
+/**
+ * Configure strict key-discipline mode. When true, a violation throws
+ * instead of logging — the tainted payload is never cached.
+ * Called at boot from the RSC entry with the resolved config value.
+ */
+export function setKeyDisciplineStrict(enabled: boolean): void {
+  strict = enabled;
+}
+
+/**
+ * Whether the proxy should be created for this component on this render.
+ * Returns true when strict mode is on (always check) or enough time has
+ * elapsed since the last diagnostic for this component.
+ */
+export function shouldCheckKeyDiscipline(id: string): boolean {
+  if (strict) return true;
+  const last = lastEmitted.get(id);
+  if (last === undefined) return true;
+  return Date.now() - last >= RATE_LIMIT_MS;
+}
+
 /**
  * Wrap a store with a proxy that records per-request field access.
  * The proxy forwards all reads/writes transparently — it only observes.
@@ -39,15 +74,49 @@ export function createKeyDisciplineProxy(store: RequestContextStore): {
   return { proxy, accessedApis };
 }
 
+/**
+ * Emit the key-discipline diagnostic or throw in strict mode.
+ *
+ * In strict mode: throws an error so the tainted payload is never cached.
+ * In default mode: emits a structured error-level diagnostic through the
+ * logger (same path as render errors), rate-limited per component.
+ */
 export function emitKeyDisciplineWarning(id: string, apis: Set<string>): void {
-  if (keyDisciplineWarned.has(id)) return;
-  keyDisciplineWarned.add(id);
   const apiList = Array.from(apis).join(', ');
-  console.warn(
-    `[timber] cache.component key-discipline warning: "${id}" reads ${apiList} ` +
-      `but the cache key is computed from props and segment params only. ` +
-      `If the output varies by ${apiList}, different users may see each ` +
-      `other's cached content. Either pass request-derived values as ` +
-      `props (included in the cache key) or remove the ${apiList} call.`
-  );
+
+  if (strict) {
+    throw new Error(
+      `[timber] cache.component key-discipline violation: "${id}" reads ${apiList} ` +
+        `during a cache capture render. The cache key does not include ` +
+        `request-derived values — caching this output would serve one ` +
+        `user's data to another. Either pass request-derived values as ` +
+        `props (included in the cache key) or remove the ${apiList} call. ` +
+        `To downgrade this to a warning, set cache.strictKeyDiscipline: false ` +
+        `in timber.config.ts.`
+    );
+  }
+
+  const now = Date.now();
+  const last = lastEmitted.get(id);
+  if (last !== undefined && now - last < RATE_LIMIT_MS) return;
+  lastEmitted.set(id, now);
+
+  getLogger().error('cache.component cross-user data leak risk', {
+    component: id,
+    accessedApis: Array.from(apis),
+    message:
+      `cache.component "${id}" reads ${apiList} but the cache key is ` +
+      `computed from props and segment params only. If the output varies ` +
+      `by ${apiList}, different users may see each other's cached content. ` +
+      `Either pass request-derived values as props (included in the cache ` +
+      `key) or remove the ${apiList} call.`,
+  });
+}
+
+/**
+ * Reset all diagnostic state. Exported for tests only.
+ */
+export function resetKeyDisciplineState(): void {
+  lastEmitted.clear();
+  strict = false;
 }

package/src/server/prebuilt-runtime.ts

@@ -48,7 +48,7 @@ import {
 import {
   createKeyDisciplineProxy,
   emitKeyDisciplineWarning,
-  keyDisciplineWarned,
+  shouldCheckKeyDiscipline,
 } from './prebuilt/key-discipline.ts';
 import {
   isCaptureActive,
@@ -348,7 +348,7 @@ async function captureComponentPayload(
   // store to detect request-context reads during the capture render.
   // The proxy is transparent — it never blocks or throws; it only observes.
   const store = requestContextAls.getStore();
-  const discipline = store && !keyDisciplineWarned.has(id) ? createKeyDisciplineProxy(store) : null;
+  const discipline = store && shouldCheckKeyDiscipline(id) ? createKeyDisciplineProxy(store) : null;
 
   const doCapture = async (): Promise<Uint8Array> => {
     beginCapture(id);

package/src/server/primitives.ts

@@ -476,11 +476,11 @@ export function _resetWaitUntilWarning(): void {
  * react-dom/server which cannot be loaded in the RSC environment.
  */
 export class SsrStreamError extends Error {
-  constructor(
-    message: string,
-    public readonly cause: unknown
-  ) {
+  override readonly cause: unknown;
+
+  constructor(message: string, cause: unknown) {
     super(message);
     this.name = 'SsrStreamError';
+    this.cause = cause;
   }
 }

package/src/server/render-utils.ts

@@ -6,6 +6,8 @@
  * ssr-render.ts, and rsc-entry/helpers.ts. See TIM-1071 item 1.
  */
 
+import { nonceAttr } from './csp-nonce.ts';
+
 /**
  * Check if an error is an abort error (connection closed by client).
  *
@@ -24,8 +26,10 @@ export function isAbortError(error: unknown): boolean {
  * document head. Injected when a render-phase error replaces the shell so
  * search engines don't index error pages.
  *
- * MUST be byte-identical across all stream wrappers (Node and Web) to
- * ensure consistent Content-Length headers.
+ * MUST be byte-identical across all stream wrappers (Node and Web) for a
+ * given nonce to ensure consistent Content-Length headers — which is why
+ * both wrappers call this one function rather than inlining the string.
  */
-export const NOINDEX_SCRIPT =
-  '<script>document.head.appendChild(Object.assign(document.createElement("meta"),{name:"robots",content:"noindex"}))</script>';
+export function noindexScript(nonce?: string): string {
+  return `<script${nonceAttr(nonce)}>document.head.appendChild(Object.assign(document.createElement("meta"),{name:"robots",content:"noindex"}))</script>`;
+}

package/src/server/rsc-entry/action-middleware-runner.ts

@@ -30,6 +30,7 @@ import { DenySignal, RedirectSignal } from '../primitives.ts';
 import { ParamCoercionError } from '../route-element-builder.ts';
 import type { RouteMatch } from '../pipeline.ts';
 import type { MiddlewareContext } from '../types.ts';
+import { requestCspNonce } from '../csp-nonce.ts';
 
 /** Coerce a matched route's segment params via its `params.ts` codecs. */
 export type CoerceSegmentParamsFn = (match: RouteMatch) => Promise<void>;
@@ -112,6 +113,12 @@ export async function runMiddlewareForAction(
       // Provide a no-op so user middleware can call `ctx.earlyHints()`
       // unconditionally without branching on request kind.
       earlyHints: () => {},
+      // Same reasoning: an action response carries no inline scripts, so a
+      // nonce has nothing to stamp. Still a real value so middleware that
+      // builds its CSP header unconditionally keeps working.
+      get nonce() {
+        return requestCspNonce();
+      },
     };
 
     // ─── Run the chain ──────────────────────────────────────────────

package/src/server/rsc-entry/error-renderer.ts

@@ -23,6 +23,7 @@ import type { ManifestSegmentNode } from '../route-matcher.ts';
 import { DenySignal, RenderError } from '../primitives.ts';
 import type { ClientBootstrapConfig } from '../html-injectors.ts';
 import { flightInitScript, htmlEscapeJsonString } from '../flight-scripts.ts';
+import { getCspNonce } from '../csp-nonce.ts';
 import { renderDenyPage, renderDenyPageAsRsc } from '../deny-renderer.ts';
 import type { DefaultPageRenderer, LayoutEntry } from '../deny-renderer.ts';
 import type { NavContext } from '../ssr-bridge-types.ts';
@@ -324,15 +325,17 @@ async function renderErrorPageViaRsc(
     // bootstrap script. Read here for the SSR-side ALS context below.
     const slotParams = getSlotParamsForClient();
 
+    const nonce = getCspNonce();
     const navContext: NavContext = {
       pathname: url.pathname,
+      search: appVisibleSearch(url).search,
       segmentParams: match.segmentParams,
-      searchParams: Object.fromEntries(appVisibleSearch(url).params),
       slotParams,
       statusCode: status,
       responseHeaders,
-      headHtml: flightInitScript(),
+      headHtml: flightInitScript(nonce),
       bootstrapScriptContent: clientBootstrap.bootstrapScriptContent,
+      nonce,
       rscStream: inlineStream,
       signal: req.signal,
       cookies: getCookiesForSsr(),

package/src/server/rsc-entry/index.ts

@@ -64,6 +64,7 @@ import { requestContextAls } from '../als-registry.ts';
 import { capturePrebuiltPayloads } from '../prebuilt-builder.ts';
 import { setPrebuiltPayloadSource } from '../prebuilt/payload-source.ts';
 import { setRscFunctions, setComponentRefreshTimeout } from '../prebuilt-runtime.ts';
+import { setKeyDisciplineStrict } from '../prebuilt/key-discipline.ts';
 import { createAutoSitemapHandler } from '../sitemap-handler.ts';
 import { generateStaticSite } from '../static-generator.ts';
 
@@ -505,6 +506,13 @@ if (renderTimeoutMs) {
   setComponentRefreshTimeout(renderTimeoutMs);
 }
 
+const cacheConfig = (config as Record<string, unknown>).cache as
+  | { strictKeyDiscipline?: boolean }
+  | undefined;
+if (cacheConfig?.strictKeyDiscipline === true) {
+  setKeyDisciplineStrict(true);
+}
+
 // Run instrumentation before the capture-mode guard — components may
 // depend on globals or SDKs initialized in register().
 await loadInstrumentation(loadUserInstrumentation);

package/src/server/rsc-entry/ssr-renderer.ts

@@ -14,6 +14,7 @@
 
 import type { ClientBootstrapConfig } from '../html-injectors.ts';
 import { flightInitScript } from '../flight-scripts.ts';
+import { getCspNonce, nonceAttr } from '../csp-nonce.ts';
 import { appVisibleSearch } from '../../shared/rsc-cache-key.ts';
 import { getSlotParamsForClient } from '../request-context.ts';
 import type { LayoutEntry } from '../deny-renderer.ts';
@@ -179,10 +180,15 @@ export async function renderSsrResponse(opts: SsrRenderOptions): Promise<Respons
   // `getSegmentParams(slotPath)` from.
   const slotParams = getSlotParamsForClient();
 
+  // Middleware has already run; if it read `ctx.nonce` for its CSP header,
+  // that is the value every inline script must wear.
+  const nonce = getCspNonce();
+
+  const reqUrl = new URL(req.url);
   const navContext: NavContext = {
-    pathname: new URL(req.url).pathname,
+    pathname: reqUrl.pathname,
+    search: appVisibleSearch(reqUrl).search,
     segmentParams: match.segmentParams,
-    searchParams: Object.fromEntries(appVisibleSearch(new URL(req.url)).params),
     slotParams,
     statusCode: 200,
     responseHeaders,
@@ -191,12 +197,13 @@ export async function renderSsrResponse(opts: SsrRenderOptions): Promise<Respons
       clientBootstrap.preloadLinks +
       // Initialize __timber_f in <head> so it exists before any streaming
       // chunk scripts arrive in <body>. See flight-scripts.ts, LOCAL-415.
-      (clientJsDisabled ? '' : flightInitScript()),
+      (clientJsDisabled ? '' : flightInitScript(nonce)),
     getHeadSegmentScript: clientJsDisabled
       ? undefined
       : () =>
-          `<script>self.__timber_segments=${htmlEscapeJsonString(JSON.stringify(buildSegmentInfo(segments, layoutComponents, opts.slotSkipInfo, undefined, getFirstDeniedSegmentIndex())))}</script>`,
+          `<script${nonceAttr(nonce)}>self.__timber_segments=${htmlEscapeJsonString(JSON.stringify(buildSegmentInfo(segments, layoutComponents, opts.slotSkipInfo, undefined, getFirstDeniedSegmentIndex())))}</script>`,
     bootstrapScriptContent: clientBootstrap.bootstrapScriptContent,
+    nonce,
     // Skip RSC inline stream when client JS is disabled — no client to hydrate.
     rscStream: clientJsDisabled ? undefined : inlineStream,
     deferSuspenseFor: deferSuspenseFor > 0 ? deferSuspenseFor : undefined,

package/src/server/ssr-bridge-types.ts

@@ -41,10 +41,20 @@ import type { SlotParamsRecord } from '../shared/slot-params.ts';
 export interface NavContext {
   /** The requested pathname */
   pathname: string;
+  /**
+   * The app-visible raw query string (`''` or `?…`), with the framework's
+   * `_rsc` cache key stripped — from `appVisibleSearch()`. The single
+   * representation of the request's search state on this contract: it feeds
+   * `NavigationProvider`, the nuqs SSR adapter, and the ALS-backed SSR data,
+   * so `useSearchParams()`, nuqs hooks, and `<Link preserveSearchParams>`
+   * read the identical value they will read from the address bar after
+   * hydration. The raw string preserves repeated keys (`?tag=a&tag=b`),
+   * which a collapsed `Record<string, string>` cannot represent — do not
+   * reintroduce one beside this field (TIM-1428).
+   */
+  search: string;
   /** Extracted route segment params. Post-coercion, values may be non-string (TIM-1347). */
   segmentParams: CoercedParams;
-  /** Search params from the URL */
-  searchParams: Record<string, string>;
   /**
    * Per-slot segment params, keyed by slot tree path. Absent when the request
    * rendered no slot with params of its own. Feeds `useSegmentParams(path)`
@@ -59,6 +69,16 @@ export interface NavContext {
   headHtml: string;
   /** Inline JS for React's bootstrapScriptContent — kicks off module loading */
   bootstrapScriptContent: string;
+  /**
+   * Request CSP nonce, generated when middleware read `ctx.nonce` for its
+   * `Content-Security-Policy` header (`getCspNonce()`). SSR passes it to
+   * Fizz (`nonce` option → bootstrap + runtime scripts), to the Flight
+   * decoder (preinit scripts), and to every timber-generated inline
+   * `<script>`. Undefined when no middleware asked for one, in which case
+   * the markup is byte-identical to a nonce-less render.
+   * See design/13-security.md §"Content Security Policy" (TIM-1414).
+   */
+  nonce?: string;
   /** Tee'd RSC stream for client-side hydration (inlined into HTML) */
   rscStream?: ReadableStream<Uint8Array>;
   /** Max Suspense hold window (ms). SSR delays the first flush by this

package/src/server/ssr-entry.ts

@@ -39,9 +39,8 @@ import { SsrStreamError } from './primitives.ts';
 import { createBufferedTransformStream, injectHead, injectRscPayload } from './html-injectors.ts';
 import { wrapSsrElement } from './ssr-wrappers.tsx';
 import { withSpan } from './tracing.ts';
-import { setCurrentParams } from '../client/use-segment-params.ts';
 import { registerSsrDataProvider, type SsrData } from '../client/ssr-data.ts';
-import { readPayloadTree } from '../shared/payload-root.ts';
+import { splitPayloadRoot } from '../shared/payload-root.ts';
 import type { NavContext } from './ssr-bridge-types.ts';
 
 // Pre-import Node.js stream modules at module load time — not per-request.
@@ -123,7 +122,7 @@ export async function handleSsr(
     // useSearchParams, useCookie, useParams, etc.).
     const ssrData: SsrData = {
       pathname: navContext.pathname,
-      searchParams: navContext.searchParams,
+      search: navContext.search,
       cookies: navContext.cookies ?? new Map(),
       params: navContext.segmentParams,
       slotParams: navContext.slotParams,
@@ -136,12 +135,6 @@ export async function handleSsr(
     // Client hooks read from getSsrData() which delegates to this
     // ALS store via the registered provider.
     return ssrDataAls.run(ssrData, async () => {
-      // Also set the module-level currentParams for useSegmentParams().
-      // useParams reads from getSsrData() during SSR (ALS-backed),
-      // but setCurrentParams is kept for the client-side path where
-      // the segment router updates params on navigation.
-      setCurrentParams(navContext.segmentParams);
-
       // Decode the RSC stream into a React element tree.
       // createFromReadableStream resolves client component references
       // (from "use client" modules) using the SSR environment's module
@@ -152,30 +145,41 @@ export async function handleSsr(
       // On Node.js: convert Web ReadableStream → Node Readable → createFromNodeStream
       //   (eliminates Promise-per-chunk overhead from Web Streams reader)
       // On Workers: createFromReadableStream (Web Streams are V8-native C++ there)
+      //
+      // The request CSP nonce goes to the Flight decoder too: Flight emits
+      // `<script>` preinits for client-reference modules, and those need
+      // the nonce as much as timber's own inline tags do (TIM-1414).
+      const nonce = navContext.nonce;
       let root: unknown;
       if (hasNodeStreamDecode && _nodeStreamImports) {
         const nodeRscStream = _nodeStreamImports.ReadableFromWeb(
           rscStream as import('stream/web').ReadableStream
         );
-        root = createFromNodeStream(nodeRscStream);
+        root = createFromNodeStream(nodeRscStream, { nonce });
       } else {
-        root = createFromReadableStream(rscStream);
+        root = createFromReadableStream(rscStream, { nonce });
       }
       // The payload root is `{ tree, params, slotParams }` — params ride
-      // beside the tree rather than in a provider around it (TIM-1297). SSR
-      // renders the tree; the params it needs are already in `ssrData` above,
-      // which is where `useSegmentParams()` reads them from during SSR. The
-      // client renders its own provider over the same records.
-      const element = Promise.resolve(root).then(readPayloadTree) as React.ReactNode;
+      // beside the tree rather than in a provider around it (TIM-1297).
+      // splitPayloadRoot is the same split the browser performs: the tree
+      // renders, and the params half feeds PayloadRoot inside the wrapper
+      // chain so `useSegmentParams()` reads the identical derivation on
+      // both sides (TIM-1424).
+      const { tree, params } = splitPayloadRoot(root);
+      const element = tree as React.ReactNode;
       const _decodeEnd = performance.now();
 
-      // Wrap with the same component tree structure as the client hydration
-      // tree (NavigationRoot → TopLoader →
-      // TimberNuqsAdapter → NuqsAdapterProvider → NavigationProvider).
-      // This ensures useId() produces matching IDs on both sides, preventing
-      // hydration mismatches in libraries like Radix UI. See TIM-532.
+      // Wrap with the same component tree the client hydrates —
+      // real NavigationProvider and PayloadRoot, not no-op mirrors —
+      // so hooks resolve identically and useId() matches on both sides.
+      // See TIM-532, TIM-1424.
       const hasTopLoader = _runtimeConfig.topLoader?.enabled !== false;
-      const wrappedElement = wrapSsrElement(element, navContext.searchParams, hasTopLoader);
+      const wrappedElement = wrapSsrElement(element, {
+        pathname: navContext.pathname,
+        search: navContext.search,
+        paramsSource: params,
+        hasTopLoader,
+      });
 
       // Render to HTML stream (waits for onShellReady).
       //
@@ -201,6 +205,7 @@ export async function handleSsr(
         try {
           nodeHtmlStream = await renderSsrNodeStream(wrappedElement, {
             bootstrapScriptContent: navContext.bootstrapScriptContent || undefined,
+            nonce,
             deferSuspenseFor: navContext.deferSuspenseFor,
             signal: navContext.signal,
             renderTimeoutMs,
@@ -240,13 +245,15 @@ export async function handleSsr(
         const flightInjector = createNodeFlightInjector(navContext.rscStream, {
           renderTimeoutMs,
           errorSignal: navContext._errorSignal,
+          nonce,
         });
         const moveSuffix = createNodeMoveSuffixTransform();
 
         const output = runNodePipelineWithErrorHandling(
           nodeHtmlStream,
           [bufferedTransform, headInjector, flightInjector, moveSuffix],
-          navContext.signal
+          navContext.signal,
+          nonce
         );
         const _pipelineEnd = performance.now();
 
@@ -271,6 +278,7 @@ export async function handleSsr(
       try {
         htmlStream = await renderSsrStream(wrappedElement, {
           bootstrapScriptContent: navContext.bootstrapScriptContent || undefined,
+          nonce,
           deferSuspenseFor: navContext.deferSuspenseFor,
           signal: navContext.signal,
           renderTimeoutMs,
@@ -300,12 +308,11 @@ export async function handleSsr(
       const resolvedHeadHtml = navContext.headHtml + (navContext.getHeadSegmentScript?.() ?? '');
       let outputStream = htmlStream.pipeThrough(createBufferedTransformStream());
       outputStream = injectHead(outputStream, resolvedHeadHtml);
-      outputStream = injectRscPayload(
-        outputStream,
-        navContext.rscStream,
+      outputStream = injectRscPayload(outputStream, navContext.rscStream, {
         renderTimeoutMs,
-        navContext._errorSignal
-      );
+        errorSignal: navContext._errorSignal,
+        nonce,
+      });
       const _pipelineEnd = performance.now();
 
       navContext._ssrTimings = {