@reckona/mreact-router 0.0.202 → 0.0.203

package/src/render.ts

@@ -16,6 +16,7 @@ import {
   installQueryAsyncStorage,
   runWithQueryClient,
   type DehydratedQueryClient,
+  type DehydrateOptions,
   type QueryClient,
 } from "@reckona/mreact-query";
 import {
@@ -35,9 +36,9 @@ import {
 } from "./client-route-inference.js";
 import {
   hydrationMarkerParts,
+  routeMarkerParts,
   routeIdForPath,
   withHydrationMarkers,
-  withRouteMarkers,
 } from "./navigation-runtime.js";
 import { assetPath } from "./assets.js";
 import { escapeHtmlAttribute } from "@reckona/mreact-shared/html-escape";
@@ -202,6 +203,7 @@ export interface RenderAppRequestOptions {
   clientStylesByFile?: ReadonlyMap<string, readonly string[]>;
   clientStyles?: ReadonlyMap<string, readonly string[]>;
   define?: UserConfig["define"] | undefined;
+  dehydrateOptions?: DehydrateOptions | undefined;
   env?: unknown;
   importPolicy?: AppRouterImportPolicy | undefined;
   instrumentation?: RouterInstrumentation | undefined;
@@ -243,7 +245,12 @@ export interface RenderAppRequestRuntimeOptions extends RenderAppRequestOptions
    * dependent. Call it only after draining the response body, because a
    * streamed render can read headers while its deferred parts resolve.
    */
-  renderSignals?: { headerDependent: () => boolean } | undefined;
+  renderSignals?:
+    | {
+        headerDependent: () => boolean;
+        strictTransportSecurity: () => string | undefined;
+      }
+    | undefined;
   serverRenderArtifactLoader?: AppRouterServerRenderArtifactLoader | undefined;
 }
 
@@ -1000,6 +1007,7 @@ async function renderAppRequestInternal(
   let trackedRequest: TrackedHeaderRequest | undefined;
   let sourceUsesRequestInput = true;
   let invalidConfiguredHsts = false;
+  let renderedStrictTransportSecurity: string | undefined;
   return (await withRouteCacheContext(options.routeCache, async () => {
   try {
     if (matched.route.kind === "asset") {
@@ -1076,7 +1084,13 @@ async function renderAppRequestInternal(
     finishRenderTimingPhase(timing, phaseStartedAt, "sourceAnalysisMs");
     const cachePolicy = originalAnalysis.cachePolicy;
     const navigationScript = options.navigationScripts?.get(matched.route.path);
-    const cacheKey = routeCacheKey(options.appDir, matched.route.path, url);
+    const navigationRequest = isNavigationRequest(options.request);
+    const cacheKey = routeCacheKey(
+      options.appDir,
+      matched.route.path,
+      url,
+      navigationRequest ? "navigation" : "document",
+    );
     const mayUseRouteCache =
       !sourceUsesRequestInput &&
       (cachePolicy === undefined
@@ -1176,7 +1190,7 @@ async function renderAppRequestInternal(
       clientRoute,
       props: {
         params: matched.params,
-        request: { url: options.request.url },
+        request: { url: url.pathname },
       },
       routePath: matched.route.path,
       script: clientScript,
@@ -1265,16 +1279,11 @@ async function renderAppRequestInternal(
               script: clientScript,
               props: {
                 params: matched.params,
-                request: { url: options.request.url },
+                request: { url: url.pathname },
                 data,
               },
             })
-          : isNavigationRequest(options.request)
-            ? withRouteMarkers({
-                html: pageHtml,
-                routePath: matched.route.path,
-              })
-            : pageHtml;
+          : withServerOnlyRouteMarkers(pageHtml, matched.route.path, options.request);
         let html = await runWithQueryClient(queryClient, () =>
           applyLayouts({
             appDir: options.appDir,
@@ -1324,7 +1333,7 @@ async function renderAppRequestInternal(
           html,
           originalAnalysis.authIncludesClaims ? currentAuthClaims() : undefined,
         );
-        html = injectQueryState(html, dehydrate(queryClient));
+        html = injectQueryState(html, dehydrate(queryClient, options.dehydrateOptions));
         const response = withOptionalActionCookie(
           htmlResponse(
             applyActionHtmlReplacements(
@@ -1346,6 +1355,7 @@ async function renderAppRequestInternal(
           preparedActions.csrfToken,
           preparedActions.csrfTokenIsNew === true,
         );
+        appendNavigationVary(response.headers);
         emitRenderTiming(options, timing, response.status);
         return response;
       }
@@ -1412,10 +1422,12 @@ async function renderAppRequestInternal(
           data: streamDataPromise,
           define: options.define,
           loadingFile,
+          markerRequest: options.request,
           pageFile: matched.route.file,
           params: matched.params,
           queryClient,
           request: appRequest,
+          requestUrl: url.pathname,
           trackedRequest,
           routePath: matched.route.path,
           routeScripts: options.clientScripts,
@@ -1437,6 +1449,7 @@ async function renderAppRequestInternal(
           preparedActions.csrfToken,
           preparedActions.csrfTokenIsNew === true,
         );
+        appendNavigationVary(response.headers);
         emitRenderTiming(options, timing, response.status);
         return response;
       }
@@ -1452,7 +1465,9 @@ async function renderAppRequestInternal(
         appDir: options.appDir,
         assetBaseUrl: options.assetBaseUrl,
         pageFile: matched.route.file,
+        markerRequest: options.request,
         props,
+        requestUrl: url.pathname,
         routePath: matched.route.path,
         routeScripts: options.clientScripts,
         serverModules: options.serverModules,
@@ -1475,6 +1490,7 @@ async function renderAppRequestInternal(
         preparedActions.csrfToken,
         preparedActions.csrfTokenIsNew === true,
       );
+      appendNavigationVary(response.headers);
       emitRenderTiming(options, timing, response.status);
       return response;
     }
@@ -1552,16 +1568,11 @@ async function renderAppRequestInternal(
           script: clientScript,
           props: {
             params: matched.params,
-            request: { url: options.request.url },
+            request: { url: url.pathname },
             data,
           },
         })
-      : isNavigationRequest(options.request)
-        ? withRouteMarkers({
-            html: pageHtml,
-            routePath: matched.route.path,
-          })
-        : pageHtml;
+      : withServerOnlyRouteMarkers(pageHtml, matched.route.path, options.request);
     phaseStartedAt = renderTimingPhaseStartedAt(timing);
     let html = await runWithQueryClient(queryClient, () =>
       applyLayouts({
@@ -1615,7 +1626,7 @@ async function renderAppRequestInternal(
       html,
       originalAnalysis.authIncludesClaims ? currentAuthClaims() : undefined,
     );
-    html = injectQueryState(html, dehydrate(queryClient));
+    html = injectQueryState(html, dehydrate(queryClient, options.dehydrateOptions));
 
     const response = withOptionalActionCookie(
       htmlResponse(
@@ -1636,9 +1647,11 @@ async function renderAppRequestInternal(
       preparedActions.csrfToken,
       preparedActions.csrfTokenIsNew === true,
     );
+    appendNavigationVary(response.headers);
 
     const effectiveCachePolicy = cachePolicy ?? activeRouteCacheContext()?.cachePolicy;
     const configuredHsts = configuredHstsHeader(metadata?.security);
+    renderedStrictTransportSecurity = configuredHsts;
     invalidConfiguredHsts = hasInvalidConfiguredHsts(metadata?.security);
 
     const finalResponse = preparedActions.hasFormActions
@@ -1737,6 +1750,7 @@ async function renderAppRequestInternal(
       const tracked = trackedRequest;
       options.renderSignals.headerDependent = () =>
         sourceUsesRequestInput || invalidConfiguredHsts || (tracked?.requestDependent() ?? true);
+      options.renderSignals.strictTransportSecurity = () => renderedStrictTransportSecurity;
     }
   }
   })).value;
@@ -1966,6 +1980,44 @@ function isNavigationRequest(request: Request): boolean {
   return request.headers.get("x-mreact-navigation") === "1";
 }
 
+function withServerOnlyRouteMarkers(html: string, routePath: string, request: Request): string {
+  const marker = serverOnlyRouteMarkerParts(routePath, request);
+  return marker === undefined ? html : `${marker.prefix}${html}${marker.suffix}`;
+}
+
+function serverOnlyRouteMarkerParts(
+  routePath: string,
+  request: Request,
+): { prefix: string; suffix: string } | undefined {
+  if (request.headers.get("x-mreact-prerender-variant-capture") === "1") {
+    return prerenderVariantMarkerParts(routePath);
+  }
+  return isNavigationRequest(request) ? routeMarkerParts(routePath) : undefined;
+}
+
+export function prerenderVariantMarkerParts(routePath: string): {
+  prefix: string;
+  suffix: string;
+} {
+  const routeId = routeIdForPath(routePath);
+  return {
+    prefix: `<!--mreact-route-variant-start:${routeId}-->`,
+    suffix: `<!--mreact-route-variant-end:${routeId}-->`,
+  };
+}
+
+function appendNavigationVary(headers: Headers): void {
+  const vary = headers.get("vary");
+  if (
+    vary
+      ?.split(",")
+      .some((value) => value.trim().toLowerCase() === "x-mreact-navigation") === true
+  ) {
+    return;
+  }
+  headers.append("vary", "x-mreact-navigation");
+}
+
 function isNavigationRouteCacheReloadRequest(request: Request): boolean {
   return (
     isNavigationRequest(request) && request.headers.get("x-mreact-navigation-cache") === "reload"
@@ -3399,8 +3451,10 @@ function runServerStreamModule(
     appDir: string;
     assetBaseUrl?: string | undefined;
     clientRouteInferenceCache: ClientRouteInferenceCache;
+    markerRequest: Request;
     pageFile: string;
     props: ServerComponentProps;
+    requestUrl: string;
     routePath: string;
     routeScripts?: ReadonlyMap<string, string> | undefined;
     clientRoute: boolean;
@@ -3445,11 +3499,11 @@ function runServerStreamModule(
           script: options.script,
           props: {
             params: options.props.params,
-            request: { url: options.props.request.url },
+            request: { url: options.requestUrl },
             data: options.props.data,
           },
         })
-      : undefined;
+      : serverOnlyRouteMarkerParts(options.routePath, options.markerRequest);
 
     sink.append("<!DOCTYPE html>");
     sink.append(
@@ -3667,10 +3721,12 @@ async function runServerStreamModuleWithLoading(
     data: Promise<unknown>;
     define?: UserConfig["define"] | undefined;
     loadingFile: string;
+    markerRequest: Request;
     pageFile: string;
     params: RouteParams;
     queryClient: QueryClient;
     request: Request;
+    requestUrl: string;
     trackedRequest?: TrackedHeaderRequest | undefined;
     routePath: string;
     routeScripts?: ReadonlyMap<string, string> | undefined;
@@ -3717,10 +3773,10 @@ async function runServerStreamModuleWithLoading(
         script: options.script,
         props: {
           params: options.params,
-          request: { url: options.request.url },
+          request: { url: options.requestUrl },
         },
       })
-    : undefined;
+    : serverOnlyRouteMarkerParts(options.routePath, options.markerRequest);
 
   return renderToReadableStream((sink) => {
     sink.append("<!DOCTYPE html>");

package/src/serve.ts

@@ -1,4 +1,5 @@
 import type { Server } from "node:http";
+import type { DehydrateOptions } from "@reckona/mreact-query";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import type { BuiltPrerenderedRoute } from "./build.js";
@@ -61,6 +62,8 @@ import {
   isCurrentPrerenderedRoute,
   isVisitorDependentResponse,
   PRERENDERED_ROUTE_SCHEMA_VERSION,
+  replayedPrerenderedRouteHeaders,
+  storedPrerenderedRouteHeaders,
 } from "./prerender-entry.js";
 
 interface BuiltRuntimeCacheEntry {
@@ -99,6 +102,7 @@ let warnedImplicitHostTrust = false;
  * Configures rendering a request against a built app-router output directory.
  */
 export interface RenderBuiltAppRequestOptions {
+  dehydrateOptions?: DehydrateOptions | undefined;
   outDir: string;
   importPolicy?: AppRouterImportPolicy | undefined;
   instrumentation?: RouterInstrumentation | undefined;
@@ -156,6 +160,7 @@ export interface BuiltAppRuntimePreloadStrategy {
  * Configures the Node HTTP server used to serve a built app-router output.
  */
 export interface StartServerOptions {
+  dehydrateOptions?: DehydrateOptions | undefined;
   outDir: string;
   port: number;
   hostname?: string;
@@ -480,7 +485,7 @@ async function renderBuiltAppRequestWithRuntime(
             normalizedPath,
             options.prerenderStore,
           );
-    const prerenderedResponse = prerenderedRouteResponse(prerendered, request.method);
+    const prerenderedResponse = prerenderedRouteResponse(prerendered, request);
 
     if (prerenderedResponse !== undefined) {
       return prerenderedResponse;
@@ -515,7 +520,7 @@ async function renderBuiltAppRequestWithRuntime(
             normalizedPath,
             options.prerenderStore,
           );
-    const prerenderedResponse = prerenderedRouteResponse(prerendered, request.method);
+    const prerenderedResponse = prerenderedRouteResponse(prerendered, request);
 
     if (prerenderedResponse !== undefined) {
       emitBuiltRenderTiming(options, request, timing, prerenderedResponse.status);
@@ -553,21 +558,27 @@ async function renderBuiltAppRequestWithRuntime(
 
 function prerenderedRouteResponse(
   prerendered: BuiltPrerenderedRoute | undefined,
-  method: string,
+  request: Request,
 ): Response | undefined {
   if (!isCurrentPrerenderedRoute(prerendered)) {
     return undefined;
   }
 
-  if (method === "HEAD") {
+  const navigation = request.headers.get("x-mreact-navigation") === "1";
+  const html = navigation ? prerendered.navigationHtml : prerendered.html;
+  if (html === undefined) {
+    return undefined;
+  }
+
+  if (request.method === "HEAD") {
     return new Response(null, {
-      headers: prerendered.headers,
+      headers: replayedPrerenderedRouteHeaders(prerendered, request),
       status: prerendered.status,
     });
   }
 
-  return htmlResponse(prerendered.html, {
-    headers: prerendered.headers,
+  return htmlResponse(html, {
+    headers: replayedPrerenderedRouteHeaders(prerendered, request),
     status: prerendered.status,
   });
 }
@@ -709,6 +720,7 @@ export async function startServer(
     trustForwardedProto: options.trustForwardedProto,
     render: (request) =>
       runtime.render(request, {
+        dehydrateOptions: options.dehydrateOptions,
         instrumentation: options.instrumentation,
         logger: options.logger,
         onResponse: options.onResponse,
@@ -927,6 +939,7 @@ function builtRenderAppRequestOptions(
     clientScripts: options.runtime.clientScripts,
     clientStylesByFile: options.runtime.clientStylesByFile,
     clientStyles: options.runtime.clientStyles,
+    dehydrateOptions: options.dehydrateOptions,
     importPolicy: {
       ...options.importPolicy,
       allowedSourceDirs: options.runtime.allowedSourceDirs,
@@ -976,7 +989,11 @@ async function renderAndCachePrerenderWithLock(
   options: RenderBuiltAppRequestOptions & { runtime: BuiltRuntime },
   path: string,
 ): Promise<Response> {
-  const existing = options.runtime.prerenderLocks.get(path);
+  const lockKey =
+    options.request.headers.get("x-mreact-navigation") === "1"
+      ? `${path}\0navigation`
+      : path;
+  const existing = options.runtime.prerenderLocks.get(lockKey);
 
   if (existing !== undefined) {
     const result = await existing;
@@ -988,12 +1005,12 @@ async function renderAndCachePrerenderWithLock(
   }
 
   const task = runPrerenderRegeneration(options, path);
-  options.runtime.prerenderLocks.set(path, task);
+  options.runtime.prerenderLocks.set(lockKey, task);
 
   try {
     return cloneResponse((await task).response);
   } finally {
-    options.runtime.prerenderLocks.delete(path);
+    options.runtime.prerenderLocks.delete(lockKey);
   }
 }
 
@@ -1001,15 +1018,17 @@ async function runPrerenderRegeneration(
   options: RenderBuiltAppRequestOptions & { runtime: BuiltRuntime },
   path: string,
 ): Promise<{ response: Response; shareable: boolean }> {
+  const lockKey =
+    options.request.headers.get("x-mreact-navigation") === "1"
+      ? `${path}\0navigation`
+      : path;
   const regenerate = async () => {
     const stored = await readPrerenderedRoute(options.runtime, path, options.prerenderStore);
+    const storedResponse = prerenderedRouteResponse(stored, options.request);
 
-    if (stored !== undefined) {
+    if (storedResponse !== undefined) {
       return {
-        response: htmlResponse(stored.html, {
-          headers: stored.headers,
-          status: stored.status,
-        }),
+        response: storedResponse,
         shareable: true,
       };
     }
@@ -1018,7 +1037,10 @@ async function runPrerenderRegeneration(
     // render that depended on this visitor's request headers must not become
     // one; it is returned to the caller without being stored. The signal starts
     // closed so that a render which never reports back is not stored either.
-    const renderSignals = { headerDependent: () => true };
+    const renderSignals = {
+      headerDependent: () => true,
+      strictTransportSecurity: () => undefined as string | undefined,
+    };
     const response = await renderBuiltDynamicResponse({ ...options, renderSignals });
 
     if (!response.ok) {
@@ -1039,21 +1061,34 @@ async function runPrerenderRegeneration(
       };
     }
 
+    const navigation = options.request.headers.get("x-mreact-navigation") === "1";
+    if (navigation && stored === undefined) {
+      return {
+        response: htmlResponse(body, {
+          headers: response.headers,
+          status: response.status,
+        }),
+        shareable: false,
+      };
+    }
+
     return {
       response: await cacheRegeneratedPrerenderedRoute(
-          options.runtime,
-          path,
-          body,
-          response,
-          options.prerenderStore,
-        ),
+        options.runtime,
+        path,
+        body,
+        response,
+        renderSignals.strictTransportSecurity(),
+        options.prerenderStore,
+        navigation ? stored : undefined,
+      ),
       shareable: true,
     };
   };
 
   return options.prerenderStore?.withLock === undefined
     ? await regenerate()
-    : await options.prerenderStore.withLock(path, regenerate);
+    : await options.prerenderStore.withLock(lockKey, regenerate);
 }
 
 async function applyBuiltPrerenderInvalidations(
@@ -1079,19 +1114,21 @@ async function cacheRegeneratedPrerenderedRoute(
   path: string,
   body: string,
   response: Response,
+  strictTransportSecurity: string | undefined,
   store: AppRouterPrerenderStore | undefined,
+  existing?: BuiltPrerenderedRoute | undefined,
 ): Promise<Response> {
-  const headers: Record<string, string> = {};
-
-  response.headers.forEach((value, key) => {
-    headers[key] = value;
-  });
-  const entry: BuiltPrerenderedRoute = {
-    headers,
-    html: body,
-    schemaVersion: PRERENDERED_ROUTE_SCHEMA_VERSION,
-    status: response.status,
-  };
+  const headers = storedPrerenderedRouteHeaders(response.headers);
+  const entry: BuiltPrerenderedRoute =
+    existing === undefined
+      ? {
+          headers,
+          html: body,
+          schemaVersion: PRERENDERED_ROUTE_SCHEMA_VERSION,
+          status: response.status,
+          ...(strictTransportSecurity === undefined ? {} : { strictTransportSecurity }),
+        }
+      : { ...existing, navigationHtml: body };
   runtime.prerenderedRoutes.set(path, entry);
   await store?.set(path, entry);