@nifrajs/web 4.0.0 → 5.0.0

package/src/internal/page-execution.ts

@@ -40,7 +40,7 @@ import {
   STATUS_HEADER,
 } from "../router.ts"
 import { searchOf, searchOfChain } from "../search.ts"
-import { mergeHeads, resolveMeta } from "./head-merge.ts"
+import { mergeHeads, resolveChainMeta } from "./head-merge.ts"
 import {
   EMPTY_RETAIN,
   type HeadersLike,
@@ -78,6 +78,7 @@ export type { NonceResolver } from "../nonce.ts"
 
 /** Structural context supplied by the core server to one page route handler. */
 export interface PageRouteContext<Env = unknown> {
+  readonly signal?: AbortSignal
   readonly params: Record<string, string>
   readonly req: Request
   readonly env: Env
@@ -172,6 +173,11 @@ function appTarget(location: string, requestUrl: string): string {
 }
 
 export interface PageExecutionOptions<Env = unknown> {
+  readonly serverComponents?: import("../server-components/types.ts").ServerComponentRuntime
+  readonly rerenderOwnerGET?: (
+    request: Request,
+    context: PageRouteContext<Env>,
+  ) => Promise<Response>
   readonly adapter: RenderAdapter
   readonly manifest: Manifest
   readonly clientEntry: string
@@ -201,6 +207,9 @@ export interface PageExecutionOptions<Env = unknown> {
       readonly route: string
     },
   ) => void
+  /** Logs a failure an `_error` boundary answered. Without a boundary the error propagates and the
+   * server logs it, so this runs only where the server never sees the throw. */
+  readonly logBoundaryError?: (error: unknown, request: Request) => void
 }
 
 type PageResponse = Response | ResponseResult | RenderedPage
@@ -238,6 +247,24 @@ type LayoutRun = {
   readonly pending: Promise<unknown> | undefined
 }
 
+/** A route's layouts after only their gates ran: `gates[i]` is gate `i`'s value. */
+type GatedLayouts = {
+  readonly modules: LoadedLayoutModules
+  readonly gates: readonly unknown[]
+}
+
+/** Layouts whose loaders settled for this request: what a status or error page renders in. */
+type LayoutChain = {
+  readonly modules: LoadedLayoutModules
+  readonly layoutData: readonly unknown[] | undefined
+}
+
+/**
+ * Not called for a page that exports `inLayouts = false`, so such a page runs no layout loader.
+ * `undefined` renders the page alone.
+ */
+type LayoutChainSource = (page: RouteModule, count: number) => Promise<LayoutChain | undefined>
+
 /**
  * Own the page request program behind one private seam.
  *
@@ -251,6 +278,8 @@ export function createPageRequestExecutor<Env = unknown>(
   options: PageExecutionOptions<Env>,
 ): PageRequestExecutor<Env> {
   const { adapter, manifest, clientEntry, api } = options
+  // The action result is request-local; a browser cannot manufacture this handoff.
+  const progressiveActionData = new WeakMap<Request, unknown>()
   // Bound once per render, so every loader, action and boundary in that render shares one view of the
   // in-process client carrying the visitor's platform. An `api` without the seam passes through as-is.
   const bindApi = platformBinderOf(api)
@@ -327,9 +356,9 @@ export function createPageRequestExecutor<Env = unknown>(
   ): string | undefined | Promise<string | undefined> =>
     options.nonce === undefined ? undefined : options.nonce({ request, env })
 
-  const stylesOf = (id: string): { styles?: readonly string[]; cssLoading?: CssLoadingMode } => {
-    const perRoute = options.routeStyles?.[id]
-    const styles = perRoute ?? options.styles
+  const stylesFrom = (
+    styles: readonly string[] | undefined,
+  ): { styles?: readonly string[]; cssLoading?: CssLoadingMode } => {
     if (styles === undefined || styles.length === 0) return {}
     return {
       styles,
@@ -337,6 +366,9 @@ export function createPageRequestExecutor<Env = unknown>(
     }
   }
 
+  const stylesOf = (id: string): { styles?: readonly string[]; cssLoading?: CssLoadingMode } =>
+    stylesFrom(options.routeStyles?.[id] ?? options.styles)
+
   // Load a route's layout modules once for the current execution. The render path needs each whole
   // module for its component + meta, while the data path also needs loader/gate/boundary declarations.
   const loadLayoutModules = async (route: RouteEntry): Promise<LoadedLayoutModules> => {
@@ -361,15 +393,41 @@ export function createPageRequestExecutor<Env = unknown>(
     pending: undefined,
   }
 
-  /** Run layout loaders, awaiting gates before starting the page loader and retaining only safe data. */
+  /**
+   * Await one gate. A returned redirect, status or Response refuses the request exactly as a thrown
+   * one does: stored as layout data it would let the page loader and the action run.
+   */
+  const runGate = async (
+    route: RouteEntry,
+    index: number,
+    loader: NonNullable<LoadedLayoutModules[number]["loader"]>,
+    ctx: LoaderContext,
+  ): Promise<unknown> => {
+    let value: unknown
+    try {
+      value = await loader(ctx)
+    } catch (err) {
+      // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The loaded layout array is derived from these same manifest IDs in the same order.
+      throw tagLayoutError(err, route.layoutIds[index] as string)
+    }
+    // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The loaded layout array is derived from these same manifest IDs in the same order.
+    if (isControlFlow(value)) throw tagLayoutError(value, route.layoutIds[index] as string)
+    return value
+  }
+
+  /**
+   * Run layout loaders, awaiting gates before starting the page loader and retaining only safe data.
+   * `gated` carries gates that already ran for this request, so none runs twice.
+   */
   const runLayoutChain = async (
     route: RouteEntry,
     ctx: LoaderContext,
     controls: PageResponseControls,
     retain?: RetainContext,
+    gated?: GatedLayouts,
   ): Promise<LayoutRun> => {
     if (route.layoutIds.length === 0) return emptyLayoutRun
-    const modules = await loadLayoutModules(route)
+    const modules = gated?.modules ?? (await loadLayoutModules(route))
     if (!modules.some((m) => m.loader !== undefined)) {
       return { modules, layoutData: undefined, retained: [], pending: undefined }
     }
@@ -385,6 +443,7 @@ export function createPageRequestExecutor<Env = unknown>(
         try {
           keep = keepsLayoutData(route, i, layout, ctx.params, retain)
         } catch (err) {
+          // biome-ignore lint/plugin/requireSafetyCommentForTypeAssertion: The loaded layout array is derived from these same manifest IDs in the same order.
           throw tagLayoutError(err, route.layoutIds[i] as string)
         }
         if (keep) {
@@ -398,11 +457,7 @@ export function createPageRequestExecutor<Env = unknown>(
         set: controls.scope(i),
       }
       if (modules[i]?.gate === true) {
-        try {
-          results[i] = await loader(scoped)
-        } catch (err) {
-          throw tagLayoutError(err, route.layoutIds[i] as string)
-        }
+        results[i] = gated === undefined ? await runGate(route, i, loader, scoped) : gated.gates[i]
         continue
       }
       const layoutId = route.layoutIds[i] as string
@@ -441,22 +496,19 @@ export function createPageRequestExecutor<Env = unknown>(
     route: RouteEntry,
     ctx: LoaderContext,
     controls: PageResponseControls,
-  ): Promise<LoadedLayoutModules> => {
+  ): Promise<GatedLayouts> => {
     const modules = await loadLayoutModules(route)
+    const gates: unknown[] = []
     for (let i = 0; i < modules.length; i++) {
       const mod = modules[i]
       if (mod?.gate !== true || mod.loader === undefined) continue
-      try {
-        await mod.loader({
-          ...ctx,
-          params: scopeParams(ctx.params, route.layoutParams?.[i]),
-          set: controls.scope(i),
-        })
-      } catch (err) {
-        throw tagLayoutError(err, route.layoutIds[i] as string)
-      }
+      gates[i] = await runGate(route, i, mod.loader, {
+        ...ctx,
+        params: scopeParams(ctx.params, route.layoutParams?.[i]),
+        set: controls.scope(i),
+      })
     }
-    return modules
+    return { modules, gates }
   }
 
   /** Outermost first; a failure carries its directory so the nearest `_error` above it renders. */
@@ -594,16 +646,14 @@ export function createPageRequestExecutor<Env = unknown>(
 
   const resolveChainAndHead = (
     layoutModules: LoadedLayoutModules,
+    layoutData: readonly unknown[] | undefined,
     page: RouteModule,
     metaArgs: MetaArgs,
     leaf: unknown = page.default,
   ): { chain: unknown[]; head: Meta } => {
     const chain = [...layoutModules.map((m) => m.default), leaf]
-    const heads = [
-      ...layoutModules.map((m) => resolveMeta(m.meta, metaArgs)),
-      resolveMeta(page.meta, metaArgs),
-    ]
-    return { chain, head: mergeHeads(heads) }
+    const metas = [...layoutModules.map((m) => m.meta), page.meta]
+    return { chain, head: mergeHeads(resolveChainMeta(metas, layoutData, metaArgs)) }
   }
 
   /** What `useMatches` reports for a chain: the layouts' ids and `handle`s, then the page's. */
@@ -649,49 +699,160 @@ export function createPageRequestExecutor<Env = unknown>(
     }
   }
 
+  /** What a status or error page's `meta` receives: no route params, and its own data. */
+  const statusMetaArgs = (req: Request, data: unknown, nonce: string | undefined): MetaArgs =>
+    nonce === undefined
+      ? { data, pageData: data, params: {}, origin: originOf(req) }
+      : { data, pageData: data, params: {}, origin: originOf(req), nonce }
+
   const renderError = async (
+    req: Request,
     route: RouteEntry,
     errorId: string,
     err: unknown,
     personalized: boolean,
     nonce?: string,
+    layouts?: LayoutChainSource,
   ): Promise<PageResponse> => {
     const errDir = dirOfId(errorId, "_error")
     const keptLayoutIds = route.layoutIds.filter((id) => {
       const ld = dirOfId(id, "_layout")
       return ld === "" || ld === errDir || errDir.startsWith(`${ld}/`)
     })
-    const layouts = await Promise.all(
+    const errorModule = await (manifest.errors?.[errorId] as LayoutEntry).load()
+    const e = err instanceof Error ? err : new Error(String(err))
+    // An error's text can carry a connection string or a query, so only a run that says it is
+    // development or test shows it; an unset NODE_ENV (an unbuilt `bun app.ts`) counts as production.
+    const nodeEnv = typeof process === "undefined" ? undefined : process.env.NODE_ENV
+    const data =
+      nodeEnv === "development" || nodeEnv === "test"
+        ? { name: e.name, message: e.message }
+        : { name: "Error", message: "Internal Server Error" }
+    const inLayouts = errorModule.inLayouts !== false
+    const chain =
+      inLayouts && layouts !== undefined && keptLayoutIds.length > 0
+        ? await layouts(errorModule, keptLayoutIds.length)
+        : undefined
+    const render = (components: unknown[], wrapped?: { head: Meta; chain: LayoutChain }) => {
+      const layoutData = wrapped?.chain.layoutData
+      return renderPageResult({
+        adapter,
+        chain: components,
+        data,
+        ...(wrapped === undefined ? {} : { head: wrapped.head }),
+        clientEntry,
+        routeId: errorId,
+        status: 500,
+        hydrate: false,
+        ...(layoutData === undefined ? {} : { layoutData }),
+        ...(personalized || layoutData !== undefined ? { headers: PRIVATE_PAGE_HEADERS } : {}),
+        ...(nonce === undefined ? {} : { nonce }),
+        ...cspOption,
+        ...titleOption,
+      })
+    }
+    if (chain !== undefined) {
+      const resolved = resolveChainAndHead(
+        chain.modules,
+        chain.layoutData,
+        errorModule,
+        statusMetaArgs(req, data, nonce),
+      )
+      try {
+        return await render(resolved.chain, { head: resolved.head, chain })
+      } catch {
+        // A layout that fails to render leaves the error page alone, never a second error.
+        return render([errorModule.default])
+      }
+    }
+    // Layouts whose data did not settle still frame the error page, without their data.
+    const layoutComponents = await Promise.all(
       keptLayoutIds.map((id) =>
         (manifest.layouts[id] as LayoutEntry).load().then((m) => m.default),
       ),
     )
-    const { default: errComp } = await (manifest.errors?.[errorId] as LayoutEntry).load()
-    const e = err instanceof Error ? err : new Error(String(err))
-    // An error's text can carry a connection string or a query, so a production page gets neither.
-    const production = typeof process === "undefined" || process.env.NODE_ENV === "production"
-    return renderPageResult({
-      adapter,
-      chain: [...layouts, errComp],
-      data: production
-        ? { name: "Error", message: "Internal Server Error" }
-        : { name: e.name, message: e.message },
-      clientEntry,
-      routeId: errorId,
-      status: 500,
-      hydrate: false,
-      ...(personalized ? { headers: PRIVATE_PAGE_HEADERS } : {}),
-      ...(nonce === undefined ? {} : { nonce }),
-      ...cspOption,
-      ...titleOption,
-    })
+    return render([...layoutComponents, errorModule.default])
   }
 
+  /** The leading `count` layouts of `modules`, unless one of them answered with a status or redirect. */
+  const settledLayouts = (
+    modules: LoadedLayoutModules,
+    layoutData: readonly unknown[] | undefined,
+    count: number,
+  ): LayoutChain | undefined => {
+    if (modules.length < count) return undefined
+    const data = layoutData?.slice(0, count)
+    if (data?.some((value) => isControlFlow(value) || isStatusSignal(value))) return undefined
+    return { modules: modules.slice(0, count), layoutData: data }
+  }
+
+  /** A run's leading layouts once all of its loaders settle - never when a layout or middleware refused. */
+  const leadingLayouts =
+    (run: LayoutRun | undefined, err?: unknown): LayoutChainSource =>
+    async (_page, count) => {
+      if (run === undefined || (err !== undefined && layoutErrorId(err) !== undefined)) {
+        return undefined
+      }
+      try {
+        await run.pending
+      } catch {
+        return undefined
+      }
+      return settledLayouts(run.modules, run.layoutData, count)
+    }
+
+  const rootLayoutIds: readonly string[] = manifest.layouts._layout === undefined ? [] : ["_layout"]
+  const rootMiddlewareIds: readonly string[] =
+    manifest.middlewares?._middleware === undefined ? [] : ["_middleware"]
+  /**
+   * Run the root middleware and layouts for a request no route ran them for (an unmatched URL), as a
+   * nested `_404` runs its own. Any refusal or failure renders the page alone.
+   */
+  const rootLayoutsFor =
+    (c: PageRouteContext<Env>, controls: PageResponseControls): LayoutChainSource =>
+    async (page) => {
+      const entry = manifest.statusPages?.["404"] ?? manifest.notFound
+      if (rootLayoutIds.length === 0 || entry === undefined) return undefined
+      const layoutsOnly: RouteEntry = {
+        id: "_404",
+        pattern: "/*",
+        layoutIds: rootLayoutIds,
+        errorIds: [],
+        file: entry.file,
+        load: entry.load,
+      }
+      const route: RouteEntry =
+        rootMiddlewareIds.length === 0
+          ? layoutsOnly
+          : { ...layoutsOnly, middlewareIds: rootMiddlewareIds }
+      try {
+        const draft = await draftFlag(c.req)
+        if (draft) controls.personalize()
+        const ctx: LoaderContext = {
+          params: {},
+          request: c.req,
+          req: c.req,
+          api: apiFor(c),
+          env: c.env,
+          draft,
+          search: loaderSearch(page.searchSchema, c.req),
+          set: controls.scope(PAGE_SCOPE),
+        }
+        if (route.middlewareIds !== undefined) await runMiddleware(route, ctx, controls)
+        const run = await runLayoutChain(route, ctx, controls)
+        await run.pending
+        return settledLayouts(run.modules, run.layoutData, rootLayoutIds.length)
+      } catch {
+        return undefined
+      }
+    }
+
   const renderTerminalStatus = async (
     status: number,
-    path?: string,
+    req: Request,
     extraHeaders?: HeadersLike,
     nonce?: string,
+    layouts?: LayoutChainSource,
   ): Promise<PageResponse> => {
     const page = manifest.statusPages?.[String(status)] ?? manifest.notFound
     if (page === undefined) {
@@ -700,36 +861,57 @@ export function createPageRequestExecutor<Env = unknown>(
       return new Response(STATUS_TEXT[status] ?? "Error", { status, headers })
     }
     const routeId = manifest.statusPages?.[String(status)] !== undefined ? `_${status}` : "_404"
-    const loaded = (await page.load()) as {
-      readonly default: unknown
-      readonly searchSchema?: RouteModule["searchSchema"]
-      readonly handle?: unknown
+    const loaded = await page.load()
+    const wraps = loaded.inLayouts !== false && rootLayoutIds.length > 0
+    const chain =
+      wraps && layouts !== undefined ? await layouts(loaded, rootLayoutIds.length) : undefined
+    const modules = chain?.modules ?? []
+    const layoutIds = chain === undefined ? [] : rootLayoutIds
+    const layoutData = chain?.layoutData
+    const { chain: components, head } = resolveChainAndHead(
+      modules,
+      layoutData,
+      loaded,
+      statusMetaArgs(req, null, nonce),
+    )
+    let headers = extraHeaders
+    if (layoutData !== undefined) {
+      // The page now shows what a layout loaded for this visitor.
+      const privateHeaders = new Headers(extraHeaders)
+      privateHeaders.set("cache-control", PRIVATE_NO_STORE)
+      headers = privateHeaders
     }
-    return renderPageResult({
+    const statusPage = {
       adapter,
-      chain: [loaded.default],
+      chain: components,
       data: null,
+      head,
       clientEntry,
       routeId,
-      matchChain: { ids: [routeId], handles: [loaded.handle] },
-      ...(path !== undefined
-        ? {
-            search: searchOf(
-              loaded.searchSchema,
-              path.includes("?") ? path.slice(path.indexOf("?")) : "",
-            ),
-          }
-        : {}),
-      ...(path !== undefined ? { path } : {}),
+      matchChain: matchChainOf(layoutIds, modules, routeId, loaded),
+      search: searchChainOf(modules, loaded, req),
+      path: pathOf(req),
       status,
-      ...(extraHeaders !== undefined ? { headers: extraHeaders } : {}),
+      // The browser renders this page inside the root layout, so a page that had to render alone
+      // stays server-only, as a nested `_404` does.
+      ...(wraps && chain === undefined ? { hydrate: false } : {}),
+      ...(layoutData === undefined ? {} : { layoutData }),
+      ...(headers !== undefined ? { headers } : {}),
       ...(nonce === undefined ? {} : { nonce }),
       ...cspOption,
       ...preloadOf(routeId),
-      ...stylesOf(routeId),
+      // The build keys stylesheets by route, so a page inside the root layout links the whole-app one.
+      ...(chain === undefined ? stylesOf(routeId) : stylesFrom(options.styles)),
       ...prerenderedHandover,
       ...titleOption,
-    })
+    }
+    if (chain === undefined) return renderPageResult(statusPage)
+    try {
+      return await renderPageResult(statusPage)
+    } catch {
+      // A layout that fails to render leaves the status page alone, never a second error.
+      return renderTerminalStatus(status, req, extraHeaders, nonce)
+    }
   }
 
   const renderStatusSignal = async (
@@ -737,6 +919,7 @@ export function createPageRequestExecutor<Env = unknown>(
     env: Env,
     signal: StatusSignal,
     personalized: boolean,
+    layouts?: LayoutChainSource,
   ): Promise<PageResponse> => {
     const { status, headers } = signal[STATUS_SIGNAL]
     if (req.headers.get(DATA_HEADER) !== null) {
@@ -750,7 +933,7 @@ export function createPageRequestExecutor<Env = unknown>(
     }
     const nonce = await resolveNonce(req, env)
     if (headers === undefined && !personalized) {
-      return renderTerminalStatus(status, pathOf(req), undefined, nonce)
+      return renderTerminalStatus(status, req, undefined, nonce, layouts)
     }
     const documentHeaders = new Headers(headers)
     if (headers !== undefined) {
@@ -758,7 +941,7 @@ export function createPageRequestExecutor<Env = unknown>(
     }
     // A cookie queued before the signal makes the status page specific to this visitor.
     if (personalized) documentHeaders.set("cache-control", PRIVATE_NO_STORE)
-    return renderTerminalStatus(status, pathOf(req), documentHeaders, nonce)
+    return renderTerminalStatus(status, req, documentHeaders, nonce, layouts)
   }
 
   const reportLoaderError = (
@@ -789,8 +972,12 @@ export function createPageRequestExecutor<Env = unknown>(
     assemblyCache: RenderAssemblyCache | undefined,
     responseHeaders: Record<string, string> | undefined,
     personalized: boolean,
+    serverComponents?: import("../server-components/types.ts").ComponentState,
   ): Promise<PageResponse> => {
-    if (isStatusSignal(data)) return renderStatusSignal(req, env, data, personalized)
+    // Every layout loader settled before the page rendered, so a status or error page can reuse them.
+    const settled: LayoutChainSource = async (_page, count) =>
+      settledLayouts(layoutModules, layoutData, count)
+    if (isStatusSignal(data)) return renderStatusSignal(req, env, data, personalized, settled)
     if (isControlFlow(data)) return data
     if (req.headers.get(DATA_HEADER) !== null) {
       const pageSplit = prepareDeferred(data)
@@ -809,7 +996,7 @@ export function createPageRequestExecutor<Env = unknown>(
         ...(boundarySplit === undefined ? [] : boundarySplit.deferred),
       ]
       const payload =
-        layoutData === undefined && boundarySplit === undefined
+        layoutData === undefined && boundarySplit === undefined && serverComponents === undefined
           ? pageSplit.forClient
           : {
               v: 1 as const,
@@ -817,6 +1004,7 @@ export function createPageRequestExecutor<Env = unknown>(
               layoutData: layoutSplits.map((split) => split.forClient),
               retained: layoutRetained,
               ...(boundarySplit === undefined ? {} : { boundaries: boundarySplit.forClient }),
+              ...(serverComponents === undefined ? {} : { serverComponents }),
             }
       if (allDeferred.length === 0) {
         return Response.json(payload ?? null, { headers: DATA_RESPONSE_HEADERS })
@@ -832,9 +1020,11 @@ export function createPageRequestExecutor<Env = unknown>(
     const nonce = options.nonce === undefined ? undefined : await resolveNonce(req, env)
     const { chain, head } = resolveChainAndHead(
       layoutModules,
+      layoutData,
       mod,
       {
         data,
+        pageData: data,
         params,
         origin: originOf(req),
         ...(nonce === undefined ? {} : { nonce }),
@@ -853,6 +1043,8 @@ export function createPageRequestExecutor<Env = unknown>(
         path: pathOf(req),
         search: searchChainOf(layoutModules, mod, req),
         matchChain: matchChainOf(route.layoutIds, layoutModules, route.id, mod),
+        ...(serverComponents === undefined ? {} : { serverComponents }),
+        ...(progressiveActionData.has(req) ? { actionData: progressiveActionData.get(req) } : {}),
         hydrate: mod.hydrate !== false,
         ...(layoutData !== undefined ? { layoutData } : {}),
         ...(boundaryStates !== undefined ? { boundaries: boundaryStates } : {}),
@@ -882,12 +1074,21 @@ export function createPageRequestExecutor<Env = unknown>(
         ...(assemblyCache === undefined ? {} : { assemblyCache }),
       })
     } catch (err) {
-      if (isStatusSignal(err)) return renderStatusSignal(req, env, err, personalized)
+      if (isStatusSignal(err)) return renderStatusSignal(req, env, err, personalized, settled)
       if (isControlFlow(err)) throw err
       reportLoaderError(route, req, { ...params }, err)
       const errorId = boundaryFor(route, err)
       if (errorId === undefined) throw err
-      return renderError(route, errorId, withDuplicateInstanceHint(err), personalized, nonce)
+      options.logBoundaryError?.(err, req)
+      return renderError(
+        req,
+        route,
+        errorId,
+        withDuplicateInstanceHint(err),
+        personalized,
+        nonce,
+        settled,
+      )
     }
   }
 
@@ -899,11 +1100,13 @@ export function createPageRequestExecutor<Env = unknown>(
     params: Record<string, string>,
     err: unknown,
     personalized: boolean,
+    layouts?: LayoutChainSource,
   ): Promise<PageResponse> => {
     if (isControlFlow(err)) throw err
     reportLoaderError(route, req, params, err)
     const errorId = boundaryFor(route, err)
     if (errorId === undefined) throw err
+    options.logBoundaryError?.(err, req)
     if (req.headers.get(DATA_HEADER) !== null) {
       return new Response("Internal Server Error", {
         status: 500,
@@ -911,11 +1114,13 @@ export function createPageRequestExecutor<Env = unknown>(
       })
     }
     return renderError(
+      req,
       route,
       errorId,
       withDuplicateInstanceHint(err),
       personalized,
       options.nonce === undefined ? undefined : await resolveNonce(req, env),
+      layouts,
     )
   }
 
@@ -946,8 +1151,9 @@ export function createPageRequestExecutor<Env = unknown>(
     }
     const mod = await page.load()
     const nonce = options.nonce === undefined ? undefined : await resolveNonce(req, env)
-    const { chain, head } = resolveChainAndHead(layoutModules, mod, {
+    const { chain, head } = resolveChainAndHead(layoutModules, layoutData, mod, {
       data: null,
+      pageData: null,
       params,
       origin: originOf(req),
       ...(nonce === undefined ? {} : { nonce }),
@@ -1018,17 +1224,17 @@ export function createPageRequestExecutor<Env = unknown>(
   }
 
   const renderNotFound = async (
-    request: Request,
-    env: Env,
-    path?: string,
+    c: PageRouteContext<Env>,
+    controls: PageResponseControls,
   ): Promise<PageResponse> => {
     const page = manifest.statusPages?.["404"] ?? manifest.notFound
-    if (page === undefined) return renderTerminalStatus(404, path)
+    if (page === undefined) return renderTerminalStatus(404, c.req)
     return renderTerminalStatus(
       404,
-      path,
+      c.req,
       undefined,
-      options.nonce === undefined ? undefined : await resolveNonce(request, env),
+      options.nonce === undefined ? undefined : await resolveNonce(c.req, c.env),
+      rootLayoutsFor(c, controls),
     )
   }
 
@@ -1084,8 +1290,19 @@ export function createPageRequestExecutor<Env = unknown>(
       }
 
       return withResponseControls(async (c, controls) => {
-        if (is404Fallback && !prerenderedSet.has(urlPartsFor(c.req).pathname)) {
-          return renderNotFound(c.req, c.env, pathOf(c.req))
+        const componentRuntime = options.serverComponents
+        const componentOwner = componentRuntime?.owns(route.id) === true
+        let componentRequest:
+          | import("../server-components/protocol.ts").ComponentRequest
+          | undefined
+        try {
+          componentRequest = componentRuntime?.classify(c.req, route.id)
+        } catch (error) {
+          return componentRuntime!.failure(error)
+        }
+        if (componentOwner || componentRequest !== undefined) controls.personalize()
+        if (!componentOwner && is404Fallback && !prerenderedSet.has(urlPartsFor(c.req).pathname)) {
+          return renderNotFound(c, controls)
         }
         const mod = await route.load()
         const draft = await draftFlag(c.req)
@@ -1097,6 +1314,7 @@ export function createPageRequestExecutor<Env = unknown>(
         let layoutModules: LoadedLayoutModules | undefined
         let layoutRetained: readonly number[] = []
         let responseHeaders: Record<string, string> | undefined
+        let componentState: import("../server-components/types.ts").ComponentState | undefined
         const requestApi = apiFor(c)
         let run: LayoutRun | undefined
         try {
@@ -1111,13 +1329,21 @@ export function createPageRequestExecutor<Env = unknown>(
             set: controls.scope(PAGE_SCOPE),
           }
           if (route.middlewareIds !== undefined) await runMiddleware(route, ctx, controls)
-          run = await runLayoutChain(route, ctx, controls, retainContextOf(c.req))
+          run = await runLayoutChain(
+            route,
+            ctx,
+            controls,
+            componentOwner ? undefined : retainContextOf(c.req),
+          )
           layoutModules = run.modules
           layoutRetained = run.retained
-          const boundaryDefinitions = [
-            ...run.modules.flatMap((layout) => layout.boundaries ?? []),
-            ...(mod.boundaries ?? []),
-          ]
+          const boundaryDefinitions =
+            componentRequest === undefined
+              ? [
+                  ...run.modules.flatMap((layout) => layout.boundaries ?? []),
+                  ...(mod.boundaries ?? []),
+                ]
+              : []
           if (boundaryDefinitions.length > 0) boundaryDescriptors(boundaryDefinitions)
           const effectiveSearch = searchChainOf(run.modules, mod, c.req)
           const boundaryBatch =
@@ -1149,6 +1375,34 @@ export function createPageRequestExecutor<Env = unknown>(
                 : await Promise.all([pageResult, run.pending, staticBoundaryPromise])
           data = pageData
           layoutData = run.layoutData
+          if (componentOwner) {
+            for (let i = 0; i < (layoutData?.length ?? 0); i++) {
+              const outcome = layoutData?.[i]
+              if (isControlFlow(outcome) || isStatusSignal(outcome))
+                throw tagLayoutError(outcome, route.layoutIds[i] as string)
+            }
+          }
+          if (componentRequest !== undefined && (isControlFlow(data) || isStatusSignal(data)))
+            return componentRuntime!.failure(data)
+          if (componentOwner && !isControlFlow(data) && !isStatusSignal(data)) {
+            const componentContext = Object.create(
+              c,
+              Object.getOwnPropertyDescriptors({
+                ...ctx,
+                search: effectiveSearch,
+                signal:
+                  c.signal === undefined ? c.req.signal : AbortSignal.any([c.signal, c.req.signal]),
+                data,
+                layoutData: layoutData ?? [],
+              }),
+            )
+            componentState = await componentRuntime!.execute(
+              route.id,
+              componentContext,
+              componentRequest,
+              options.nonce === undefined ? undefined : await resolveNonce(c.req, c.env),
+            )
+          }
           if (boundaryBatch !== undefined) {
             const streamed = { ...boundaryBatch.initial, ...(staticBoundaries ?? {}) }
             for (const entry of boundaryBatch.pending) {
@@ -1164,6 +1418,7 @@ export function createPageRequestExecutor<Env = unknown>(
           // by the same boundary as one.
           responseHeaders = controls.documentHeaders()
         } catch (err) {
+          if (componentRequest !== undefined) return componentRuntime!.failure(err)
           if (isStatusSignal(err)) {
             return (
               (await renderRouteNotFound(
@@ -1174,10 +1429,27 @@ export function createPageRequestExecutor<Env = unknown>(
                 err,
                 run,
                 controls.personalized,
-              )) ?? renderStatusSignal(c.req, c.env, err, controls.personalized)
+              )) ??
+              renderStatusSignal(c.req, c.env, err, controls.personalized, leadingLayouts(run, err))
             )
           }
-          return renderLoaderFailure(route, c.req, c.env, c.params, err, controls.personalized)
+          return renderLoaderFailure(
+            route,
+            c.req,
+            c.env,
+            c.params,
+            err,
+            controls.personalized,
+            leadingLayouts(run, err),
+          )
+        }
+        if (componentRequest !== undefined && componentState !== undefined) {
+          const answer = componentRuntime!.response(componentState, componentRequest)
+          const headers = new Headers(answer.headers)
+          for (const [name, value] of Object.entries(responseHeaders ?? {}))
+            if (name !== "cache-control" && name !== "content-type" && name !== "vary")
+              headers.set(name, value)
+          return new Response(answer.body, { status: answer.status, headers })
         }
         if (isStatusSignal(data)) {
           const nested = await renderRouteNotFound(
@@ -1205,6 +1477,7 @@ export function createPageRequestExecutor<Env = unknown>(
           layoutModules === undefined ? undefined : assemblyCacheFor(mod, layoutModules),
           responseHeaders,
           controls.personalized,
+          componentState,
         )
       })
     },
@@ -1232,11 +1505,11 @@ export function createPageRequestExecutor<Env = unknown>(
           set: controls.scope(ACTION_SCOPE),
         }
         const isDataRequest = c.req.headers.get(DATA_HEADER) !== null
-        let layoutModules: LoadedLayoutModules
+        let gated: GatedLayouts
         let result: unknown
         try {
           if (route.middlewareIds !== undefined) await runMiddleware(route, actionContext, controls)
-          layoutModules = await runLayoutGates(route, actionContext, controls)
+          gated = await runLayoutGates(route, actionContext, controls)
           result = await mod.action(actionContext)
         } catch (err) {
           if (isControlFlow(err)) return err
@@ -1271,26 +1544,136 @@ export function createPageRequestExecutor<Env = unknown>(
             },
           })
         }
-        const search = searchChainOf(layoutModules, mod, c.req)
-        const data = mod.loader
-          ? await mod.loader({
-              params: c.params,
-              request: c.req,
-              req: c.req,
-              api: requestApi,
-              env: c.env,
-              draft,
-              search,
-              set: controls.scope(PAGE_SCOPE),
+        if (options.serverComponents?.owns(route.id)) {
+          if (options.rerenderOwnerGET === undefined) throw new Error("component_contract")
+          const actionHeaders = controls.documentHeaders()
+          if (controls.progressiveRedirect(c.req)) {
+            // Relative, so a browser behind a TLS terminator stays on its own scheme. A `//` path
+            // would read as another host, so that one keeps the absolute URL.
+            const { pathname, search } = new URL(c.req.url)
+            const location = pathname.startsWith("//") ? c.req.url : pathname + search
+            return new Response(null, {
+              status: 303,
+              headers: { ...actionHeaders, location, "cache-control": PRIVATE_NO_STORE },
+            })
+          }
+          const headers = new Headers(c.req.headers)
+          for (const name of [
+            DATA_HEADER,
+            RETAIN_HEADER,
+            NAV_FROM_HEADER,
+            "x-nifra-component",
+            "content-type",
+            "content-length",
+            "transfer-encoding",
+          ])
+            headers.delete(name)
+          const cookie = controls.progressiveCookies(c.req)
+          if (cookie) headers.set("cookie", cookie)
+          else headers.delete("cookie")
+          const request = new Request(c.req.url, {
+            method: "GET",
+            headers,
+            signal:
+              c.signal === undefined ? c.req.signal : AbortSignal.any([c.signal, c.req.signal]),
+          })
+          progressiveActionData.set(request, actionResult)
+          try {
+            const response = await options.rerenderOwnerGET(request, c)
+            const merged = new Headers(response.headers)
+            for (const [name, value] of Object.entries(actionHeaders ?? {}))
+              if (!merged.has(name)) merged.set(name, value)
+            merged.set("cache-control", PRIVATE_NO_STORE)
+            return new Response(response.body, {
+              status: response.status,
+              statusText: response.statusText,
+              headers: merged,
             })
-          : null
-        const responseHeaders = controls.documentHeaders()
+          } finally {
+            progressiveActionData.delete(request)
+          }
+        }
+        const layoutModules = gated.modules
+        const search = searchChainOf(layoutModules, mod, c.req)
+        let run: LayoutRun | undefined
+        let data: unknown
+        let responseHeaders: Record<string, string> | undefined
+        // The ordinary layout loaders run now, after the mutation, as a GET of this page would.
+        try {
+          run = await runLayoutChain(route, actionContext, controls, undefined, gated)
+          const pageResult = mod.loader
+            ? mod.loader({
+                params: c.params,
+                request: c.req,
+                req: c.req,
+                api: requestApi,
+                env: c.env,
+                draft,
+                search,
+                set: controls.scope(PAGE_SCOPE),
+              })
+            : null
+          const [pageData] =
+            run.pending === undefined
+              ? ([await pageResult] as const)
+              : await Promise.all([pageResult, run.pending])
+          data = pageData
+          responseHeaders = controls.documentHeaders()
+        } catch (err) {
+          if (isStatusSignal(err)) {
+            return (
+              (await renderRouteNotFound(
+                c.req,
+                c.env,
+                route,
+                c.params,
+                err,
+                run,
+                controls.personalized,
+              )) ??
+              renderStatusSignal(c.req, c.env, err, controls.personalized, leadingLayouts(run, err))
+            )
+          }
+          return renderLoaderFailure(
+            route,
+            c.req,
+            c.env,
+            c.params,
+            err,
+            controls.personalized,
+            leadingLayouts(run, err),
+          )
+        }
+        // The re-render answers a returned redirect or status the way the page's GET does.
+        if (isStatusSignal(data))
+          return (
+            (await renderRouteNotFound(
+              c.req,
+              c.env,
+              route,
+              c.params,
+              data,
+              run,
+              controls.personalized,
+            )) ??
+            renderStatusSignal(c.req, c.env, data, controls.personalized, leadingLayouts(run, data))
+          )
+        if (isControlFlow(data)) return data
+        const layoutData = run.layoutData
+        const layoutProps: { layoutData?: Exclude<typeof layoutData, undefined> } = {}
+        if (layoutData !== undefined) {
+          layoutProps.layoutData = layoutData
+          // The page now shows what a layout loaded for this visitor.
+          responseHeaders = { ...responseHeaders, ...PRIVATE_PAGE_HEADERS }
+        }
         const nonce = options.nonce === undefined ? undefined : await resolveNonce(c.req, c.env)
         const { chain, head } = resolveChainAndHead(
           layoutModules,
+          layoutData,
           mod,
           {
             data,
+            pageData: data,
             params: c.params,
             origin: originOf(c.req),
             ...(nonce === undefined ? {} : { nonce }),
@@ -1310,6 +1693,7 @@ export function createPageRequestExecutor<Env = unknown>(
           search,
           matchChain: matchChainOf(route.layoutIds, layoutModules, route.id, mod),
           hydrate: mod.hydrate !== false,
+          ...layoutProps,
           ...preloadOf(route.id),
           ...stylesOf(route.id),
           ...prerenderedHandover,
@@ -1324,7 +1708,7 @@ export function createPageRequestExecutor<Env = unknown>(
       const match = matchNotFoundScope?.(pathOf(c.req)) ?? null
       const target = match === null ? undefined : notFoundTargets[Number(match.routeId)]
       if (match === null || target === undefined) {
-        return renderNotFound(c.req, c.env, pathOf(c.req))
+        return renderNotFound(c, controls)
       }
       const params: Record<string, string> = {}
       for (let i = 0; i < target.names.length; i++) {
@@ -1333,7 +1717,7 @@ export function createPageRequestExecutor<Env = unknown>(
       const mod = await target.page.load()
       const draft = await draftFlag(c.req)
       if (draft) controls.personalize()
-      let run: LayoutRun
+      let run: LayoutRun | undefined
       try {
         const ctx: LoaderContext = {
           params,
@@ -1352,9 +1736,23 @@ export function createPageRequestExecutor<Env = unknown>(
         await run.pending
       } catch (err) {
         if (isStatusSignal(err)) {
-          return renderStatusSignal(c.req, c.env, err, controls.personalized)
+          return renderStatusSignal(
+            c.req,
+            c.env,
+            err,
+            controls.personalized,
+            leadingLayouts(run, err),
+          )
         }
-        return renderLoaderFailure(target.route, c.req, c.env, params, err, controls.personalized)
+        return renderLoaderFailure(
+          target.route,
+          c.req,
+          c.env,
+          params,
+          err,
+          controls.personalized,
+          leadingLayouts(run, err),
+        )
       }
       return renderNestedNotFound(
         c.req,