react-bun-ssr 0.1.1 → 0.3.0

package/framework/runtime/render.tsx

@@ -1,6 +1,7 @@
 import {
   Children,
   cloneElement,
+  Fragment,
   isValidElement,
   Suspense,
   use,
@@ -29,6 +30,50 @@ import {
   createPageAppTree,
 } from "./tree";
 
+function isTitleElement(node: ReactNode): node is ReactElement {
+  return isValidElement(node) && node.type === "title";
+}
+
+function isMetaElement(node: ReactNode): node is ReactElement {
+  return isValidElement(node) && node.type === "meta";
+}
+
+function getMetaDedupeKey(node: ReactNode): string | null {
+  if (!isMetaElement(node)) {
+    return null;
+  }
+
+  const props = node.props as {
+    name?: string;
+    property?: string;
+    httpEquiv?: string;
+    charSet?: string;
+    itemProp?: string;
+  };
+
+  if (typeof props.name === "string" && props.name.length > 0) {
+    return `name:${props.name}`;
+  }
+
+  if (typeof props.property === "string" && props.property.length > 0) {
+    return `property:${props.property}`;
+  }
+
+  if (typeof props.httpEquiv === "string" && props.httpEquiv.length > 0) {
+    return `httpEquiv:${props.httpEquiv}`;
+  }
+
+  if (typeof props.itemProp === "string" && props.itemProp.length > 0) {
+    return `itemProp:${props.itemProp}`;
+  }
+
+  if (props.charSet !== undefined) {
+    return "charSet";
+  }
+
+  return null;
+}
+
 export function renderPageApp(modules: RouteModuleBundle, payload: RenderPayload): string {
   return renderToString(createPageAppTree(modules, payload));
 }
@@ -84,6 +129,27 @@ function normalizeTitleChildren(node: ReactNode): ReactNode {
   return cloneElement(node, undefined, nextChildren);
 }
 
+function expandHeadNodes(node: ReactNode): ReactNode[] {
+  if (Array.isArray(node)) {
+    return node.flatMap(value => expandHeadNodes(value));
+  }
+
+  if (node === null || node === undefined || typeof node === "boolean") {
+    return [];
+  }
+
+  if (!isValidElement(node)) {
+    return [node];
+  }
+
+  if (node.type === Fragment) {
+    const props = node.props as { children?: ReactNode };
+    return Children.toArray(props.children).flatMap(child => expandHeadNodes(child));
+  }
+
+  return [node];
+}
+
 function moduleHeadToElements(moduleValue: RouteModule, payload: RenderPayload, keyPrefix: string): ReactNode[] {
   const tags: ReactNode[] = [];
 
@@ -99,7 +165,7 @@ function moduleHeadToElements(moduleValue: RouteModule, payload: RenderPayload,
     if (typeof headResult === "string") {
       tags.push(<title key={`${keyPrefix}:title`}>{headResult}</title>);
     } else if (headResult !== null && headResult !== undefined) {
-      const nodes = Children.toArray(normalizeTitleChildren(headResult));
+      const nodes = expandHeadNodes(normalizeTitleChildren(headResult));
       for (let index = 0; index < nodes.length; index += 1) {
         const node = nodes[index]!;
         if (isValidElement(node)) {
@@ -122,11 +188,37 @@ function moduleHeadToElements(moduleValue: RouteModule, payload: RenderPayload,
 }
 
 export function collectHeadElements(modules: RouteModuleBundle, payload: RenderPayload): ReactNode[] {
-  return [
+  const elements = [
     ...moduleHeadToElements(modules.root, payload, "root"),
     ...modules.layouts.flatMap((layout, index) => moduleHeadToElements(layout, payload, `layout:${index}`)),
     ...moduleHeadToElements(modules.route, payload, "route"),
   ];
+
+  let lastTitleIndex = -1;
+  const lastMetaIndexes = new Map<string, number>();
+  for (let index = 0; index < elements.length; index += 1) {
+    if (isTitleElement(elements[index])) {
+      lastTitleIndex = index;
+    }
+
+    const metaKey = getMetaDedupeKey(elements[index]);
+    if (metaKey) {
+      lastMetaIndexes.set(metaKey, index);
+    }
+  }
+
+  return elements.filter((element, index) => {
+    if (isTitleElement(element)) {
+      return lastTitleIndex === -1 || index === lastTitleIndex;
+    }
+
+    const metaKey = getMetaDedupeKey(element);
+    if (metaKey) {
+      return lastMetaIndexes.get(metaKey) === index;
+    }
+
+    return true;
+  });
 }
 
 export function collectHeadMarkup(modules: RouteModuleBundle, payload: RenderPayload): string {
@@ -135,7 +227,7 @@ export function collectHeadMarkup(modules: RouteModuleBundle, payload: RenderPay
 }
 
 function buildDevReloadClientScript(version: number): string {
-  return `(() => {\n  const currentVersion = ${version};\n  const source = new EventSource('/__rbssr/events');\n\n  source.addEventListener('reload', event => {\n    const nextVersion = Number(event.data);\n    if (Number.isFinite(nextVersion) && nextVersion > currentVersion) {\n      location.reload();\n    }\n  });\n\n  window.addEventListener('beforeunload', () => {\n    source.close();\n  });\n})();`;
+  return `(() => {\n  let currentVersion = ${version};\n  let closed = false;\n  let socket;\n\n  const connect = () => {\n    socket = new WebSocket(\`\${location.protocol === 'https:' ? 'wss' : 'ws'}://\${location.host}/__rbssr/ws\`);\n\n    socket.addEventListener('message', event => {\n      try {\n        const payload = JSON.parse(String(event.data));\n        const nextVersion = Number(payload?.token);\n        if (Number.isFinite(nextVersion) && nextVersion > currentVersion) {\n          currentVersion = nextVersion;\n          location.reload();\n        }\n      } catch {\n        // ignore malformed dev reload payloads\n      }\n    });\n\n    socket.addEventListener('close', () => {\n      if (!closed) {\n        setTimeout(connect, 150);\n      }\n    });\n  };\n\n  connect();\n\n  window.addEventListener('beforeunload', () => {\n    closed = true;\n    socket?.close();\n  });\n})();`;
 }
 
 function buildDeferredBootstrapScript(): string {
@@ -154,6 +246,34 @@ function createVersionedCssHrefs(assets: HydrationDocumentAssets): string[] {
   return assets.css.map(href => withVersionQuery(href, assets.devVersion));
 }
 
+interface DocumentRenderState {
+  cssHrefs: string[];
+  deferredBootstrapScript: string;
+  devReloadScript?: string;
+  payloadJson: string;
+  routerSnapshotJson: string;
+  versionedScript?: string;
+}
+
+function createDocumentRenderState(options: {
+  assets: HydrationDocumentAssets;
+  payload: RenderPayload;
+  routerSnapshot: ClientRouterSnapshot;
+}): DocumentRenderState {
+  return {
+    cssHrefs: createVersionedCssHrefs(options.assets),
+    deferredBootstrapScript: buildDeferredBootstrapScript(),
+    devReloadScript: typeof options.assets.devVersion === "number"
+      ? buildDevReloadClientScript(options.assets.devVersion)
+      : undefined,
+    payloadJson: safeJsonSerialize(options.payload),
+    routerSnapshotJson: safeJsonSerialize(options.routerSnapshot),
+    versionedScript: options.assets.script
+      ? withVersionQuery(options.assets.script, options.assets.devVersion)
+      : undefined,
+  };
+}
+
 export function createManagedHeadMarkup(options: {
   headMarkup: string;
   assets: HydrationDocumentAssets;
@@ -190,9 +310,13 @@ function HtmlDocument(options: {
   routerSnapshot: ClientRouterSnapshot;
   deferredSettleEntries: DeferredSettleEntry[];
 }): ReactElement {
-  const { appTree, payload, assets, managedHeadElements, deferredSettleEntries } = options;
-  const versionedScript = assets.script ? withVersionQuery(assets.script, assets.devVersion) : undefined;
-  const cssLinks = createVersionedCssHrefs(assets).map((versionedHref, index) => {
+  const { appTree, managedHeadElements, deferredSettleEntries } = options;
+  const documentState = createDocumentRenderState({
+    assets: options.assets,
+    payload: options.payload,
+    routerSnapshot: options.routerSnapshot,
+  });
+  const cssLinks = documentState.cssHrefs.map((versionedHref, index) => {
     return <link key={`css:${index}:${versionedHref}`} rel="stylesheet" href={versionedHref} />;
   });
 
@@ -210,24 +334,24 @@ function HtmlDocument(options: {
         <div id="rbssr-root">{appTree}</div>
         <script
           dangerouslySetInnerHTML={{
-            __html: buildDeferredBootstrapScript(),
+            __html: documentState.deferredBootstrapScript,
           }}
         />
         <script
           id={RBSSR_PAYLOAD_SCRIPT_ID}
           type="application/json"
-          dangerouslySetInnerHTML={{ __html: safeJsonSerialize(payload) }}
+          dangerouslySetInnerHTML={{ __html: documentState.payloadJson }}
         />
         <script
           id={RBSSR_ROUTER_SCRIPT_ID}
           type="application/json"
-          dangerouslySetInnerHTML={{ __html: safeJsonSerialize(options.routerSnapshot) }}
+          dangerouslySetInnerHTML={{ __html: documentState.routerSnapshotJson }}
         />
-        {versionedScript ? <script type="module" src={versionedScript} /> : null}
-        {typeof assets.devVersion === "number" ? (
+        {documentState.versionedScript ? <script type="module" src={documentState.versionedScript} /> : null}
+        {documentState.devReloadScript ? (
           <script
             dangerouslySetInnerHTML={{
-              __html: buildDevReloadClientScript(assets.devVersion),
+              __html: documentState.devReloadScript,
             }}
           />
         ) : null}
@@ -296,22 +420,26 @@ export function renderDocument(options: {
   headMarkup: string;
   routerSnapshot: ClientRouterSnapshot;
 }): string {
-  const { appMarkup, payload, assets, headMarkup, routerSnapshot } = options;
-  const versionedScript = assets.script ? withVersionQuery(assets.script, assets.devVersion) : undefined;
+  const { appMarkup, headMarkup } = options;
+  const documentState = createDocumentRenderState({
+    assets: options.assets,
+    payload: options.payload,
+    routerSnapshot: options.routerSnapshot,
+  });
   const managedHeadMarkup = createManagedHeadMarkup({
     headMarkup,
-    assets,
+    assets: options.assets,
   });
 
-  const payloadScript = `<script id="${RBSSR_PAYLOAD_SCRIPT_ID}" type="application/json">${safeJsonSerialize(payload)}</script>`;
-  const routerScript = `<script id="${RBSSR_ROUTER_SCRIPT_ID}" type="application/json">${safeJsonSerialize(routerSnapshot)}</script>`;
-  const entryScript = versionedScript
-    ? `<script type="module" src="${Bun.escapeHTML(versionedScript)}"></script>`
+  const payloadScript = `<script id="${RBSSR_PAYLOAD_SCRIPT_ID}" type="application/json">${documentState.payloadJson}</script>`;
+  const routerScript = `<script id="${RBSSR_ROUTER_SCRIPT_ID}" type="application/json">${documentState.routerSnapshotJson}</script>`;
+  const entryScript = documentState.versionedScript
+    ? `<script type="module" src="${Bun.escapeHTML(documentState.versionedScript)}"></script>`
     : "";
-  const devScript = typeof assets.devVersion === "number"
-    ? `<script>${buildDevReloadClientScript(assets.devVersion)}</script>`
+  const devScript = documentState.devReloadScript
+    ? `<script>${documentState.devReloadScript}</script>`
     : "";
-  const deferredBootstrapScript = `<script>${buildDeferredBootstrapScript()}</script>`;
+  const deferredBootstrapScript = `<script>${documentState.deferredBootstrapScript}</script>`;
 
   return `<!doctype html>
 <html lang="en">

package/framework/runtime/route-api.ts

@@ -19,5 +19,5 @@ export type {
 export { defer, json, redirect } from "./helpers";
 export { isRouteErrorResponse, notFound, routeError } from "./route-errors";
 export { Link, type LinkProps } from "./link";
-export { useRouter, type Router, type RouterNavigateOptions } from "./router";
+export { useRouter, type Router, type RouterNavigateInfo, type RouterNavigateListener, type RouterNavigateOptions } from "./router";
 export { Outlet, useLoaderData, useParams, useRequestUrl, useRouteError } from "./tree";

package/framework/runtime/router.ts

@@ -1,10 +1,36 @@
-import { useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { goBack, goForward, reloadPage } from "./navigation-api";
 
 export interface RouterNavigateOptions {
   scroll?: boolean;
 }
 
+export interface RouterNavigateInfo {
+  from: string;
+  to: string;
+  nextUrl: URL;
+  status: number;
+  kind: "page" | "not_found" | "catch" | "error";
+  redirected: boolean;
+  prefetched: boolean;
+}
+
+export type RouterNavigateListener = (nextUrl: URL) => void;
+
+export function notifyRouterNavigateListeners(
+  listeners: readonly RouterNavigateListener[],
+  nextUrl: URL,
+): void {
+  for (const listener of listeners) {
+    try {
+      listener(nextUrl);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn("[rbssr] router onNavigate listener failed", error);
+    }
+  }
+}
+
 export interface Router {
   push(href: string, options?: RouterNavigateOptions): void;
   replace(href: string, options?: RouterNavigateOptions): void;
@@ -12,6 +38,7 @@ export interface Router {
   back(): void;
   forward(): void;
   refresh(): void;
+  onNavigate(listener: RouterNavigateListener): void;
 }
 
 function toAbsoluteHref(href: string): string {
@@ -28,9 +55,10 @@ const SERVER_ROUTER: Router = {
   back: () => undefined,
   forward: () => undefined,
   refresh: () => undefined,
+  onNavigate: () => undefined,
 };
 
-function createClientRouter(): Router {
+function createClientRouter(onNavigate: Router["onNavigate"]): Router {
   return {
     push: (href, options) => {
       const absoluteHref = toAbsoluteHref(href);
@@ -69,12 +97,55 @@ function createClientRouter(): Router {
     refresh: () => {
       reloadPage();
     },
+    onNavigate,
   };
 }
 
 export function useRouter(): Router {
+  const navigateListenersRef = useRef<RouterNavigateListener[]>([]);
+  const didEmitInitialNavigationRef = useRef(false);
+  navigateListenersRef.current = [];
+
+  const onNavigate = useCallback<Router["onNavigate"]>((listener) => {
+    navigateListenersRef.current.push(listener);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    if (!didEmitInitialNavigationRef.current) {
+      didEmitInitialNavigationRef.current = true;
+      notifyRouterNavigateListeners(
+        navigateListenersRef.current,
+        new URL(window.location.href),
+      );
+    }
+
+    let unsubscribe: () => void = () => undefined;
+    let active = true;
+
+    void import("./client-runtime")
+      .then(runtime => {
+        if (!active) {
+          return;
+        }
+
+        unsubscribe = runtime.subscribeToNavigation((info) => {
+          notifyRouterNavigateListeners(navigateListenersRef.current, info.nextUrl);
+        });
+      })
+      .catch(() => undefined);
+
+    return () => {
+      active = false;
+      unsubscribe();
+    };
+  }, []);
+
   return useMemo(
-    () => (typeof window === "undefined" ? SERVER_ROUTER : createClientRouter()),
-    [],
+    () => (typeof window === "undefined" ? SERVER_ROUTER : createClientRouter(onNavigate)),
+    [onNavigate],
   );
 }

package/framework/runtime/server.ts

@@ -28,6 +28,7 @@ import type {
   ServerRuntimeOptions,
   TransitionChunk,
   TransitionDeferredChunk,
+  TransitionDocumentChunk,
   TransitionInitialChunk,
   TransitionRedirectChunk,
 } from "./types";
@@ -226,6 +227,11 @@ function applyConfiguredHeaders(options: {
     }
 
     for (const [name, value] of Object.entries(rule.headers)) {
+      if (value === null) {
+        headers.delete(name);
+        continue;
+      }
+
       headers.set(name, value);
     }
   }
@@ -330,6 +336,7 @@ async function loadRootOnlyModule(
   options: {
     cacheBustKey?: string;
     serverBytecode: boolean;
+    devSourceImports?: boolean;
   },
 ): Promise<RouteModule> {
   return loadRouteModule(rootModulePath, options);
@@ -436,17 +443,25 @@ function toRedirectChunk(location: string, status: number): TransitionRedirectCh
   };
 }
 
+function toDocumentChunk(location: string, status: number): TransitionDocumentChunk {
+  return {
+    type: "document",
+    location,
+    status,
+  };
+}
+
 function createTransitionStream(options: {
   initialChunk?: TransitionInitialChunk;
-  redirectChunk?: TransitionRedirectChunk;
+  controlChunk?: TransitionRedirectChunk | TransitionDocumentChunk;
   deferredSettleEntries?: DeferredSettleEntry[];
   sanitizeDeferredError: (message: string) => string;
 }): ReadableStream<Uint8Array> {
   return new ReadableStream<Uint8Array>({
     async start(controller) {
       try {
-        if (options.redirectChunk) {
-          controller.enqueue(toTransitionChunkLine(options.redirectChunk));
+        if (options.controlChunk) {
+          controller.enqueue(toTransitionChunkLine(options.controlChunk));
           controller.close();
           return;
         }
@@ -489,74 +504,6 @@ function createTransitionStream(options: {
   });
 }
 
-function createDevReloadEventStream(options: {
-  getVersion: () => number;
-  subscribe?: (listener: (version: number) => void) => (() => void) | void;
-}): Response {
-  const encoder = new TextEncoder();
-  let interval: ReturnType<typeof setInterval> | undefined;
-  let unsubscribe: (() => void) | void;
-  let cleanup: (() => void) | undefined;
-
-  const stream = new ReadableStream<Uint8Array>({
-    start(controller) {
-      let closed = false;
-
-      cleanup = (): void => {
-        if (closed) {
-          return;
-        }
-        closed = true;
-        if (interval) {
-          clearInterval(interval);
-          interval = undefined;
-        }
-        if (typeof unsubscribe === "function") {
-          unsubscribe();
-          unsubscribe = undefined;
-        }
-      };
-
-      const sendChunk = (chunk: string): void => {
-        if (closed) {
-          return;
-        }
-        try {
-          controller.enqueue(encoder.encode(chunk));
-        } catch {
-          cleanup?.();
-        }
-      };
-
-      const sendReload = (version: number): void => {
-        sendChunk(`event: reload\ndata: ${version}\n\n`);
-      };
-
-      sendChunk(": connected\n\n");
-      sendReload(options.getVersion());
-
-      unsubscribe = options.subscribe?.(nextVersion => {
-        sendReload(nextVersion);
-      });
-
-      interval = setInterval(() => {
-        sendChunk(": ping\n\n");
-      }, 15_000);
-    },
-    cancel() {
-      cleanup?.();
-    },
-  });
-
-  return new Response(stream, {
-    headers: {
-      "content-type": "text/event-stream; charset=utf-8",
-      "cache-control": "no-cache, no-transform",
-      connection: "keep-alive",
-    },
-  });
-}
-
 export function createServer(
   config: FrameworkConfig = {},
   runtimeOptions: ServerRuntimeOptions = {},
@@ -569,8 +516,10 @@ export function createServer(
   const pendingAdapterCache = new Map<string, Promise<BunRouteAdapter>>();
 
   const getAdapterKey = (activeConfig: ResolvedConfig): string => {
-    const reloadVersion = dev ? runtimeOptions.reloadVersion?.() ?? 0 : 0;
-    return `${normalizeSlashes(activeConfig.routesDir)}|${dev ? "dev" : "prod"}|${reloadVersion}`;
+    const routeVersion = dev
+      ? runtimeOptions.routeManifestVersion?.() ?? runtimeOptions.reloadVersion?.() ?? 0
+      : 0;
+    return `${normalizeSlashes(activeConfig.routesDir)}|${dev ? "dev" : "prod"}|${routeVersion}`;
   };
 
   const trimAdapterCache = (): void => {
@@ -601,10 +550,9 @@ export function createServer(
       return pending;
     }
 
-    const reloadVersion = dev ? runtimeOptions.reloadVersion?.() ?? 0 : 0;
     const routesHash = stableHash(normalizeSlashes(activeConfig.routesDir));
     const projectionRootDir = dev
-      ? path.resolve(activeConfig.cwd, ".rbssr/generated/router-projection", `dev-${routesHash}-v${reloadVersion}`)
+      ? path.resolve(activeConfig.cwd, ".rbssr/generated/router-projection", `dev-${routesHash}`)
       : path.resolve(activeConfig.cwd, ".rbssr/generated/router-projection", "prod", routesHash);
 
     const buildAdapterPromise = createBunRouteAdapter({
@@ -626,8 +574,6 @@ export function createServer(
   };
 
   const fetchHandler = async (request: Request): Promise<Response> => {
-    await runtimeOptions.onBeforeRequest?.();
-
     const runtimePaths = runtimeOptions.resolvePaths?.() ?? {};
     const activeConfig: ResolvedConfig = {
       ...resolvedConfig,
@@ -647,13 +593,6 @@ export function createServer(
       });
     };
 
-    if (dev && url.pathname === "/__rbssr/events") {
-      return finalize(createDevReloadEventStream({
-        getVersion: () => runtimeOptions.reloadVersion?.() ?? 0,
-        subscribe: runtimeOptions.subscribeReload,
-      }), "internal-dev");
-    }
-
     if (dev && url.pathname === "/__rbssr/version") {
       const version = runtimeOptions.reloadVersion?.() ?? 0;
       return finalize(new Response(String(version), {
@@ -692,8 +631,23 @@ export function createServer(
       return finalize(publicResponse, "static");
     }
 
+    await runtimeOptions.onBeforeRequest?.();
+
     const routeAdapter = await getRouteAdapter(activeConfig);
-    const cacheBustKey = dev ? String(runtimeOptions.reloadVersion?.() ?? Date.now()) : undefined;
+    const devCacheBustKey = dev ? String(runtimeOptions.reloadVersion?.() ?? 0) : undefined;
+    const nodeEnv: "development" | "production" = dev ? "development" : "production";
+    const routeModuleLoadOptions = {
+      cacheBustKey: devCacheBustKey,
+      serverBytecode: activeConfig.serverBytecode,
+      devSourceImports: false,
+      nodeEnv,
+    };
+    const requestModuleLoadOptions = {
+      cacheBustKey: undefined,
+      serverBytecode: activeConfig.serverBytecode,
+      devSourceImports: dev,
+      nodeEnv,
+    };
     const routeAssetsById = resolveAllRouteAssets({
       dev,
       runtimeOptions,
@@ -728,8 +682,7 @@ export function createServer(
       const transitionPageMatch = routeAdapter.matchPage(targetUrl.pathname);
       if (!transitionPageMatch) {
         const rootModule = await loadRootOnlyModule(activeConfig.rootModule, {
-          cacheBustKey,
-          serverBytecode: activeConfig.serverBytecode,
+          ...routeModuleLoadOptions,
         });
         const fallbackRoute: RouteModule = {
           default: () => null,
@@ -769,11 +722,10 @@ export function createServer(
           rootFilePath: activeConfig.rootModule,
           layoutFiles: transitionPageMatch.route.layoutFiles,
           routeFilePath: transitionPageMatch.route.filePath,
-          cacheBustKey,
-          serverBytecode: activeConfig.serverBytecode,
+          ...routeModuleLoadOptions,
         }),
-        loadGlobalMiddleware(activeConfig.middlewareFile, cacheBustKey),
-        loadNestedMiddleware(transitionPageMatch.route.middlewareFiles, cacheBustKey),
+        loadGlobalMiddleware(activeConfig.middlewareFile, requestModuleLoadOptions),
+        loadNestedMiddleware(transitionPageMatch.route.middlewareFiles, requestModuleLoadOptions),
       ]);
       const moduleMiddleware = extractRouteMiddleware(routeModules.route);
       const routeAssets = routeAssetsById[transitionPageMatch.route.id] ?? null;
@@ -862,7 +814,7 @@ export function createServer(
           const location = redirectResponse.headers.get("location");
           if (location) {
             const stream = createTransitionStream({
-              redirectChunk: toRedirectChunk(location, redirectResponse.status),
+              controlChunk: toRedirectChunk(location, redirectResponse.status),
               sanitizeDeferredError: message => sanitizeErrorMessage(message, !dev),
             });
             return finalize(toTransitionStreamResponse(stream, redirectResponse.headers), "internal-transition");
@@ -952,17 +904,18 @@ export function createServer(
       const redirectLocation = middlewareResponse.headers.get("location");
       if (redirectLocation && isRedirectStatus(middlewareResponse.status)) {
         const stream = createTransitionStream({
-          redirectChunk: toRedirectChunk(redirectLocation, middlewareResponse.status),
+          controlChunk: toRedirectChunk(redirectLocation, middlewareResponse.status),
           sanitizeDeferredError: message => sanitizeErrorMessage(message, !dev),
         });
         return finalize(toTransitionStreamResponse(stream, middlewareResponse.headers), "internal-transition");
       }
 
       if (!transitionInitialChunk) {
-        return finalize(
-          new Response("Transition fallback required for non-streamable response.", { status: 409 }),
-          "internal-transition",
-        );
+        const stream = createTransitionStream({
+          controlChunk: toDocumentChunk(targetUrl.toString(), middlewareResponse.status),
+          sanitizeDeferredError: message => sanitizeErrorMessage(message, !dev),
+        });
+        return finalize(toTransitionStreamResponse(stream, middlewareResponse.headers), "internal-transition");
       }
 
       const stream = createTransitionStream({
@@ -975,7 +928,7 @@ export function createServer(
 
     const apiMatch = routeAdapter.matchApi(url.pathname);
     if (apiMatch) {
-      const apiModule = await loadApiRouteModule(apiMatch.route.filePath, cacheBustKey);
+      const apiModule = await loadApiRouteModule(apiMatch.route.filePath, requestModuleLoadOptions);
       const methodHandler = getMethodHandler(apiModule as Record<string, unknown>, request.method);
 
       if (typeof methodHandler !== "function") {
@@ -997,8 +950,8 @@ export function createServer(
       };
 
       const [globalMiddleware, routeMiddleware] = await Promise.all([
-        loadGlobalMiddleware(activeConfig.middlewareFile, cacheBustKey),
-        loadNestedMiddleware(apiMatch.route.middlewareFiles, cacheBustKey),
+        loadGlobalMiddleware(activeConfig.middlewareFile, requestModuleLoadOptions),
+        loadNestedMiddleware(apiMatch.route.middlewareFiles, requestModuleLoadOptions),
       ]);
       const allMiddleware = [...globalMiddleware, ...routeMiddleware];
       let apiPhase: RouteErrorPhase = "middleware";
@@ -1062,8 +1015,7 @@ export function createServer(
 
     if (!pageMatch) {
       const rootModule = await loadRootOnlyModule(activeConfig.rootModule, {
-        cacheBustKey,
-        serverBytecode: activeConfig.serverBytecode,
+        ...routeModuleLoadOptions,
       });
       const fallbackRoute: RouteModule = {
         default: () => null,
@@ -1105,11 +1057,10 @@ export function createServer(
         rootFilePath: activeConfig.rootModule,
         layoutFiles: pageMatch.route.layoutFiles,
         routeFilePath: pageMatch.route.filePath,
-        cacheBustKey,
-        serverBytecode: activeConfig.serverBytecode,
+        ...routeModuleLoadOptions,
       }),
-      loadGlobalMiddleware(activeConfig.middlewareFile, cacheBustKey),
-      loadNestedMiddleware(pageMatch.route.middlewareFiles, cacheBustKey),
+      loadGlobalMiddleware(activeConfig.middlewareFile, requestModuleLoadOptions),
+      loadNestedMiddleware(pageMatch.route.middlewareFiles, requestModuleLoadOptions),
     ]);
     const moduleMiddleware = extractRouteMiddleware(routeModules.route);