@nifrajs/web 4.0.2 → 5.0.0

package/dist/internal/page-execution.js

@@ -7,7 +7,7 @@ import { isDraftEnabled } from "../draft.js";
 import { routeTags } from "../isr.js";
 import { createMatcher, DATA_HEADER, NAV_FROM_HEADER, REDIRECT_HEADER, RETAIN_HEADER, REVALIDATE_HEADER, STATUS_HEADER, } from "../router.js";
 import { searchOf, searchOfChain } from "../search.js";
-import { mergeHeads, resolveMeta } from "./head-merge.js";
+import { mergeHeads, resolveChainMeta } from "./head-merge.js";
 import { EMPTY_RETAIN, isControlFlow, isResponseResult, isStatusSignal, layoutErrorId, renderPageResult, STATUS_SIGNAL, STATUS_TEXT, scopeParams, tagLayoutError, withDuplicateInstanceHint, } from "./render-document.js";
 import { urlPartsFor } from "./request-url.js";
 import { ACTION_SCOPE, DATA_RESPONSE_HEADERS, MIDDLEWARE_SCOPE, PAGE_SCOPE, PageResponseControls, PRIVATE_NO_STORE, PRIVATE_PAGE_HEADERS, privateOutcome, varyOnDataHeader, } from "./response-controls.js";
@@ -107,6 +107,8 @@ function appTarget(location, requestUrl) {
  */
 export function createPageRequestExecutor(options) {
     const { adapter, manifest, clientEntry, api } = options;
+    // The action result is request-local; a browser cannot manufacture this handoff.
+    const progressiveActionData = new WeakMap();
     // 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);
@@ -165,9 +167,7 @@ export function createPageRequestExecutor(options) {
         return chunks ? { preload: chunks } : {};
     };
     const resolveNonce = (request, env) => options.nonce === undefined ? undefined : options.nonce({ request, env });
-    const stylesOf = (id) => {
-        const perRoute = options.routeStyles?.[id];
-        const styles = perRoute ?? options.styles;
+    const stylesFrom = (styles) => {
         if (styles === undefined || styles.length === 0)
             return {};
         return {
@@ -175,6 +175,7 @@ export function createPageRequestExecutor(options) {
             ...(cssLoading === "deferred" ? { cssLoading } : {}),
         };
     };
+    const stylesOf = (id) => 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) => {
@@ -194,11 +195,32 @@ export function createPageRequestExecutor(options) {
         retained: [],
         pending: undefined,
     };
-    /** Run layout loaders, awaiting gates before starting the page loader and retaining only safe data. */
-    const runLayoutChain = async (route, ctx, controls, retain) => {
+    /**
+     * 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, index, loader, ctx) => {
+        let value;
+        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]);
+        }
+        // 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]);
+        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, ctx, controls, retain, gated) => {
         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 };
         }
@@ -216,6 +238,7 @@ export function createPageRequestExecutor(options) {
                     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]);
                 }
                 if (keep) {
@@ -229,12 +252,7 @@ export function createPageRequestExecutor(options) {
                 set: controls.scope(i),
             };
             if (modules[i]?.gate === true) {
-                try {
-                    results[i] = await loader(scoped);
-                }
-                catch (err) {
-                    throw tagLayoutError(err, route.layoutIds[i]);
-                }
+                results[i] = gated === undefined ? await runGate(route, i, loader, scoped) : gated.gates[i];
                 continue;
             }
             const layoutId = route.layoutIds[i];
@@ -271,22 +289,18 @@ export function createPageRequestExecutor(options) {
     /** Run only authorization gates before an action; ordinary layout data runs after a native action. */
     const runLayoutGates = async (route, ctx, controls) => {
         const modules = await loadLayoutModules(route);
+        const gates = [];
         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]);
-            }
+            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. */
     const runMiddleware = async (route, ctx, controls) => {
@@ -400,13 +414,10 @@ export function createPageRequestExecutor(options) {
         }
         return mod.HydrateFallback ?? EMPTY_LEAF;
     };
-    const resolveChainAndHead = (layoutModules, page, metaArgs, leaf = page.default) => {
+    const resolveChainAndHead = (layoutModules, layoutData, page, metaArgs, leaf = page.default) => {
         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. */
     const matchChainOf = (layoutIds, layoutModules, pageId, page) => ({
@@ -444,34 +455,128 @@ export function createPageRequestExecutor(options) {
             return "/";
         }
     };
-    const renderError = async (route, errorId, err, personalized, nonce) => {
+    /** What a status or error page's `meta` receives: no route params, and its own data. */
+    const statusMetaArgs = (req, data, nonce) => nonce === undefined
+        ? { data, pageData: data, params: {}, origin: originOf(req) }
+        : { data, pageData: data, params: {}, origin: originOf(req), nonce };
+    const renderError = async (req, route, errorId, err, personalized, nonce, layouts) => {
         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(keptLayoutIds.map((id) => manifest.layouts[id].load().then((m) => m.default)));
-        const { default: errComp } = await (manifest.errors?.[errorId]).load();
+        const errorModule = await (manifest.errors?.[errorId]).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,
-        });
+        // 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, wrapped) => {
+            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].load().then((m) => m.default)));
+        return render([...layoutComponents, errorModule.default]);
+    };
+    /** The leading `count` layouts of `modules`, unless one of them answered with a status or redirect. */
+    const settledLayouts = (modules, layoutData, count) => {
+        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, err) => 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 renderTerminalStatus = async (status, path, extraHeaders, nonce) => {
+    const rootLayoutIds = manifest.layouts._layout === undefined ? [] : ["_layout"];
+    const rootMiddlewareIds = 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, controls) => async (page) => {
+        const entry = manifest.statusPages?.["404"] ?? manifest.notFound;
+        if (rootLayoutIds.length === 0 || entry === undefined)
+            return undefined;
+        const layoutsOnly = {
+            id: "_404",
+            pattern: "/*",
+            layoutIds: rootLayoutIds,
+            errorIds: [],
+            file: entry.file,
+            load: entry.load,
+        };
+        const route = rootMiddlewareIds.length === 0
+            ? layoutsOnly
+            : { ...layoutsOnly, middlewareIds: rootMiddlewareIds };
+        try {
+            const draft = await draftFlag(c.req);
+            if (draft)
+                controls.personalize();
+            const ctx = {
+                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, req, extraHeaders, nonce, layouts) => {
         const page = manifest.statusPages?.[String(status)] ?? manifest.notFound;
         if (page === undefined) {
             const headers = new Headers(extraHeaders);
@@ -479,31 +584,55 @@ export function createPageRequestExecutor(options) {
             return new Response(STATUS_TEXT[status] ?? "Error", { status, headers });
         }
         const routeId = manifest.statusPages?.[String(status)] !== undefined ? `_${status}` : "_404";
-        const loaded = (await page.load());
-        return renderPageResult({
+        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;
+        }
+        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 (req, env, signal, personalized) => {
+    const renderStatusSignal = async (req, env, signal, personalized, layouts) => {
         const { status, headers } = signal[STATUS_SIGNAL];
         if (req.headers.get(DATA_HEADER) !== null) {
             // Same URL as the status page, so it is never storable: a cache keyed on the URL alone would
@@ -516,7 +645,7 @@ export function createPageRequestExecutor(options) {
         }
         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) {
@@ -525,7 +654,7 @@ export function createPageRequestExecutor(options) {
         // 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 = (route, req, params, err) => {
         if (options.onLoaderError === undefined)
@@ -537,9 +666,11 @@ export function createPageRequestExecutor(options) {
             // A faulty reporter must never break error rendering.
         }
     };
-    const handleDataOrDocument = async (req, env, route, params, mod, data, layoutData, layoutModules, layoutRetained, boundaryStates, assemblyCache, responseHeaders, personalized) => {
+    const handleDataOrDocument = async (req, env, route, params, mod, data, layoutData, layoutModules, layoutRetained, boundaryStates, assemblyCache, responseHeaders, personalized, serverComponents) => {
+        // Every layout loader settled before the page rendered, so a status or error page can reuse them.
+        const settled = async (_page, count) => settledLayouts(layoutModules, layoutData, count);
         if (isStatusSignal(data))
-            return renderStatusSignal(req, env, data, personalized);
+            return renderStatusSignal(req, env, data, personalized, settled);
         if (isControlFlow(data))
             return data;
         if (req.headers.get(DATA_HEADER) !== null) {
@@ -557,7 +688,7 @@ export function createPageRequestExecutor(options) {
                 ...deferred,
                 ...(boundarySplit === undefined ? [] : boundarySplit.deferred),
             ];
-            const payload = layoutData === undefined && boundarySplit === undefined
+            const payload = layoutData === undefined && boundarySplit === undefined && serverComponents === undefined
                 ? pageSplit.forClient
                 : {
                     v: 1,
@@ -565,6 +696,7 @@ export function createPageRequestExecutor(options) {
                     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 });
@@ -577,8 +709,9 @@ export function createPageRequestExecutor(options) {
             });
         }
         const nonce = options.nonce === undefined ? undefined : await resolveNonce(req, env);
-        const { chain, head } = resolveChainAndHead(layoutModules, mod, {
+        const { chain, head } = resolveChainAndHead(layoutModules, layoutData, mod, {
             data,
+            pageData: data,
             params,
             origin: originOf(req),
             ...(nonce === undefined ? {} : { nonce }),
@@ -595,6 +728,8 @@ export function createPageRequestExecutor(options) {
                 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 } : {}),
@@ -622,31 +757,33 @@ export function createPageRequestExecutor(options) {
         }
         catch (err) {
             if (isStatusSignal(err))
-                return renderStatusSignal(req, env, err, personalized);
+                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);
         }
     };
     /** What a failed loader answers with, once a status signal has been ruled out. */
-    const renderLoaderFailure = async (route, req, env, params, err, personalized) => {
+    const renderLoaderFailure = async (route, req, env, params, err, personalized, layouts) => {
         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,
                 headers: { "content-type": "text/plain; charset=utf-8" },
             });
         }
-        return renderError(route, errorId, withDuplicateInstanceHint(err), personalized, options.nonce === undefined ? undefined : await resolveNonce(req, env));
+        return renderError(req, route, errorId, withDuplicateInstanceHint(err), personalized, options.nonce === undefined ? undefined : await resolveNonce(req, env), layouts);
     };
     /**
      * Render a nested `_404` inside its layouts. `layoutModules` and `layoutData` are exactly the
@@ -665,8 +802,9 @@ export function createPageRequestExecutor(options) {
         }
         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 }),
@@ -721,11 +859,11 @@ export function createPageRequestExecutor(options) {
         const kept = page.layoutIds.length;
         return renderNestedNotFound(req, env, id, page, params, run.modules.slice(0, kept), run.layoutData?.slice(0, kept), personalized, signal[STATUS_SIGNAL].headers);
     };
-    const renderNotFound = async (request, env, path) => {
+    const renderNotFound = async (c, controls) => {
         const page = manifest.statusPages?.["404"] ?? manifest.notFound;
         if (page === undefined)
-            return renderTerminalStatus(404, path);
-        return renderTerminalStatus(404, path, undefined, options.nonce === undefined ? undefined : await resolveNonce(request, env));
+            return renderTerminalStatus(404, c.req);
+        return renderTerminalStatus(404, c.req, undefined, options.nonce === undefined ? undefined : await resolveNonce(c.req, c.env), rootLayoutsFor(c, controls));
     };
     /**
      * Run a page handler with the request's `ctx.set`, sealed once the handler settles - whatever it
@@ -779,8 +917,19 @@ export function createPageRequestExecutor(options) {
                 return assemblySlot;
             };
             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;
+                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);
@@ -793,6 +942,7 @@ export function createPageRequestExecutor(options) {
                 let layoutModules;
                 let layoutRetained = [];
                 let responseHeaders;
+                let componentState;
                 const requestApi = apiFor(c);
                 let run;
                 try {
@@ -808,13 +958,15 @@ export function createPageRequestExecutor(options) {
                     };
                     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);
@@ -840,6 +992,25 @@ export function createPageRequestExecutor(options) {
                             : 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]);
+                        }
+                    }
+                    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) {
@@ -857,17 +1028,28 @@ export function createPageRequestExecutor(options) {
                     responseHeaders = controls.documentHeaders();
                 }
                 catch (err) {
+                    if (componentRequest !== undefined)
+                        return componentRuntime.failure(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));
+                        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);
+                    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(c.req, c.env, route, c.params, data, run, controls.personalized);
                     if (nested !== undefined)
                         return nested;
                 }
-                return handleDataOrDocument(c.req, c.env, route, c.params, mod, data, layoutData, layoutModules ?? (await loadLayoutModules(route)), layoutRetained, boundaryStates, layoutModules === undefined ? undefined : assemblyCacheFor(mod, layoutModules), responseHeaders, controls.personalized);
+                return handleDataOrDocument(c.req, c.env, route, c.params, mod, data, layoutData, layoutModules ?? (await loadLayoutModules(route)), layoutRetained, boundaryStates, layoutModules === undefined ? undefined : assemblyCacheFor(mod, layoutModules), responseHeaders, controls.personalized, componentState);
             });
         },
         post: (route) => withResponseControls(async (c, controls) => {
@@ -893,12 +1075,12 @@ export function createPageRequestExecutor(options) {
                 set: controls.scope(ACTION_SCOPE),
             };
             const isDataRequest = c.req.headers.get(DATA_HEADER) !== null;
-            let layoutModules;
+            let gated;
             let result;
             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) {
@@ -933,23 +1115,109 @@ export function createPageRequestExecutor(options) {
                     },
                 });
             }
+            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,
+                    });
+                }
+                finally {
+                    progressiveActionData.delete(request);
+                }
+            }
+            const layoutModules = gated.modules;
             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),
-                })
-                : null;
-            const responseHeaders = controls.documentHeaders();
+            let run;
+            let data;
+            let responseHeaders;
+            // 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]
+                    : 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 = {};
+            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, mod, {
+            const { chain, head } = resolveChainAndHead(layoutModules, layoutData, mod, {
                 data,
+                pageData: data,
                 params: c.params,
                 origin: originOf(c.req),
                 ...(nonce === undefined ? {} : { nonce }),
@@ -967,6 +1235,7 @@ export function createPageRequestExecutor(options) {
                 search,
                 matchChain: matchChainOf(route.layoutIds, layoutModules, route.id, mod),
                 hydrate: mod.hydrate !== false,
+                ...layoutProps,
                 ...preloadOf(route.id),
                 ...stylesOf(route.id),
                 ...prerenderedHandover,
@@ -980,7 +1249,7 @@ export function createPageRequestExecutor(options) {
             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 = {};
             for (let i = 0; i < target.names.length; i++) {
@@ -1010,9 +1279,9 @@ export function createPageRequestExecutor(options) {
             }
             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, c.env, target.id, target.page, params, run.modules, run.layoutData, controls.personalized);
         }),