diff --git a/packages/react-router-dom-v5-compat/package.json b/packages/react-router-dom-v5-compat/package.json
index 8d6224f0c7..f4f010eb0a 100644
--- a/packages/react-router-dom-v5-compat/package.json
+++ b/packages/react-router-dom-v5-compat/package.json
@@ -24,8 +24,10 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@remix-run/router": "workspace:*",
+    "@remix-run/server-runtime": "workspace:*",
     "history": "^5.3.0",
-    "react-router": "workspace:*"
+    "react-router": "workspace:*",
+    "turbo-stream": "^2.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8",
diff --git a/packages/react-router-dom-v5-compat/rollup.config.js b/packages/react-router-dom-v5-compat/rollup.config.js
index 37ef230b6a..efe827bc81 100644
--- a/packages/react-router-dom-v5-compat/rollup.config.js
+++ b/packages/react-router-dom-v5-compat/rollup.config.js
@@ -17,13 +17,7 @@ const { name, version } = require("./package.json");
 
 module.exports = function rollup() {
   const { ROOT_DIR, SOURCE_DIR, OUTPUT_DIR } = getBuildDirectories(name);
-  const ROUTER_DOM_SOURCE = path.join(
-    ROOT_DIR,
-    "packages",
-    "react-router-dom",
-    "(index|dom).ts*"
-  );
-  const ROUTER_DOM_COPY_DEST = path.join(SOURCE_DIR, "react-router-dom");
+  const RR_DOM_DIR = path.join(ROOT_DIR, "packages", "react-router-dom");
 
   // JS modules for bundlers
   let modules = [
@@ -45,7 +39,19 @@ module.exports = function rollup() {
       ],
       plugins: [
         copy({
-          targets: [{ src: ROUTER_DOM_SOURCE, dest: ROUTER_DOM_COPY_DEST }],
+          targets: [
+            {
+              src: path.join(RR_DOM_DIR, "(index|dom).ts*"),
+              dest: path.join(SOURCE_DIR, "react-router-dom"),
+            },
+            {
+              src: [
+                path.join(RR_DOM_DIR, "ssr", "*.ts*"),
+                "!" + path.join(RR_DOM_DIR, "ssr", "server.tsx"),
+              ],
+              dest: path.join(SOURCE_DIR, "react-router-dom", "ssr"),
+            },
+          ],
           // buildStart is not soon enough to run before the typescript plugin :/
           hook: "options",
           verbose: true,
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
index 1d4675396e..fedb5ccd00 100644
--- a/packages/react-router-dom/index.tsx
+++ b/packages/react-router-dom/index.tsx
@@ -6,14 +6,14 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import type {
   DataRouteObject,
-  FutureConfig,
+  FutureConfig as RenderFutureConfig,
   Location,
   NavigateOptions,
   NavigationType,
   Navigator,
   RelativeRoutingType,
   RouteObject,
-  RouterProviderProps,
+  RouterProviderProps as MemoryRouterProviderProps,
   To,
 } from "react-router";
 import {
@@ -65,6 +65,7 @@ import {
   UNSAFE_warning as warning,
   matchPath,
   IDLE_FETCHER,
+  matchRoutes,
 } from "@remix-run/router";
 
 import type {
@@ -81,6 +82,23 @@ import {
   shouldProcessLinkClick,
 } from "./dom";
 
+import { RemixContext } from "./ssr/components";
+import type {
+  AssetsManifest,
+  FutureConfig as RemixFutureConfig,
+} from "./ssr/entry";
+import { RemixErrorBoundary } from "./ssr/errorBoundaries";
+import type { RouteModules } from "./ssr/routeModules";
+import {
+  createClientRoutes,
+  createClientRoutesWithHMRRevalidationOptOut,
+  shouldHydrateRouteLoader,
+} from "./ssr/routes";
+import {
+  decodeViaTurboStream,
+  getSingleFetchDataStrategy,
+} from "./ssr/single-fetch";
+
 ////////////////////////////////////////////////////////////////////////////////
 //#region Re-exports
 ////////////////////////////////////////////////////////////////////////////////
@@ -142,7 +160,6 @@ export type {
   RouteObject,
   RouteProps,
   RouterProps,
-  RouterProviderProps,
   RoutesProps,
   Search,
   ShouldRevalidateFunction,
@@ -199,6 +216,25 @@ export {
   useRoutes,
 } from "react-router";
 
+export {
+  Meta,
+  Links,
+  Scripts,
+  PrefetchPageLinks,
+  LiveReload,
+} from "./ssr/components";
+
+export type { HtmlLinkDescriptor } from "./ssr/links";
+export type {
+  ClientActionFunction,
+  ClientActionFunctionArgs,
+  ClientLoaderFunction,
+  ClientLoaderFunctionArgs,
+  MetaArgs,
+  MetaDescriptor,
+  MetaFunction,
+} from "./ssr/routeModules";
+
 ///////////////////////////////////////////////////////////////////////////////
 // DANGER! PLEASE READ ME!
 // We provide these exports as an escape hatch in the event that you need any
@@ -221,14 +257,63 @@ export {
   UNSAFE_RouteContext,
   UNSAFE_useRouteId,
 } from "react-router";
+export { RemixContext as UNSAFE_RemixContext } from "./ssr/components";
+export type { RouteModules as UNSAFE_RouteModules } from "./ssr/routeModules";
+export type {
+  FutureConfig as UNSAFE_FutureConfig,
+  AssetsManifest as UNSAFE_AssetsManifest,
+  RemixContextObject as UNSAFE_RemixContextObject,
+} from "./ssr/entry";
+export type {
+  EntryRoute as UNSAFE_EntryRoute,
+  RouteManifest as UNSAFE_RouteManifest,
+} from "./ssr/routes";
 //#endregion
 
+////////////////////////////////////////////////////////////////////////////////
+//#region Global Stuff
+////////////////////////////////////////////////////////////////////////////////
+
+type WindowRemixContext = {
+  url: string;
+  basename?: string;
+  state: HydrationState;
+  criticalCss?: string;
+  future: RemixFutureConfig;
+  isSpaMode: boolean;
+  stream: ReadableStream<Uint8Array> | undefined;
+  streamController: ReadableStreamDefaultController<Uint8Array>;
+  // The number of active deferred keys rendered on the server
+  a?: number;
+  dev?: {
+    port?: number;
+    hmrRuntime?: string;
+  };
+};
+
 declare global {
-  var __staticRouterHydrationData: HydrationState | undefined;
-  var __reactRouterVersion: string;
   interface Document {
     startViewTransition(cb: () => Promise<void> | void): ViewTransition;
   }
+
+  // v6 SPA info
+  var __reactRouterVersion: string;
+  // TODO: v7 - Can this go away in favor of "just use remix"?
+  var __staticRouterHydrationData: HydrationState | undefined;
+
+  // v7 SSR Info
+  // TODO: v7 - Once this is all working, rename these global variables to __reactRouter*
+  var __remixContext: WindowRemixContext | undefined;
+  var __remixRouter: RemixRouter | undefined;
+  var __remixRouteModules: RouteModules | undefined;
+  var __remixManifest: AssetsManifest | undefined;
+  var __remixRevalidation: number | undefined;
+  var __remixClearCriticalCss: (() => void) | undefined;
+  var $RefreshRuntime$:
+    | {
+        performReactRefresh: () => void;
+      }
+    | undefined;
 }
 
 // HEY YOU! DON'T TOUCH THIS VARIABLE!
@@ -247,6 +332,170 @@ try {
   // no-op
 }
 
+type SSRInfo = {
+  context: WindowRemixContext;
+  routeModules: RouteModules;
+  manifest: AssetsManifest;
+  stateDecodingPromise:
+    | (Promise<void> & {
+        value?: unknown;
+        error?: unknown;
+      })
+    | undefined;
+  router: RemixRouter | undefined;
+  routerInitialized: boolean;
+  hmrAbortController: AbortController | undefined;
+  hmrRouterReadyResolve: ((router: RemixRouter) => void) | undefined;
+  hmrRouterReadyPromise: Promise<RemixRouter>;
+};
+
+let ssrInfo: SSRInfo | null =
+  typeof window !== "undefined" &&
+  window.__remixContext &&
+  window.__remixManifest &&
+  window.__remixRouteModules
+    ? {
+        context: window.__remixContext,
+        routeModules: window.__remixRouteModules,
+        manifest: window.__remixManifest,
+        stateDecodingPromise: undefined,
+        router: undefined,
+        routerInitialized: false,
+        hmrAbortController: undefined,
+        hmrRouterReadyResolve: undefined,
+        // There's a race condition with HMR where the remix:manifest is signaled before
+        // the router is assigned in the RemixBrowser component. This promise gates the
+        // HMR handler until the router is ready
+        hmrRouterReadyPromise: new Promise((resolve) => {
+          // body of a promise is executed immediately, so this can be resolved outside
+          // of the promise body
+          ssrInfo!.hmrRouterReadyResolve = resolve;
+        }).catch(() => {
+          // This is a noop catch handler to avoid unhandled promise rejection warnings
+          // in the console. The promise is never rejected.
+          return undefined;
+        }) as Promise<RemixRouter>,
+      }
+    : null;
+
+if (
+  import.meta &&
+  // @ts-expect-error
+  import.meta.hot &&
+  ssrInfo
+) {
+  let localSsrInfo = ssrInfo;
+
+  // @ts-expect-error
+  import.meta.hot.accept(
+    "remix:manifest",
+    async ({
+      assetsManifest,
+      needsRevalidation,
+    }: {
+      assetsManifest: AssetsManifest;
+      needsRevalidation: Set<string>;
+    }) => {
+      let router = await localSsrInfo.hmrRouterReadyPromise;
+      // This should never happen, but just in case...
+      if (!router) {
+        console.error(
+          "Failed to accept HMR update because the router was not ready."
+        );
+        return;
+      }
+
+      let routeIds = [
+        ...new Set(
+          router.state.matches
+            .map((m) => m.route.id)
+            .concat(Object.keys(localSsrInfo.routeModules))
+        ),
+      ];
+
+      if (localSsrInfo.hmrAbortController) {
+        localSsrInfo.hmrAbortController.abort();
+      }
+      localSsrInfo.hmrAbortController = new AbortController();
+      let signal = localSsrInfo.hmrAbortController.signal;
+
+      // Load new route modules that we've seen.
+      let newRouteModules = Object.assign(
+        {},
+        localSsrInfo.routeModules,
+        Object.fromEntries(
+          (
+            await Promise.all(
+              routeIds.map(async (id) => {
+                if (!assetsManifest.routes[id]) {
+                  return null;
+                }
+                let imported = await import(
+                  assetsManifest.routes[id].module +
+                    `?t=${assetsManifest.hmr?.timestamp}`
+                );
+                return [
+                  id,
+                  {
+                    ...imported,
+                    // react-refresh takes care of updating these in-place,
+                    // if we don't preserve existing values we'll loose state.
+                    default: imported.default
+                      ? localSsrInfo.routeModules[id]?.default ||
+                        imported.default
+                      : imported.default,
+                    ErrorBoundary: imported.ErrorBoundary
+                      ? localSsrInfo.routeModules[id]?.ErrorBoundary ||
+                        imported.ErrorBoundary
+                      : imported.ErrorBoundary,
+                    HydrateFallback: imported.HydrateFallback
+                      ? localSsrInfo.routeModules[id]?.HydrateFallback ||
+                        imported.HydrateFallback
+                      : imported.HydrateFallback,
+                  },
+                ];
+              })
+            )
+          ).filter(Boolean) as [string, RouteModules[string]][]
+        )
+      );
+
+      Object.assign(localSsrInfo.routeModules, newRouteModules);
+      // Create new routes
+      let routes = createClientRoutesWithHMRRevalidationOptOut(
+        needsRevalidation,
+        assetsManifest.routes,
+        localSsrInfo.routeModules,
+        localSsrInfo.context.state,
+        localSsrInfo.context.future,
+        localSsrInfo.context.isSpaMode
+      );
+
+      // This is temporary API and will be more granular before release
+      router._internalSetRoutes(routes);
+
+      // Wait for router to be idle before updating the manifest and route modules
+      // and triggering a react-refresh
+      let unsub = router.subscribe((state) => {
+        if (state.revalidation === "idle") {
+          unsub();
+          // Abort if a new update comes in while we're waiting for the
+          // router to be idle.
+          if (signal.aborted) return;
+          // Ensure RouterProvider setState has flushed before re-rendering
+          setTimeout(() => {
+            Object.assign(localSsrInfo.manifest, assetsManifest);
+            window.$RefreshRuntime$!.performReactRefresh();
+          }, 1);
+        }
+      });
+      window.__remixRevalidation = (window.__remixRevalidation || 0) + 1;
+      router.revalidate();
+    }
+  );
+}
+//#endregion
+
 ////////////////////////////////////////////////////////////////////////////////
 //#region Routers
 ////////////////////////////////////////////////////////////////////////////////
@@ -474,14 +723,200 @@ class Deferred<T> {
   }
 }
 
+// When using a DOM RouterProvider with SSR you don't have to specify a router
+// and it can be constructed via `__remixManifest`/`__remixContext` etc.
+export type RouterProviderProps = MemoryRouterProviderProps & {
+  router?: RemixRouter;
+};
+
 /**
  * Given a Remix Router instance, render the appropriate UI
  */
 export function RouterProvider({
   fallbackElement,
-  router,
+  router: propRouter,
   future,
 }: RouterProviderProps): React.ReactElement {
+  let router = propRouter || ssrInfo?.router;
+
+  if (!router) {
+    if (!ssrInfo) {
+      throw new Error(
+        "You must be using the SSR features of React Router in order to skip " +
+          "passing a `router` prop to `<RouterProvider>`"
+      );
+    }
+
+    // TODO: Do some testing to confirm it's OK to skip the hard reload check
+    // now that all route.lazy stuff is wired up
+
+    // When single fetch is enabled, we need to suspend until the initial state
+    // snapshot is decoded into window.__remixContext.state
+    if (ssrInfo.context.future.unstable_singleFetch) {
+      let localSsrInfo = ssrInfo;
+      // Note: `stateDecodingPromise` is not coupled to `router` - we'll reach this
+      // code potentially many times waiting for our state to arrive, but we'll
+      // then only get past here and create the `router` one time
+      if (!ssrInfo.stateDecodingPromise) {
+        let stream = ssrInfo.context.stream;
+        invariant(stream, "No stream found for single fetch decoding");
+        ssrInfo.context.stream = undefined;
+        ssrInfo.stateDecodingPromise = decodeViaTurboStream(stream, window)
+          .then((value) => {
+            window.__remixContext!.state =
+              value.value as typeof localSsrInfo.context.state;
+            localSsrInfo.stateDecodingPromise!.value = true;
+          })
+          .catch((e) => {
+            localSsrInfo.stateDecodingPromise!.error = e;
+          });
+      }
+      if (ssrInfo.stateDecodingPromise.error) {
+        throw ssrInfo.stateDecodingPromise.error;
+      }
+      if (!ssrInfo.stateDecodingPromise.value) {
+        throw ssrInfo.stateDecodingPromise;
+      }
+    }
+
+    let routes = createClientRoutes(
+      ssrInfo.manifest.routes,
+      ssrInfo.routeModules,
+      ssrInfo.context.state,
+      ssrInfo.context.future,
+      ssrInfo.context.isSpaMode
+    );
+
+    let hydrationData = undefined;
+    if (!ssrInfo.context.isSpaMode) {
+      // Create a shallow clone of `loaderData` we can mutate for partial hydration.
+      // When a route exports a `clientLoader` and a `HydrateFallback`, the SSR will
+      // render the fallback so we need the client to do the same for hydration.
+      // The server loader data has already been exposed to these route `clientLoader`'s
+      // in `createClientRoutes` above, so we need to clear out the version we pass to
+      // `createBrowserRouter` so it initializes and runs the client loaders.
+      hydrationData = {
+        ...ssrInfo.context.state,
+        loaderData: { ...ssrInfo.context.state.loaderData },
+      };
+      let initialMatches = matchRoutes(routes, window.location);
+      if (initialMatches) {
+        for (let match of initialMatches) {
+          let routeId = match.route.id;
+          let route = ssrInfo.routeModules[routeId];
+          let manifestRoute = ssrInfo.manifest.routes[routeId];
+          // Clear out the loaderData to avoid rendering the route component when the
+          // route opted into clientLoader hydration and either:
+          // * gave us a HydrateFallback
+          // * or doesn't have a server loader and we have no data to render
+          if (
+            route &&
+            shouldHydrateRouteLoader(
+              manifestRoute,
+              route,
+              ssrInfo.context.isSpaMode
+            ) &&
+            (route.HydrateFallback || !manifestRoute.hasLoader)
+          ) {
+            hydrationData.loaderData[routeId] = undefined;
+          } else if (manifestRoute && !manifestRoute.hasLoader) {
+            // Since every Remix route gets a `loader` on the client side to load
+            // the route JS module, we need to add a `null` value to `loaderData`
+            // for any routes that don't have server loaders so our partial
+            // hydration logic doesn't kick off the route module loaders during
+            // hydration
+            hydrationData.loaderData[routeId] = null;
+          }
+        }
+      }
+
+      if (hydrationData && hydrationData.errors) {
+        hydrationData.errors = deserializeErrors(hydrationData.errors);
+      }
+    }
+
+    // We don't use createBrowserRouter here because we need fine-grained control
+    // over initialization to support synchronous `clientLoader` flows.
+    ssrInfo.router = router = createRouter({
+      routes,
+      history: createBrowserHistory(),
+      basename: ssrInfo.context.basename,
+      future: {
+        v7_normalizeFormMethod: true,
+        v7_fetcherPersist: ssrInfo.context.future.v3_fetcherPersist,
+        v7_partialHydration: true,
+        v7_prependBasename: true,
+        v7_relativeSplatPath: ssrInfo.context.future.v3_relativeSplatPath,
+        // Single fetch enables this underlying behavior
+        unstable_skipActionErrorRevalidation:
+          ssrInfo.context.future.unstable_singleFetch === true,
+      },
+      hydrationData,
+      mapRouteProperties,
+      unstable_dataStrategy: ssrInfo.context.future.unstable_singleFetch
+        ? getSingleFetchDataStrategy(ssrInfo.manifest, ssrInfo.routeModules)
+        : undefined,
+    });
+
+    // We can call initialize() immediately if the router doesn't have any
+    // loaders to run on hydration
+    if (router.state.initialized) {
+      ssrInfo.routerInitialized = true;
+      router.initialize();
+    }
+
+    // @ts-ignore
+    router.createRoutesForHMR = createClientRoutesWithHMRRevalidationOptOut;
+    window.__remixRouter = router;
+
+    // Notify that the router is ready for HMR
+    if (ssrInfo.hmrRouterReadyResolve) {
+      ssrInfo.hmrRouterReadyResolve(router);
+    }
+  }
+
+  // SSR State
+
+  // Critical CSS can become stale after code changes, e.g. styles might be
+  // removed from a component, but the styles will still be present in the
+  // server HTML. This allows our HMR logic to clear the critical CSS state.
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  let [criticalCss, setCriticalCss] = React.useState(
+    process.env.NODE_ENV === "development"
+      ? window.__remixContext?.criticalCss
+      : undefined
+  );
+  if (process.env.NODE_ENV === "development") {
+    if (ssrInfo) {
+      window.__remixClearCriticalCss = () => setCriticalCss(undefined);
+    }
+  }
+
+  // This is due to the short circuit return above when the pathname doesn't
+  // match and we force a hard reload.  This is an exceptional scenario in which
+  // we can't hydrate anyway.
+  let [location, setLocation] = React.useState(router.state.location);
+
+  React.useLayoutEffect(() => {
+    // If we had to run clientLoaders on hydration, we delay initialization until
+    // after we've hydrated to avoid hydration issues from synchronous client loaders
+    if (ssrInfo && ssrInfo.router && !ssrInfo.routerInitialized) {
+      ssrInfo.routerInitialized = true;
+      ssrInfo.router.initialize();
+    }
+  }, []);
+
+  React.useLayoutEffect(() => {
+    if (ssrInfo && ssrInfo.router) {
+      return ssrInfo.router.subscribe((newState) => {
+        if (newState.location !== location) {
+          setLocation(newState.location);
+        }
+      });
+    }
+  }, [location]);
+
+  // SPA State
   let [state, setStateImpl] = React.useState(router.state);
   let [pendingState, setPendingState] = React.useState<RouterState>();
   let [vtContext, setVtContext] = React.useState<ViewTransitionContextObject>({
@@ -707,7 +1142,7 @@ export function RouterProvider({
   // useId relies on the component tree structure to generate deterministic id's
   // so we need to ensure it remains the same on the client even though
   // we don't need the <script> tag
-  return (
+  let app = (
     <>
       <DataRouterContext.Provider value={dataRouterContext}>
         <DataRouterStateContext.Provider value={state}>
@@ -739,6 +1174,37 @@ export function RouterProvider({
       {null}
     </>
   );
+
+  if (ssrInfo && !propRouter) {
+    // We need to include a wrapper RemixErrorBoundary here in case the root error
+    // boundary also throws and we need to bubble up outside of the router entirely.
+    // Then we need a stateful location here so the user can back-button navigate
+    // out of there
+    return (
+      // This fragment is important to ensure we match the <RemixServer> JSX
+      // structure so that useId values hydrate correctly
+      <>
+        <RemixContext.Provider
+          value={{
+            manifest: ssrInfo.manifest,
+            routeModules: ssrInfo.routeModules,
+            future: ssrInfo.context.future,
+            criticalCss,
+            isSpaMode: ssrInfo.context.isSpaMode,
+          }}
+        >
+          <RemixErrorBoundary location={location}>{app}</RemixErrorBoundary>
+        </RemixContext.Provider>
+        {/*
+          This fragment is important to ensure we match the <RemixServer> JSX
+          structure so that useId values hydrate correctly
+        */}
+        {ssrInfo.context.future.unstable_singleFetch ? <></> : null}
+      </>
+    );
+  } else {
+    return app;
+  }
 }
 
 function DataRoutes({
@@ -756,7 +1222,7 @@ function DataRoutes({
 export interface BrowserRouterProps {
   basename?: string;
   children?: React.ReactNode;
-  future?: Partial<FutureConfig>;
+  future?: Partial<RenderFutureConfig>;
   window?: Window;
 }
 
@@ -806,7 +1272,7 @@ export function BrowserRouter({
 export interface HashRouterProps {
   basename?: string;
   children?: React.ReactNode;
-  future?: Partial<FutureConfig>;
+  future?: Partial<RenderFutureConfig>;
   window?: Window;
 }
 
@@ -857,7 +1323,7 @@ export function HashRouter({
 export interface HistoryRouterProps {
   basename?: string;
   children?: React.ReactNode;
-  future?: FutureConfig;
+  future?: RenderFutureConfig;
   history: History;
 }
 
diff --git a/packages/react-router-dom/package.json b/packages/react-router-dom/package.json
index 8fdba2481d..d90a4f0d1d 100644
--- a/packages/react-router-dom/package.json
+++ b/packages/react-router-dom/package.json
@@ -24,7 +24,9 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@remix-run/router": "workspace:*",
-    "react-router": "workspace:*"
+    "@remix-run/server-runtime": "workspace:*",
+    "react-router": "workspace:*",
+    "turbo-stream": "^2.0.0"
   },
   "devDependencies": {
     "react": "^18.2.0",
diff --git a/packages/react-router-dom/server.tsx b/packages/react-router-dom/server.tsx
index 3195c3d271..99402d6619 100644
--- a/packages/react-router-dom/server.tsx
+++ b/packages/react-router-dom/server.tsx
@@ -40,6 +40,9 @@ import {
   UNSAFE_ViewTransitionContext as ViewTransitionContext,
 } from "./index";
 
+export type { RemixServerProps } from "./ssr/server";
+export { RemixServer } from "./ssr/server";
+
 export interface StaticRouterProps {
   basename?: string;
   children?: React.ReactNode;
diff --git a/packages/react-router-dom/ssr/components.tsx b/packages/react-router-dom/ssr/components.tsx
new file mode 100644
index 0000000000..3ff9ab938b
--- /dev/null
+++ b/packages/react-router-dom/ssr/components.tsx
@@ -0,0 +1,1272 @@
+import type {
+  FocusEventHandler,
+  MouseEventHandler,
+  TouchEventHandler,
+} from "react";
+import * as React from "react";
+import type {
+  AgnosticDataRouteMatch,
+  UNSAFE_DeferredData as DeferredData,
+  RouterState,
+  TrackedPromise,
+  UIMatch as UIMatchRR,
+} from "@remix-run/router";
+import {
+  Await as AwaitRR,
+  UNSAFE_DataRouterContext as DataRouterContext,
+  UNSAFE_DataRouterStateContext as DataRouterStateContext,
+  matchRoutes,
+  useAsyncError,
+  useActionData as useActionDataRR,
+  useLoaderData as useLoaderDataRR,
+  useMatches as useMatchesRR,
+  useRouteLoaderData as useRouteLoaderDataRR,
+  useLocation,
+  useNavigation,
+  useHref,
+} from "react-router";
+
+import type { FetcherWithComponents, LinkProps, NavLinkProps } from "../index";
+import {
+  Link as RouterLink,
+  NavLink as RouterNavLink,
+  useFetcher as useFetcherRR,
+} from "../index";
+import type { AppData } from "./data";
+import type { RemixContextObject } from "./entry";
+import invariant from "./invariant";
+import {
+  getDataLinkHrefs,
+  getKeyedLinksForMatches,
+  getKeyedPrefetchLinks,
+  getModuleLinkHrefs,
+  getNewMatchesForLinks,
+  isPageLinkDescriptor,
+} from "./links";
+import type { KeyedHtmlLinkDescriptor, PrefetchPageDescriptor } from "./links";
+import { createHtml, escapeHtml } from "./markup";
+import type {
+  MetaFunction,
+  MetaDescriptor,
+  MetaMatch,
+  MetaMatches,
+  RouteHandle,
+} from "./routeModules";
+import { addRevalidationParam, singleFetchUrl } from "./single-fetch";
+
+// TODO: Temporary shim until we figure out the way to handle typings in v7
+export type SerializeFrom<D> = D extends () => {} ? Awaited<ReturnType<D>> : D;
+
+function useDataRouterContext() {
+  let context = React.useContext(DataRouterContext);
+  invariant(
+    context,
+    "You must render this element inside a <DataRouterContext.Provider> element"
+  );
+  return context;
+}
+
+function useDataRouterStateContext() {
+  let context = React.useContext(DataRouterStateContext);
+  invariant(
+    context,
+    "You must render this element inside a <DataRouterStateContext.Provider> element"
+  );
+  return context;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// RemixContext
+
+export const RemixContext = React.createContext<RemixContextObject | undefined>(
+  undefined
+);
+RemixContext.displayName = "Remix";
+
+export function useRemixContext(): RemixContextObject {
+  let context = React.useContext(RemixContext);
+  invariant(context, "You must render this element inside a <Remix> element");
+  return context;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Public API
+
+/**
+ * Defines the prefetching behavior of the link:
+ *
+ * - "none": Never fetched
+ * - "intent": Fetched when the user focuses or hovers the link
+ * - "render": Fetched when the link is rendered
+ * - "viewport": Fetched when the link is in the viewport
+ */
+type PrefetchBehavior = "intent" | "render" | "none" | "viewport";
+
+export interface RemixLinkProps extends LinkProps {
+  prefetch?: PrefetchBehavior;
+}
+
+export interface RemixNavLinkProps extends NavLinkProps {
+  prefetch?: PrefetchBehavior;
+}
+
+interface PrefetchHandlers {
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+  onMouseEnter?: MouseEventHandler;
+  onMouseLeave?: MouseEventHandler;
+  onTouchStart?: TouchEventHandler;
+}
+
+function usePrefetchBehavior<T extends HTMLAnchorElement>(
+  prefetch: PrefetchBehavior,
+  theirElementProps: PrefetchHandlers
+): [boolean, React.RefObject<T>, Required<PrefetchHandlers>] {
+  let [maybePrefetch, setMaybePrefetch] = React.useState(false);
+  let [shouldPrefetch, setShouldPrefetch] = React.useState(false);
+  let { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } =
+    theirElementProps;
+
+  let ref = React.useRef<T>(null);
+
+  React.useEffect(() => {
+    if (prefetch === "render") {
+      setShouldPrefetch(true);
+    }
+
+    if (prefetch === "viewport") {
+      let callback: IntersectionObserverCallback = (entries) => {
+        entries.forEach((entry) => {
+          setShouldPrefetch(entry.isIntersecting);
+        });
+      };
+      let observer = new IntersectionObserver(callback, { threshold: 0.5 });
+      if (ref.current) observer.observe(ref.current);
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [prefetch]);
+
+  let setIntent = () => {
+    if (prefetch === "intent") {
+      setMaybePrefetch(true);
+    }
+  };
+
+  let cancelIntent = () => {
+    if (prefetch === "intent") {
+      setMaybePrefetch(false);
+      setShouldPrefetch(false);
+    }
+  };
+
+  React.useEffect(() => {
+    if (maybePrefetch) {
+      let id = setTimeout(() => {
+        setShouldPrefetch(true);
+      }, 100);
+      return () => {
+        clearTimeout(id);
+      };
+    }
+  }, [maybePrefetch]);
+
+  return [
+    shouldPrefetch,
+    ref,
+    {
+      onFocus: composeEventHandlers(onFocus, setIntent),
+      onBlur: composeEventHandlers(onBlur, cancelIntent),
+      onMouseEnter: composeEventHandlers(onMouseEnter, setIntent),
+      onMouseLeave: composeEventHandlers(onMouseLeave, cancelIntent),
+      onTouchStart: composeEventHandlers(onTouchStart, setIntent),
+    },
+  ];
+}
+
+const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+
+/**
+ * A special kind of `<Link>` that knows whether it is "active".
+ *
+ * @see https://remix.run/components/nav-link
+ */
+let NavLink = React.forwardRef<HTMLAnchorElement, RemixNavLinkProps>(
+  ({ to, prefetch = "none", ...props }, forwardedRef) => {
+    let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
+
+    let href = useHref(to);
+    let [shouldPrefetch, ref, prefetchHandlers] = usePrefetchBehavior(
+      prefetch,
+      props
+    );
+
+    return (
+      <>
+        <RouterNavLink
+          {...props}
+          {...prefetchHandlers}
+          ref={mergeRefs(forwardedRef, ref)}
+          to={to}
+        />
+        {shouldPrefetch && !isAbsolute ? (
+          <PrefetchPageLinks page={href} />
+        ) : null}
+      </>
+    );
+  }
+);
+NavLink.displayName = "NavLink";
+export { NavLink };
+
+/**
+ * This component renders an anchor tag and is the primary way the user will
+ * navigate around your website.
+ *
+ * @see https://remix.run/components/link
+ */
+let Link = React.forwardRef<HTMLAnchorElement, RemixLinkProps>(
+  ({ to, prefetch = "none", ...props }, forwardedRef) => {
+    let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
+
+    let href = useHref(to);
+    let [shouldPrefetch, ref, prefetchHandlers] = usePrefetchBehavior(
+      prefetch,
+      props
+    );
+
+    return (
+      <>
+        <RouterLink
+          {...props}
+          {...prefetchHandlers}
+          ref={mergeRefs(forwardedRef, ref)}
+          to={to}
+        />
+        {shouldPrefetch && !isAbsolute ? (
+          <PrefetchPageLinks page={href} />
+        ) : null}
+      </>
+    );
+  }
+);
+Link.displayName = "Link";
+export { Link };
+
+export function composeEventHandlers<
+  EventType extends React.SyntheticEvent | Event
+>(
+  theirHandler: ((event: EventType) => any) | undefined,
+  ourHandler: (event: EventType) => any
+): (event: EventType) => any {
+  return (event) => {
+    theirHandler && theirHandler(event);
+    if (!event.defaultPrevented) {
+      ourHandler(event);
+    }
+  };
+}
+
+// Return the matches actively being displayed:
+// - In SPA Mode we only SSR/hydrate the root match, and include all matches
+//   after hydration. This lets the router handle initial match loads via lazy().
+// - When an error boundary is rendered, we slice off matches up to the
+//   boundary for <Links>/<Meta>
+function getActiveMatches(
+  matches: RouterState["matches"],
+  errors: RouterState["errors"],
+  isSpaMode: boolean
+) {
+  if (isSpaMode && !isHydrated) {
+    return [matches[0]];
+  }
+
+  if (errors) {
+    let errorIdx = matches.findIndex((m) => errors[m.route.id] !== undefined);
+    return matches.slice(0, errorIdx + 1);
+  }
+
+  return matches;
+}
+
+/**
+ * Renders the `<link>` tags for the current routes.
+ *
+ * @see https://remix.run/components/links
+ */
+export function Links() {
+  let { isSpaMode, manifest, routeModules, criticalCss } = useRemixContext();
+  let { errors, matches: routerMatches } = useDataRouterStateContext();
+
+  let matches = getActiveMatches(routerMatches, errors, isSpaMode);
+
+  let keyedLinks = React.useMemo(
+    () => getKeyedLinksForMatches(matches, routeModules, manifest),
+    [matches, routeModules, manifest]
+  );
+
+  return (
+    <>
+      {criticalCss ? (
+        <style dangerouslySetInnerHTML={{ __html: criticalCss }} />
+      ) : null}
+      {keyedLinks.map(({ key, link }) =>
+        isPageLinkDescriptor(link) ? (
+          <PrefetchPageLinks key={key} {...link} />
+        ) : (
+          <link key={key} {...link} />
+        )
+      )}
+    </>
+  );
+}
+
+/**
+ * This component renders all the `<link rel="prefetch">` and
+ * `<link rel="modulepreload"/>` tags for all the assets (data, modules, css) of
+ * a given page.
+ *
+ * @param props
+ * @param props.page
+ * @see https://remix.run/components/prefetch-page-links
+ */
+export function PrefetchPageLinks({
+  page,
+  ...dataLinkProps
+}: PrefetchPageDescriptor) {
+  let { router } = useDataRouterContext();
+  let matches = React.useMemo(
+    () => matchRoutes(router.routes, page, router.basename),
+    [router.routes, page, router.basename]
+  );
+
+  if (!matches) {
+    console.warn(`Tried to prefetch ${page} but no routes matched.`);
+    return null;
+  }
+
+  return (
+    <PrefetchPageLinksImpl page={page} matches={matches} {...dataLinkProps} />
+  );
+}
+
+function useKeyedPrefetchLinks(matches: AgnosticDataRouteMatch[]) {
+  let { manifest, routeModules } = useRemixContext();
+
+  let [keyedPrefetchLinks, setKeyedPrefetchLinks] = React.useState<
+    KeyedHtmlLinkDescriptor[]
+  >([]);
+
+  React.useEffect(() => {
+    let interrupted: boolean = false;
+
+    void getKeyedPrefetchLinks(matches, manifest, routeModules).then(
+      (links) => {
+        if (!interrupted) {
+          setKeyedPrefetchLinks(links);
+        }
+      }
+    );
+
+    return () => {
+      interrupted = true;
+    };
+  }, [matches, manifest, routeModules]);
+
+  return keyedPrefetchLinks;
+}
+
+function PrefetchPageLinksImpl({
+  page,
+  matches: nextMatches,
+  ...linkProps
+}: PrefetchPageDescriptor & {
+  matches: AgnosticDataRouteMatch[];
+}) {
+  let location = useLocation();
+  let { future, manifest, routeModules } = useRemixContext();
+  let { matches } = useDataRouterStateContext();
+
+  let newMatchesForData = React.useMemo(
+    () =>
+      getNewMatchesForLinks(
+        page,
+        nextMatches,
+        matches,
+        manifest,
+        location,
+        "data"
+      ),
+    [page, nextMatches, matches, manifest, location]
+  );
+
+  let newMatchesForAssets = React.useMemo(
+    () =>
+      getNewMatchesForLinks(
+        page,
+        nextMatches,
+        matches,
+        manifest,
+        location,
+        "assets"
+      ),
+    [page, nextMatches, matches, manifest, location]
+  );
+
+  let dataHrefs = React.useMemo(
+    () => getDataLinkHrefs(page, newMatchesForData, manifest),
+    [newMatchesForData, page, manifest]
+  );
+
+  let moduleHrefs = React.useMemo(
+    () => getModuleLinkHrefs(newMatchesForAssets, manifest),
+    [newMatchesForAssets, manifest]
+  );
+
+  // needs to be a hook with async behavior because we need the modules, not
+  // just the manifest like the other links in here.
+  let keyedPrefetchLinks = useKeyedPrefetchLinks(newMatchesForAssets);
+
+  let linksToRender: React.ReactNode | React.ReactNode[] | null = null;
+  if (!future.unstable_singleFetch) {
+    // Non-single-fetch prefetching
+    linksToRender = dataHrefs.map((href) => (
+      <link key={href} rel="prefetch" as="fetch" href={href} {...linkProps} />
+    ));
+  } else if (newMatchesForData.length > 0) {
+    // Single-fetch with routes that require data
+    let url = addRevalidationParam(
+      manifest,
+      routeModules,
+      nextMatches.map((m) => m.route),
+      newMatchesForData.map((m) => m.route),
+      singleFetchUrl(page)
+    );
+    if (url.searchParams.get("_routes") !== "") {
+      linksToRender = (
+        <link
+          key={url.pathname + url.search}
+          rel="prefetch"
+          as="fetch"
+          href={url.pathname + url.search}
+          {...linkProps}
+        />
+      );
+    } else {
+      // No single-fetch prefetching if _routes param is empty due to `clientLoader`'s
+    }
+  } else {
+    // No single-fetch prefetching if there are no new matches for data
+  }
+
+  return (
+    <>
+      {linksToRender}
+      {moduleHrefs.map((href) => (
+        <link key={href} rel="modulepreload" href={href} {...linkProps} />
+      ))}
+      {keyedPrefetchLinks.map(({ key, link }) => (
+        // these don't spread `linkProps` because they are full link descriptors
+        // already with their own props
+        <link key={key} {...link} />
+      ))}
+    </>
+  );
+}
+
+/**
+ * Renders HTML tags related to metadata for the current route.
+ *
+ * @see https://remix.run/components/meta
+ */
+export function Meta() {
+  let { isSpaMode, routeModules } = useRemixContext();
+  let {
+    errors,
+    matches: routerMatches,
+    loaderData,
+  } = useDataRouterStateContext();
+  let location = useLocation();
+
+  let _matches = getActiveMatches(routerMatches, errors, isSpaMode);
+
+  let error: any = null;
+  if (errors) {
+    error = errors[_matches[_matches.length - 1].route.id];
+  }
+
+  let meta: MetaDescriptor[] = [];
+  let leafMeta: MetaDescriptor[] | null = null;
+  let matches: MetaMatches = [];
+  for (let i = 0; i < _matches.length; i++) {
+    let _match = _matches[i];
+    let routeId = _match.route.id;
+    let data = loaderData[routeId];
+    let params = _match.params;
+    let routeModule = routeModules[routeId];
+    let routeMeta: MetaDescriptor[] | undefined = [];
+
+    let match: MetaMatch = {
+      id: routeId,
+      data,
+      meta: [],
+      params: _match.params,
+      pathname: _match.pathname,
+      handle: _match.route.handle,
+      error,
+    };
+    matches[i] = match;
+
+    if (routeModule?.meta) {
+      routeMeta =
+        typeof routeModule.meta === "function"
+          ? (routeModule.meta as MetaFunction)({
+              data,
+              params,
+              location,
+              matches,
+              error,
+            })
+          : Array.isArray(routeModule.meta)
+          ? [...routeModule.meta]
+          : routeModule.meta;
+    } else if (leafMeta) {
+      // We only assign the route's meta to the nearest leaf if there is no meta
+      // export in the route. The meta function may return a falsy value which
+      // is effectively the same as an empty array.
+      routeMeta = [...leafMeta];
+    }
+
+    routeMeta = routeMeta || [];
+    if (!Array.isArray(routeMeta)) {
+      throw new Error(
+        "The route at " +
+          _match.route.path +
+          " returns an invalid value. All route meta functions must " +
+          "return an array of meta objects." +
+          "\n\nTo reference the meta function API, see https://remix.run/route/meta"
+      );
+    }
+
+    match.meta = routeMeta;
+    matches[i] = match;
+    meta = [...routeMeta];
+    leafMeta = meta;
+  }
+
+  return (
+    <>
+      {meta.flat().map((metaProps) => {
+        if (!metaProps) {
+          return null;
+        }
+
+        if ("tagName" in metaProps) {
+          let { tagName, ...rest } = metaProps;
+          if (!isValidMetaTag(tagName)) {
+            console.warn(
+              `A meta object uses an invalid tagName: ${tagName}. Expected either 'link' or 'meta'`
+            );
+            return null;
+          }
+          let Comp = tagName;
+          return <Comp key={JSON.stringify(rest)} {...rest} />;
+        }
+
+        if ("title" in metaProps) {
+          return <title key="title">{String(metaProps.title)}</title>;
+        }
+
+        if ("charset" in metaProps) {
+          metaProps.charSet ??= metaProps.charset;
+          delete metaProps.charset;
+        }
+
+        if ("charSet" in metaProps && metaProps.charSet != null) {
+          return typeof metaProps.charSet === "string" ? (
+            <meta key="charSet" charSet={metaProps.charSet} />
+          ) : null;
+        }
+
+        if ("script:ld+json" in metaProps) {
+          try {
+            let json = JSON.stringify(metaProps["script:ld+json"]);
+            return (
+              <script
+                key={`script:ld+json:${json}`}
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: json }}
+              />
+            );
+          } catch (err) {
+            return null;
+          }
+        }
+        return <meta key={JSON.stringify(metaProps)} {...metaProps} />;
+      })}
+    </>
+  );
+}
+
+function isValidMetaTag(tagName: unknown): tagName is "meta" | "link" {
+  return typeof tagName === "string" && /^(meta|link)$/.test(tagName);
+}
+
+export interface AwaitProps<Resolve> {
+  children: React.ReactNode | ((value: Awaited<Resolve>) => React.ReactNode);
+  errorElement?: React.ReactNode;
+  resolve: Resolve;
+}
+
+export function Await<Resolve>(props: AwaitProps<Resolve>) {
+  return <AwaitRR {...props} />;
+}
+
+/**
+ * Tracks whether Remix has finished hydrating or not, so scripts can be skipped
+ * during client-side updates.
+ */
+let isHydrated = false;
+
+export type ScriptProps = Omit<
+  React.HTMLProps<HTMLScriptElement>,
+  | "children"
+  | "async"
+  | "defer"
+  | "src"
+  | "type"
+  | "noModule"
+  | "dangerouslySetInnerHTML"
+  | "suppressHydrationWarning"
+>;
+
+/**
+ * Renders the `<script>` tags needed for the initial render. Bundles for
+ * additional routes are loaded later as needed.
+ *
+ * @param props Additional properties to add to each script tag that is rendered.
+ * In addition to scripts, \<link rel="modulepreload"> tags receive the crossOrigin
+ * property if provided.
+ *
+ * @see https://remix.run/components/scripts
+ */
+export function Scripts(props: ScriptProps) {
+  let {
+    manifest,
+    serverHandoffString,
+    abortDelay,
+    serializeError,
+    isSpaMode,
+    future,
+    renderMeta,
+  } = useRemixContext();
+  let { router, static: isStatic, staticContext } = useDataRouterContext();
+  let { matches: routerMatches } = useDataRouterStateContext();
+  let navigation = useNavigation();
+
+  // Let <RemixServer> know that we hydrated and we should render the single
+  // fetch streaming scripts
+  if (renderMeta) {
+    renderMeta.didRenderScripts = true;
+  }
+
+  let matches = getActiveMatches(routerMatches, null, isSpaMode);
+
+  React.useEffect(() => {
+    isHydrated = true;
+  }, []);
+
+  let serializePreResolvedErrorImp = (key: string, error: unknown) => {
+    let toSerialize: unknown;
+    if (serializeError && error instanceof Error) {
+      toSerialize = serializeError(error);
+    } else {
+      toSerialize = error;
+    }
+    return `${JSON.stringify(key)}:__remixContext.p(!1, ${escapeHtml(
+      JSON.stringify(toSerialize)
+    )})`;
+  };
+
+  let serializePreresolvedDataImp = (
+    routeId: string,
+    key: string,
+    data: unknown
+  ) => {
+    let serializedData;
+    try {
+      serializedData = JSON.stringify(data);
+    } catch (error) {
+      return serializePreResolvedErrorImp(key, error);
+    }
+    return `${JSON.stringify(key)}:__remixContext.p(${escapeHtml(
+      serializedData
+    )})`;
+  };
+
+  let serializeErrorImp = (routeId: string, key: string, error: unknown) => {
+    let toSerialize: unknown;
+    if (serializeError && error instanceof Error) {
+      toSerialize = serializeError(error);
+    } else {
+      toSerialize = error;
+    }
+    return `__remixContext.r(${JSON.stringify(routeId)}, ${JSON.stringify(
+      key
+    )}, !1, ${escapeHtml(JSON.stringify(toSerialize))})`;
+  };
+
+  let serializeDataImp = (routeId: string, key: string, data: unknown) => {
+    let serializedData;
+    try {
+      serializedData = JSON.stringify(data);
+    } catch (error) {
+      return serializeErrorImp(routeId, key, error);
+    }
+    return `__remixContext.r(${JSON.stringify(routeId)}, ${JSON.stringify(
+      key
+    )}, ${escapeHtml(serializedData)})`;
+  };
+
+  let deferredScripts: any[] = [];
+  let initialScripts = React.useMemo(() => {
+    let streamScript = future.unstable_singleFetch
+      ? // prettier-ignore
+        "window.__remixContext.stream = new ReadableStream({" +
+          "start(controller){" +
+            "window.__remixContext.streamController = controller;" +
+          "}" +
+        "}).pipeThrough(new TextEncoderStream());"
+      : "";
+
+    let contextScript = staticContext
+      ? `window.__remixContext = ${serverHandoffString};${streamScript}`
+      : " ";
+
+    // When single fetch is enabled, deferred is handled by turbo-stream
+    let activeDeferreds = future.unstable_singleFetch
+      ? undefined
+      : staticContext?.activeDeferreds;
+
+    // This sets up the __remixContext with utility functions used by the
+    // deferred scripts.
+    // - __remixContext.p is a function that takes a resolved value or error and returns a promise.
+    //   This is used for transmitting pre-resolved promises from the server to the client.
+    // - __remixContext.n is a function that takes a routeID and key to returns a promise for later
+    //   resolution by the subsequently streamed chunks.
+    // - __remixContext.r is a function that takes a routeID, key and value or error and resolves
+    //   the promise created by __remixContext.n.
+    // - __remixContext.t is a map or routeId to keys to an object containing `e` and `r` methods
+    //   to resolve or reject the promise created by __remixContext.n.
+    // - __remixContext.a is the active number of deferred scripts that should be rendered to match
+    //   the SSR tree for hydration on the client.
+    contextScript += !activeDeferreds
+      ? ""
+      : [
+          "__remixContext.p = function(v,e,p,x) {",
+          "  if (typeof e !== 'undefined') {",
+          process.env.NODE_ENV === "development"
+            ? "    x=new Error(e.message);\n    x.stack=e.stack;"
+            : '    x=new Error("Unexpected Server Error");\n    x.stack=undefined;',
+          "    p=Promise.reject(x);",
+          "  } else {",
+          "    p=Promise.resolve(v);",
+          "  }",
+          "  return p;",
+          "};",
+          "__remixContext.n = function(i,k) {",
+          "  __remixContext.t = __remixContext.t || {};",
+          "  __remixContext.t[i] = __remixContext.t[i] || {};",
+          "  let p = new Promise((r, e) => {__remixContext.t[i][k] = {r:(v)=>{r(v);},e:(v)=>{e(v);}};});",
+          typeof abortDelay === "number"
+            ? `setTimeout(() => {if(typeof p._error !== "undefined" || typeof p._data !== "undefined"){return;} __remixContext.t[i][k].e(new Error("Server timeout."))}, ${abortDelay});`
+            : "",
+          "  return p;",
+          "};",
+          "__remixContext.r = function(i,k,v,e,p,x) {",
+          "  p = __remixContext.t[i][k];",
+          "  if (typeof e !== 'undefined') {",
+          process.env.NODE_ENV === "development"
+            ? "    x=new Error(e.message);\n    x.stack=e.stack;"
+            : '    x=new Error("Unexpected Server Error");\n    x.stack=undefined;',
+          "    p.e(x);",
+          "  } else {",
+          "    p.r(v);",
+          "  }",
+          "};",
+        ].join("\n") +
+        Object.entries(activeDeferreds)
+          .map(([routeId, deferredData]) => {
+            let pendingKeys = new Set(deferredData.pendingKeys);
+            let promiseKeyValues = deferredData.deferredKeys
+              .map((key) => {
+                if (pendingKeys.has(key)) {
+                  deferredScripts.push(
+                    <DeferredHydrationScript
+                      key={`${routeId} | ${key}`}
+                      deferredData={deferredData}
+                      routeId={routeId}
+                      dataKey={key}
+                      scriptProps={props}
+                      serializeData={serializeDataImp}
+                      serializeError={serializeErrorImp}
+                    />
+                  );
+
+                  return `${JSON.stringify(
+                    key
+                  )}:__remixContext.n(${JSON.stringify(
+                    routeId
+                  )}, ${JSON.stringify(key)})`;
+                } else {
+                  let trackedPromise = deferredData.data[key] as TrackedPromise;
+                  if (typeof trackedPromise._error !== "undefined") {
+                    return serializePreResolvedErrorImp(
+                      key,
+                      trackedPromise._error
+                    );
+                  } else {
+                    return serializePreresolvedDataImp(
+                      routeId,
+                      key,
+                      trackedPromise._data
+                    );
+                  }
+                }
+              })
+              .join(",\n");
+            return `Object.assign(__remixContext.state.loaderData[${JSON.stringify(
+              routeId
+            )}], {${promiseKeyValues}});`;
+          })
+          .join("\n") +
+        (deferredScripts.length > 0
+          ? `__remixContext.a=${deferredScripts.length};`
+          : "");
+
+    let routeModulesScript = !isStatic
+      ? " "
+      : `${
+          manifest.hmr?.runtime
+            ? `import ${JSON.stringify(manifest.hmr.runtime)};`
+            : ""
+        }import ${JSON.stringify(manifest.url)};
+${matches
+  .map(
+    (match, index) =>
+      `import * as route${index} from ${JSON.stringify(
+        manifest.routes[match.route.id].module
+      )};`
+  )
+  .join("\n")}
+window.__remixRouteModules = {${matches
+          .map(
+            (match, index) => `${JSON.stringify(match.route.id)}:route${index}`
+          )
+          .join(",")}};
+
+import(${JSON.stringify(manifest.entry.module)});`;
+
+    return (
+      <>
+        <script
+          {...props}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={createHtml(contextScript)}
+          type={undefined}
+        />
+        <script
+          {...props}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={createHtml(routeModulesScript)}
+          type="module"
+          async
+        />
+      </>
+    );
+    // disabled deps array because we are purposefully only rendering this once
+    // for hydration, after that we want to just continue rendering the initial
+    // scripts as they were when the page first loaded
+    // eslint-disable-next-line
+  }, []);
+
+  if (!isStatic && typeof __remixContext === "object" && __remixContext.a) {
+    for (let i = 0; i < __remixContext.a; i++) {
+      deferredScripts.push(
+        <DeferredHydrationScript
+          key={i}
+          scriptProps={props}
+          serializeData={serializeDataImp}
+          serializeError={serializeErrorImp}
+        />
+      );
+    }
+  }
+
+  // avoid waterfall when importing the next route module
+  let nextMatches = React.useMemo(() => {
+    if (navigation.location) {
+      // FIXME: can probably use transitionManager `nextMatches`
+      let matches = matchRoutes(
+        router.routes,
+        navigation.location,
+        router.basename
+      );
+      invariant(
+        matches,
+        `No routes match path "${navigation.location.pathname}"`
+      );
+      return matches;
+    }
+
+    return [];
+  }, [navigation.location, router.routes, router.basename]);
+
+  let routePreloads = matches
+    .concat(nextMatches)
+    .map((match) => {
+      let route = manifest.routes[match.route.id];
+      return (route.imports || []).concat([route.module]);
+    })
+    .flat(1);
+
+  let preloads = isHydrated ? [] : manifest.entry.imports.concat(routePreloads);
+
+  return isHydrated ? null : (
+    <>
+      <link
+        rel="modulepreload"
+        href={manifest.url}
+        crossOrigin={props.crossOrigin}
+      />
+      <link
+        rel="modulepreload"
+        href={manifest.entry.module}
+        crossOrigin={props.crossOrigin}
+      />
+      {dedupe(preloads).map((path) => (
+        <link
+          key={path}
+          rel="modulepreload"
+          href={path}
+          crossOrigin={props.crossOrigin}
+        />
+      ))}
+      {initialScripts}
+      {deferredScripts}
+    </>
+  );
+}
+
+function DeferredHydrationScript({
+  dataKey,
+  deferredData,
+  routeId,
+  scriptProps,
+  serializeData,
+  serializeError,
+}: {
+  dataKey?: string;
+  deferredData?: DeferredData;
+  routeId?: string;
+  scriptProps?: ScriptProps;
+  serializeData: (routeId: string, key: string, data: unknown) => string;
+  serializeError: (routeId: string, key: string, error: unknown) => string;
+}) {
+  if (typeof document === "undefined" && deferredData && dataKey && routeId) {
+    invariant(
+      deferredData.pendingKeys.includes(dataKey),
+      `Deferred data for route ${routeId} with key ${dataKey} was not pending but tried to render a script for it.`
+    );
+  }
+
+  return (
+    <React.Suspense
+      fallback={
+        // This makes absolutely no sense. The server renders null as a fallback,
+        // but when hydrating, we need to render a script tag to avoid a hydration issue.
+        // To reproduce a hydration mismatch, just render null as a fallback.
+        typeof document === "undefined" &&
+        deferredData &&
+        dataKey &&
+        routeId ? null : (
+          <script
+            {...scriptProps}
+            async
+            suppressHydrationWarning
+            dangerouslySetInnerHTML={{ __html: " " }}
+          />
+        )
+      }
+    >
+      {typeof document === "undefined" && deferredData && dataKey && routeId ? (
+        <Await
+          resolve={deferredData.data[dataKey]}
+          errorElement={
+            <ErrorDeferredHydrationScript
+              dataKey={dataKey}
+              routeId={routeId}
+              scriptProps={scriptProps}
+              serializeError={serializeError}
+            />
+          }
+          children={(data) => {
+            return (
+              <script
+                {...scriptProps}
+                async
+                suppressHydrationWarning
+                dangerouslySetInnerHTML={{
+                  __html: serializeData(routeId, dataKey, data),
+                }}
+              />
+            );
+          }}
+        />
+      ) : (
+        <script
+          {...scriptProps}
+          async
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: " " }}
+        />
+      )}
+    </React.Suspense>
+  );
+}
+
+function ErrorDeferredHydrationScript({
+  dataKey,
+  routeId,
+  scriptProps,
+  serializeError,
+}: {
+  dataKey: string;
+  routeId: string;
+  scriptProps?: ScriptProps;
+  serializeError: (routeId: string, key: string, error: unknown) => string;
+}) {
+  let error = useAsyncError() as Error;
+
+  return (
+    <script
+      {...scriptProps}
+      suppressHydrationWarning
+      dangerouslySetInnerHTML={{
+        __html: serializeError(routeId, dataKey, error),
+      }}
+    />
+  );
+}
+
+function dedupe(array: any[]) {
+  return [...new Set(array)];
+}
+
+export type UIMatch<D = AppData, H = RouteHandle> = UIMatchRR<
+  SerializeFrom<D>,
+  H
+>;
+
+/**
+ * Returns the active route matches, useful for accessing loaderData for
+ * parent/child routes or the route "handle" property
+ *
+ * @see https://remix.run/hooks/use-matches
+ */
+export function useMatches(): UIMatch[] {
+  return useMatchesRR() as UIMatch[];
+}
+
+/**
+ * Returns the JSON parsed data from the current route's `loader`.
+ *
+ * @see https://remix.run/hooks/use-loader-data
+ */
+export function useLoaderData<T = AppData>(): SerializeFrom<T> {
+  return useLoaderDataRR() as SerializeFrom<T>;
+}
+
+/**
+ * Returns the loaderData for the given routeId.
+ *
+ * @see https://remix.run/hooks/use-route-loader-data
+ */
+export function useRouteLoaderData<T = AppData>(
+  routeId: string
+): SerializeFrom<T> | undefined {
+  return useRouteLoaderDataRR(routeId) as SerializeFrom<T> | undefined;
+}
+
+/**
+ * Returns the JSON parsed data from the current route's `action`.
+ *
+ * @see https://remix.run/hooks/use-action-data
+ */
+export function useActionData<T = AppData>(): SerializeFrom<T> | undefined {
+  return useActionDataRR() as SerializeFrom<T> | undefined;
+}
+
+/**
+ * Interacts with route loaders and actions without causing a navigation. Great
+ * for any interaction that stays on the same page.
+ *
+ * @see https://remix.run/hooks/use-fetcher
+ */
+export function useFetcher<TData = AppData>(
+  opts: Parameters<typeof useFetcherRR>[0] = {}
+): FetcherWithComponents<SerializeFrom<TData>> {
+  return useFetcherRR(opts);
+}
+
+/**
+ * This component connects your app to the Remix asset server and
+ * automatically reloads the page when files change in development.
+ * In production, it renders null, so you can safely render it always in your root route.
+ *
+ * @see https://remix.run/docs/components/live-reload
+ */
+export const LiveReload =
+  // Dead Code Elimination magic for production builds.
+  // This way devs don't have to worry about doing the NODE_ENV check themselves.
+  process.env.NODE_ENV !== "development"
+    ? () => null
+    : function LiveReload({
+        origin,
+        port,
+        timeoutMs = 1000,
+        nonce = undefined,
+      }: {
+        origin?: string;
+        port?: number;
+        timeoutMs?: number;
+        nonce?: string;
+      }) {
+        // @ts-expect-error
+        let isViteClient = import.meta && import.meta.env !== undefined;
+        if (isViteClient) {
+          console.warn(
+            [
+              "`<LiveReload />` is obsolete when using Vite and can conflict with Vite's built-in HMR runtime.",
+              "",
+              "Remove `<LiveReload />` from your code and instead only use `<Scripts />`.",
+              "Then refresh the page to remove lingering scripts from `<LiveReload />`.",
+            ].join("\n")
+          );
+          return null;
+        }
+        origin ??= process.env.REMIX_DEV_ORIGIN;
+        let js = String.raw;
+        return (
+          <script
+            nonce={nonce}
+            suppressHydrationWarning
+            dangerouslySetInnerHTML={{
+              __html: js`
+                function remixLiveReloadConnect(config) {
+                  let LIVE_RELOAD_ORIGIN = ${JSON.stringify(origin)};
+                  let protocol =
+                    LIVE_RELOAD_ORIGIN ? new URL(LIVE_RELOAD_ORIGIN).protocol.replace(/^http/, "ws") :
+                    location.protocol === "https:" ? "wss:" : "ws:"; // remove in v2?
+                  let hostname = LIVE_RELOAD_ORIGIN ? new URL(LIVE_RELOAD_ORIGIN).hostname : location.hostname;
+                  let url = new URL(protocol + "//" + hostname + "/socket");
+
+                  url.port =
+                    ${port} ||
+                    (LIVE_RELOAD_ORIGIN ? new URL(LIVE_RELOAD_ORIGIN).port : 8002);
+
+                  let ws = new WebSocket(url.href);
+                  ws.onmessage = async (message) => {
+                    let event = JSON.parse(message.data);
+                    if (event.type === "LOG") {
+                      console.log(event.message);
+                    }
+                    if (event.type === "RELOAD") {
+                      console.log("💿 Reloading window ...");
+                      window.location.reload();
+                    }
+                    if (event.type === "HMR") {
+                      if (!window.__hmr__ || !window.__hmr__.contexts) {
+                        console.log("💿 [HMR] No HMR context, reloading window ...");
+                        window.location.reload();
+                        return;
+                      }
+                      if (!event.updates || !event.updates.length) return;
+                      let updateAccepted = false;
+                      let needsRevalidation = new Set();
+                      for (let update of event.updates) {
+                        console.log("[HMR] " + update.reason + " [" + update.id +"]")
+                        if (update.revalidate) {
+                          needsRevalidation.add(update.routeId);
+                          console.log("[HMR] Revalidating [" + update.routeId + "]");
+                        }
+                        let imported = await import(update.url +  '?t=' + event.assetsManifest.hmr.timestamp);
+                        if (window.__hmr__.contexts[update.id]) {
+                          let accepted = window.__hmr__.contexts[update.id].emit(
+                            imported
+                          );
+                          if (accepted) {
+                            console.log("[HMR] Update accepted by", update.id);
+                            updateAccepted = true;
+                          }
+                        }
+                      }
+                      if (event.assetsManifest && window.__hmr__.contexts["remix:manifest"]) {
+                        let accepted = window.__hmr__.contexts["remix:manifest"].emit(
+                          { needsRevalidation, assetsManifest: event.assetsManifest }
+                        );
+                        if (accepted) {
+                          console.log("[HMR] Update accepted by", "remix:manifest");
+                          updateAccepted = true;
+                        }
+                      }
+                      if (!updateAccepted) {
+                        console.log("[HMR] Update rejected, reloading...");
+                        window.location.reload();
+                      }
+                    }
+                  };
+                  ws.onopen = () => {
+                    if (config && typeof config.onOpen === "function") {
+                      config.onOpen();
+                    }
+                  };
+                  ws.onclose = (event) => {
+                    if (event.code === 1006) {
+                      console.log("Remix dev asset server web socket closed. Reconnecting...");
+                      setTimeout(
+                        () =>
+                          remixLiveReloadConnect({
+                            onOpen: () => window.location.reload(),
+                          }),
+                      ${String(timeoutMs)}
+                      );
+                    }
+                  };
+                  ws.onerror = (error) => {
+                    console.log("Remix dev asset server web socket error:");
+                    console.error(error);
+                  };
+                }
+                remixLiveReloadConnect();
+              `,
+            }}
+          />
+        );
+      };
+
+function mergeRefs<T = any>(
+  ...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+): React.RefCallback<T> {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}
diff --git a/packages/react-router-dom/ssr/data.ts b/packages/react-router-dom/ssr/data.ts
new file mode 100644
index 0000000000..644248bd30
--- /dev/null
+++ b/packages/react-router-dom/ssr/data.ts
@@ -0,0 +1,327 @@
+import {
+  AbortedDeferredError,
+  UNSAFE_DeferredData as DeferredData,
+} from "@remix-run/router";
+
+/**
+ * Data for a route that was returned from a `loader()`.
+ */
+export type AppData = unknown;
+
+export function isCatchResponse(response: Response): boolean {
+  return response.headers.get("X-Remix-Catch") != null;
+}
+
+export function isErrorResponse(response: any): response is Response {
+  return response.headers.get("X-Remix-Error") != null;
+}
+
+export function isNetworkErrorResponse(response: any): response is Response {
+  // If we reach the Remix server, we can safely identify response types via the
+  // X-Remix-Error/X-Remix-Catch headers.  However, if we never reach the Remix
+  // server, and instead receive a 4xx/5xx from somewhere in between (like
+  // Cloudflare), then we get a false negative in the isErrorResponse check and
+  // we incorrectly assume that the user returns the 4xx/5xx response and
+  // consider it successful.  To alleviate this, we add X-Remix-Response to any
+  // non-Error/non-Catch responses coming back from the server.  If we don't
+  // see this, we can conclude that a 4xx/5xx response never actually reached
+  // the Remix server and we can bubble it up as an error.
+  return (
+    isResponse(response) &&
+    response.status >= 400 &&
+    response.headers.get("X-Remix-Error") == null &&
+    response.headers.get("X-Remix-Catch") == null &&
+    response.headers.get("X-Remix-Response") == null
+  );
+}
+
+export function isRedirectResponse(response: Response): boolean {
+  return response.headers.get("X-Remix-Redirect") != null;
+}
+
+export function isDeferredResponse(response: Response): boolean {
+  return !!response.headers.get("Content-Type")?.match(/text\/remix-deferred/);
+}
+
+export function isResponse(value: any): value is Response {
+  return (
+    value != null &&
+    typeof value.status === "number" &&
+    typeof value.statusText === "string" &&
+    typeof value.headers === "object" &&
+    typeof value.body !== "undefined"
+  );
+}
+
+export function isDeferredData(value: any): value is DeferredData {
+  let deferred: DeferredData = value;
+  return (
+    deferred &&
+    typeof deferred === "object" &&
+    typeof deferred.data === "object" &&
+    typeof deferred.subscribe === "function" &&
+    typeof deferred.cancel === "function" &&
+    typeof deferred.resolveData === "function"
+  );
+}
+
+export async function fetchData(
+  request: Request,
+  routeId: string,
+  retry = 0
+): Promise<Response | Error> {
+  let url = new URL(request.url);
+  url.searchParams.set("_data", routeId);
+
+  if (retry > 0) {
+    // Retry up to 3 times waiting 50, 250, 1250 ms
+    // between retries for a total of 1550 ms before giving up.
+    await new Promise((resolve) => setTimeout(resolve, 5 ** retry * 10));
+  }
+
+  let init = await createRequestInit(request);
+  let revalidation = window.__remixRevalidation;
+  let response = await fetch(url.href, init).catch((error) => {
+    if (
+      typeof revalidation === "number" &&
+      revalidation === window.__remixRevalidation &&
+      error?.name === "TypeError" &&
+      retry < 3
+    ) {
+      return fetchData(request, routeId, retry + 1);
+    }
+    throw error;
+  });
+
+  if (isErrorResponse(response)) {
+    let data = await response.json();
+    let error = new Error(data.message);
+    error.stack = data.stack;
+    return error;
+  }
+
+  if (isNetworkErrorResponse(response)) {
+    let text = await response.text();
+    let error = new Error(text);
+    error.stack = undefined;
+    return error;
+  }
+
+  return response;
+}
+
+export async function createRequestInit(
+  request: Request
+): Promise<RequestInit> {
+  let init: RequestInit = { signal: request.signal };
+
+  if (request.method !== "GET") {
+    init.method = request.method;
+
+    let contentType = request.headers.get("Content-Type");
+
+    // Check between word boundaries instead of startsWith() due to the last
+    // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
+    if (contentType && /\bapplication\/json\b/.test(contentType)) {
+      init.headers = { "Content-Type": contentType };
+      init.body = JSON.stringify(await request.json());
+    } else if (contentType && /\btext\/plain\b/.test(contentType)) {
+      init.headers = { "Content-Type": contentType };
+      init.body = await request.text();
+    } else if (
+      contentType &&
+      /\bapplication\/x-www-form-urlencoded\b/.test(contentType)
+    ) {
+      init.body = new URLSearchParams(await request.text());
+    } else {
+      init.body = await request.formData();
+    }
+  }
+
+  return init;
+}
+
+const DEFERRED_VALUE_PLACEHOLDER_PREFIX = "__deferred_promise:";
+export async function parseDeferredReadableStream(
+  stream: ReadableStream<Uint8Array>
+): Promise<DeferredData> {
+  if (!stream) {
+    throw new Error("parseDeferredReadableStream requires stream argument");
+  }
+
+  let deferredData: Record<string, Promise<unknown>> | undefined;
+  let deferredResolvers: Record<
+    string,
+    { resolve: (data: unknown) => void; reject: (error: unknown) => void }
+  > = {};
+
+  try {
+    let sectionReader = readStreamSections(stream);
+
+    // Read the first section to get the critical data
+    let initialSectionResult = await sectionReader.next();
+    let initialSection = initialSectionResult.value;
+    if (!initialSection) throw new Error("no critical data");
+    let criticalData = JSON.parse(initialSection);
+
+    // Setup deferred data and resolvers for later based on the critical data
+    if (typeof criticalData === "object" && criticalData !== null) {
+      for (let [eventKey, value] of Object.entries(criticalData)) {
+        if (
+          typeof value !== "string" ||
+          !value.startsWith(DEFERRED_VALUE_PLACEHOLDER_PREFIX)
+        ) {
+          continue;
+        }
+
+        deferredData = deferredData || {};
+
+        deferredData[eventKey] = new Promise((resolve, reject) => {
+          deferredResolvers[eventKey] = {
+            resolve: (value: unknown) => {
+              resolve(value);
+              delete deferredResolvers[eventKey];
+            },
+            reject: (error: unknown) => {
+              reject(error);
+              delete deferredResolvers[eventKey];
+            },
+          };
+        });
+      }
+    }
+
+    // Read the rest of the stream and resolve deferred promises
+    void (async () => {
+      try {
+        for await (let section of sectionReader) {
+          // Determine event type and data
+          let [event, ...sectionDataStrings] = section.split(":");
+          let sectionDataString = sectionDataStrings.join(":");
+          let data = JSON.parse(sectionDataString);
+
+          if (event === "data") {
+            for (let [key, value] of Object.entries(data)) {
+              if (deferredResolvers[key]) {
+                deferredResolvers[key].resolve(value);
+              }
+            }
+          } else if (event === "error") {
+            for (let [key, value] of Object.entries(data) as Iterable<
+              [string, { message: string; stack?: string }]
+            >) {
+              let err = new Error(value.message);
+              err.stack = value.stack;
+              if (deferredResolvers[key]) {
+                deferredResolvers[key].reject(err);
+              }
+            }
+          }
+        }
+
+        for (let [key, resolver] of Object.entries(deferredResolvers)) {
+          resolver.reject(
+            new AbortedDeferredError(`Deferred ${key} will never be resolved`)
+          );
+        }
+      } catch (error) {
+        // Reject any existing deferred promises if something blows up
+        for (let resolver of Object.values(deferredResolvers)) {
+          resolver.reject(error);
+        }
+      }
+    })();
+
+    return new DeferredData({ ...criticalData, ...deferredData });
+  } catch (error) {
+    for (let resolver of Object.values(deferredResolvers)) {
+      resolver.reject(error);
+    }
+
+    throw error;
+  }
+}
+
+async function* readStreamSections(stream: ReadableStream<Uint8Array>) {
+  let reader = stream.getReader();
+
+  let buffer: Uint8Array[] = [];
+  let sections: string[] = [];
+  let closed = false;
+  let encoder = new TextEncoder();
+  let decoder = new TextDecoder();
+
+  let readStreamSection = async () => {
+    if (sections.length > 0) return sections.shift();
+
+    // Read from the stream until we have at least one complete section to process
+    while (!closed && sections.length === 0) {
+      let chunk = await reader.read();
+      if (chunk.done) {
+        closed = true;
+        break;
+      }
+      // Buffer the raw chunks
+      buffer.push(chunk.value);
+
+      try {
+        // Attempt to split off a section from the buffer
+        let bufferedString = decoder.decode(mergeArrays(...buffer));
+        let splitSections = bufferedString.split("\n\n");
+        if (splitSections.length >= 2) {
+          // We have a complete section, so add it to the sections array
+          sections.push(...splitSections.slice(0, -1));
+          // Remove the section from the buffer and store the rest for future processing
+          buffer = [encoder.encode(splitSections.slice(-1).join("\n\n"))];
+        }
+
+        // If we successfully parsed at least one section, break out of reading the stream
+        // to allow upstream processing of the processable sections
+        if (sections.length > 0) {
+          break;
+        }
+      } catch {
+        // If we failed to parse the buffer it was because we failed to decode the stream
+        // because we are missing bytes that we haven't yet received, so continue reading
+        // from the stream until we have a complete section
+        continue;
+      }
+    }
+
+    // If we have a complete section, return it
+    if (sections.length > 0) {
+      return sections.shift();
+    }
+
+    // If we have no complete section, but we have no more chunks to process,
+    // split those sections and clear out the buffer as there is no more data
+    // to process. If this errors, let it bubble up as the stream ended
+    // without valid data
+    if (buffer.length > 0) {
+      let bufferedString = decoder.decode(mergeArrays(...buffer));
+      sections = bufferedString.split("\n\n").filter((s) => s);
+      buffer = [];
+    }
+
+    // Return any remaining sections that have been processed
+    return sections.shift();
+  };
+
+  let section = await readStreamSection();
+  while (section) {
+    yield section;
+    section = await readStreamSection();
+  }
+}
+
+function mergeArrays(...arrays: Uint8Array[]) {
+  let out = new Uint8Array(
+    arrays.reduce((total, arr) => total + arr.length, 0)
+  );
+  let offset = 0;
+  for (let arr of arrays) {
+    out.set(arr, offset);
+    offset += arr.length;
+  }
+  return out;
+}
diff --git a/packages/react-router-dom/ssr/entry.ts b/packages/react-router-dom/ssr/entry.ts
new file mode 100644
index 0000000000..d1e9c38889
--- /dev/null
+++ b/packages/react-router-dom/ssr/entry.ts
@@ -0,0 +1,61 @@
+import type { StaticHandlerContext } from "@remix-run/router";
+
+import type { RouteManifest, EntryRoute } from "./routes";
+import type { RouteModules } from "./routeModules";
+
+// Object passed to RemixContext.Provider
+
+type SerializedError = {
+  message: string;
+  stack?: string;
+};
+export interface RemixContextObject {
+  manifest: AssetsManifest;
+  routeModules: RouteModules;
+  criticalCss?: string;
+  serverHandoffString?: string;
+  future: FutureConfig;
+  isSpaMode: boolean;
+  abortDelay?: number;
+  serializeError?(error: Error): SerializedError;
+  renderMeta?: {
+    didRenderScripts?: boolean;
+    streamCache?: Record<
+      number,
+      Promise<void> & {
+        result?: {
+          done: boolean;
+          value: string;
+        };
+        error?: unknown;
+      }
+    >;
+  };
+}
+
+// Additional React-Router information needed at runtime, but not hydrated
+// through RemixContext
+export interface EntryContext extends RemixContextObject {
+  staticHandlerContext: StaticHandlerContext;
+  serverHandoffStream?: ReadableStream<Uint8Array>;
+}
+
+export interface FutureConfig {
+  v3_fetcherPersist: boolean;
+  v3_relativeSplatPath: boolean;
+  unstable_singleFetch: boolean;
+}
+
+export interface AssetsManifest {
+  entry: {
+    imports: string[];
+    module: string;
+  };
+  routes: RouteManifest<EntryRoute>;
+  url: string;
+  version: string;
+  hmr?: {
+    timestamp?: number;
+    runtime: string;
+  };
+}
diff --git a/packages/react-router-dom/ssr/errorBoundaries.tsx b/packages/react-router-dom/ssr/errorBoundaries.tsx
new file mode 100644
index 0000000000..fea3cf9f8b
--- /dev/null
+++ b/packages/react-router-dom/ssr/errorBoundaries.tsx
@@ -0,0 +1,156 @@
+import * as React from "react";
+import type { Location } from "react-router";
+import { isRouteErrorResponse } from "react-router";
+
+import { Scripts, useRemixContext } from "./components";
+
+type RemixErrorBoundaryProps = React.PropsWithChildren<{
+  location: Location;
+  error?: Error;
+}>;
+
+type RemixErrorBoundaryState = {
+  error: null | Error;
+  location: Location;
+};
+
+export class RemixErrorBoundary extends React.Component<
+  RemixErrorBoundaryProps,
+  RemixErrorBoundaryState
+> {
+  constructor(props: RemixErrorBoundaryProps) {
+    super(props);
+    this.state = { error: props.error || null, location: props.location };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  static getDerivedStateFromProps(
+    props: RemixErrorBoundaryProps,
+    state: RemixErrorBoundaryState
+  ) {
+    // When we get into an error state, the user will likely click "back" to the
+    // previous page that didn't have an error. Because this wraps the entire
+    // application (even the HTML!) that will have no effect--the error page
+    // continues to display. This gives us a mechanism to recover from the error
+    // when the location changes.
+    //
+    // Whether we're in an error state or not, we update the location in state
+    // so that when we are in an error state, it gets reset when a new location
+    // comes in and the user recovers from the error.
+    if (state.location !== props.location) {
+      return { error: props.error || null, location: props.location };
+    }
+
+    // If we're not changing locations, preserve the location but still surface
+    // any new errors that may come through. We retain the existing error, we do
+    // this because the error provided from the app state may be cleared without
+    // the location changing.
+    return { error: props.error || state.error, location: state.location };
+  }
+
+  render() {
+    if (this.state.error) {
+      return <RemixRootDefaultErrorBoundary error={this.state.error} />;
+    } else {
+      return this.props.children;
+    }
+  }
+}
+
+/**
+ * When app's don't provide a root level ErrorBoundary, we default to this.
+ */
+export function RemixRootDefaultErrorBoundary({ error }: { error: unknown }) {
+  console.error(error);
+
+  let heyDeveloper = (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+        console.log(
+          "💿 Hey developer 👋. You can provide a way better UX than this when your app throws errors. Check out https://remix.run/guides/errors for more information."
+        );
+      `,
+      }}
+    />
+  );
+
+  if (isRouteErrorResponse(error)) {
+    return (
+      <BoundaryShell title="Unhandled Thrown Response!">
+        <h1 style={{ fontSize: "24px" }}>
+          {error.status} {error.statusText}
+        </h1>
+        {heyDeveloper}
+      </BoundaryShell>
+    );
+  }
+
+  let errorInstance: Error;
+  if (error instanceof Error) {
+    errorInstance = error;
+  } else {
+    let errorString =
+      error == null
+        ? "Unknown Error"
+        : typeof error === "object" && "toString" in error
+        ? error.toString()
+        : JSON.stringify(error);
+    errorInstance = new Error(errorString);
+  }
+
+  return (
+    <BoundaryShell title="Application Error!">
+      <h1 style={{ fontSize: "24px" }}>Application Error</h1>
+      <pre
+        style={{
+          padding: "2rem",
+          background: "hsla(10, 50%, 50%, 0.1)",
+          color: "red",
+          overflow: "auto",
+        }}
+      >
+        {errorInstance.stack}
+      </pre>
+      {heyDeveloper}
+    </BoundaryShell>
+  );
+}
+
+export function BoundaryShell({
+  title,
+  renderScripts,
+  children,
+}: {
+  title: string;
+  renderScripts?: boolean;
+  children: React.ReactNode | React.ReactNode[];
+}) {
+  let { routeModules } = useRemixContext();
+
+  if (routeModules.root?.Layout) {
+    return children;
+  }
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,viewport-fit=cover"
+        />
+        <title>{title}</title>
+      </head>
+      <body>
+        <main style={{ fontFamily: "system-ui, sans-serif", padding: "2rem" }}>
+          {children}
+          {renderScripts ? <Scripts /> : null}
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/packages/react-router-dom/ssr/errors.ts b/packages/react-router-dom/ssr/errors.ts
new file mode 100644
index 0000000000..dd98cbc16e
--- /dev/null
+++ b/packages/react-router-dom/ssr/errors.ts
@@ -0,0 +1,46 @@
+import type { Router as RemixRouter } from "@remix-run/router";
+import { UNSAFE_ErrorResponseImpl as ErrorResponseImpl } from "@remix-run/router";
+
+export function deserializeErrors(
+  errors: RemixRouter["state"]["errors"]
+): RemixRouter["state"]["errors"] {
+  if (!errors) return null;
+  let entries = Object.entries(errors);
+  let serialized: RemixRouter["state"]["errors"] = {};
+  for (let [key, val] of entries) {
+    // Hey you!  If you change this, please change the corresponding logic in
+    // serializeErrors in remix-server-runtime/errors.ts :)
+    if (val && val.__type === "RouteErrorResponse") {
+      serialized[key] = new ErrorResponseImpl(
+        val.status,
+        val.statusText,
+        val.data,
+        val.internal === true
+      );
+    } else if (val && val.__type === "Error") {
+      // Attempt to reconstruct the right type of Error (i.e., ReferenceError)
+      if (val.__subType) {
+        let ErrorConstructor = window[val.__subType];
+        if (typeof ErrorConstructor === "function") {
+          try {
+            // @ts-expect-error
+            let error = new ErrorConstructor(val.message);
+            error.stack = val.stack;
+            serialized[key] = error;
+          } catch (e) {
+            // no-op - fall through and create a normal Error
+          }
+        }
+      }
+
+      if (serialized[key] == null) {
+        let error = new Error(val.message);
+        error.stack = val.stack;
+        serialized[key] = error;
+      }
+    } else {
+      serialized[key] = val;
+    }
+  }
+  return serialized;
+}
diff --git a/packages/react-router-dom/ssr/fallback.tsx b/packages/react-router-dom/ssr/fallback.tsx
new file mode 100644
index 0000000000..e22ccbf41e
--- /dev/null
+++ b/packages/react-router-dom/ssr/fallback.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { BoundaryShell } from "./errorBoundaries";
+
+// If the user sets `clientLoader.hydrate=true` somewhere but does not
+// provide a `HydrateFallback` at any level of the tree, then we need to at
+// least include `<Scripts>` in the SSR so we can hydrate the app and call the
+// `clientLoader` functions
+export function RemixRootDefaultHydrateFallback() {
+  return (
+    <BoundaryShell title="Loading..." renderScripts>
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+              console.log(
+                "💿 Hey developer 👋. You can provide a way better UX than this " +
+                "when your app is running \`clientLoader\` functions on hydration. " +
+                "Check out https://remix.run/route/hydrate-fallback for more information."
+              );
+            `,
+        }}
+      />
+    </BoundaryShell>
+  );
+}
diff --git a/packages/react-router-dom/ssr/invariant.ts b/packages/react-router-dom/ssr/invariant.ts
new file mode 100644
index 0000000000..3bf7430d72
--- /dev/null
+++ b/packages/react-router-dom/ssr/invariant.ts
@@ -0,0 +1,13 @@
+export default function invariant(
+  value: boolean,
+  message?: string
+): asserts value;
+export default function invariant<T>(
+  value: T | null | undefined,
+  message?: string
+): asserts value is T;
+export default function invariant(value: any, message?: string) {
+  if (value === false || value === null || typeof value === "undefined") {
+    throw new Error(message);
+  }
+}
diff --git a/packages/react-router-dom/ssr/links.ts b/packages/react-router-dom/ssr/links.ts
new file mode 100644
index 0000000000..0ee887daa5
--- /dev/null
+++ b/packages/react-router-dom/ssr/links.ts
@@ -0,0 +1,550 @@
+import type { AgnosticDataRouteMatch } from "@remix-run/router";
+import type { Location } from "react-router";
+import { parsePath } from "react-router";
+
+import type { AssetsManifest } from "./entry";
+import type { RouteModules, RouteModule } from "./routeModules";
+import type { EntryRoute } from "./routes";
+import { loadRouteModule } from "./routeModules";
+
+type Primitive = null | undefined | string | number | boolean | symbol | bigint;
+
+type LiteralUnion<LiteralType, BaseType extends Primitive> =
+  | LiteralType
+  | (BaseType & Record<never, never>);
+
+interface HtmlLinkProps {
+  /**
+   * Address of the hyperlink
+   */
+  href?: string;
+
+  /**
+   * How the element handles crossorigin requests
+   */
+  crossOrigin?: "anonymous" | "use-credentials";
+
+  /**
+   * Relationship between the document containing the hyperlink and the destination resource
+   */
+  rel: LiteralUnion<
+    | "alternate"
+    | "dns-prefetch"
+    | "icon"
+    | "manifest"
+    | "modulepreload"
+    | "next"
+    | "pingback"
+    | "preconnect"
+    | "prefetch"
+    | "preload"
+    | "prerender"
+    | "search"
+    | "stylesheet",
+    string
+  >;
+
+  /**
+   * Applicable media: "screen", "print", "(max-width: 764px)"
+   */
+  media?: string;
+
+  /**
+   * Integrity metadata used in Subresource Integrity checks
+   */
+  integrity?: string;
+
+  /**
+   * Language of the linked resource
+   */
+  hrefLang?: string;
+
+  /**
+   * Hint for the type of the referenced resource
+   */
+  type?: string;
+
+  /**
+   * Referrer policy for fetches initiated by the element
+   */
+  referrerPolicy?:
+    | ""
+    | "no-referrer"
+    | "no-referrer-when-downgrade"
+    | "same-origin"
+    | "origin"
+    | "strict-origin"
+    | "origin-when-cross-origin"
+    | "strict-origin-when-cross-origin"
+    | "unsafe-url";
+
+  /**
+   * Sizes of the icons (for rel="icon")
+   */
+  sizes?: string;
+
+  /**
+   * Potential destination for a preload request (for rel="preload" and rel="modulepreload")
+   */
+  as?: LiteralUnion<
+    | "audio"
+    | "audioworklet"
+    | "document"
+    | "embed"
+    | "fetch"
+    | "font"
+    | "frame"
+    | "iframe"
+    | "image"
+    | "manifest"
+    | "object"
+    | "paintworklet"
+    | "report"
+    | "script"
+    | "serviceworker"
+    | "sharedworker"
+    | "style"
+    | "track"
+    | "video"
+    | "worker"
+    | "xslt",
+    string
+  >;
+
+  /**
+   * Color to use when customizing a site's icon (for rel="mask-icon")
+   */
+  color?: string;
+
+  /**
+   * Whether the link is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * The title attribute has special semantics on this element: Title of the link; CSS style sheet set name.
+   */
+  title?: string;
+
+  /**
+   * Images to use in different situations, e.g., high-resolution displays,
+   * small monitors, etc. (for rel="preload")
+   */
+  imageSrcSet?: string;
+
+  /**
+   * Image sizes for different page layouts (for rel="preload")
+   */
+  imageSizes?: string;
+}
+
+interface HtmlLinkPreloadImage extends HtmlLinkProps {
+  /**
+   * Relationship between the document containing the hyperlink and the destination resource
+   */
+  rel: "preload";
+
+  /**
+   * Potential destination for a preload request (for rel="preload" and rel="modulepreload")
+   */
+  as: "image";
+
+  /**
+   * Address of the hyperlink
+   */
+  href?: string;
+
+  /**
+   * Images to use in different situations, e.g., high-resolution displays,
+   * small monitors, etc. (for rel="preload")
+   */
+  imageSrcSet: string;
+
+  /**
+   * Image sizes for different page layouts (for rel="preload")
+   */
+  imageSizes?: string;
+}
+
+/**
+ * Represents a `<link>` element.
+ *
+ * WHATWG Specification: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
+ */
+export type HtmlLinkDescriptor =
+  // Must have an href *unless* it's a `<link rel="preload" as="image">` with an
+  // `imageSrcSet` and `imageSizes` props
+  | (HtmlLinkProps & Pick<Required<HtmlLinkProps>, "href">)
+  | (HtmlLinkPreloadImage & Pick<Required<HtmlLinkPreloadImage>, "imageSizes">)
+  | (HtmlLinkPreloadImage &
+      Pick<Required<HtmlLinkPreloadImage>, "href"> & { imageSizes?: never });
+
+export interface PrefetchPageDescriptor
+  extends Omit<
+    HtmlLinkDescriptor,
+    | "href"
+    | "rel"
+    | "type"
+    | "sizes"
+    | "imageSrcSet"
+    | "imageSizes"
+    | "as"
+    | "color"
+    | "title"
+  > {
+  /**
+   * The absolute path of the page to prefetch.
+   */
+  page: string;
+}
+
+export type LinkDescriptor = HtmlLinkDescriptor | PrefetchPageDescriptor;
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Gets all the links for a set of matches. The modules are assumed to have been
+ * loaded already.
+ */
+export function getKeyedLinksForMatches(
+  matches: AgnosticDataRouteMatch[],
+  routeModules: RouteModules,
+  manifest: AssetsManifest
+): KeyedLinkDescriptor[] {
+  let descriptors = matches
+    .map((match): LinkDescriptor[][] => {
+      let module = routeModules[match.route.id];
+      let route = manifest.routes[match.route.id];
+      return [
+        route.css ? route.css.map((href) => ({ rel: "stylesheet", href })) : [],
+        module?.links?.() || [],
+      ];
+    })
+    .flat(2);
+
+  let preloads = getCurrentPageModulePreloadHrefs(matches, manifest);
+  return dedupeLinkDescriptors(descriptors, preloads);
+}
+
+export async function prefetchStyleLinks(
+  route: EntryRoute,
+  routeModule: RouteModule
+): Promise<void> {
+  if ((!route.css && !routeModule.links) || !isPreloadSupported()) return;
+
+  let descriptors = [];
+  if (route.css) {
+    descriptors.push(...route.css.map((href) => ({ rel: "stylesheet", href })));
+  }
+  if (routeModule.links) {
+    descriptors.push(...routeModule.links());
+  }
+  if (descriptors.length === 0) return;
+
+  let styleLinks: HtmlLinkDescriptor[] = [];
+  for (let descriptor of descriptors) {
+    if (!isPageLinkDescriptor(descriptor) && descriptor.rel === "stylesheet") {
+      styleLinks.push({
+        ...descriptor,
+        rel: "preload",
+        as: "style",
+      } as HtmlLinkDescriptor);
+    }
+  }
+
+  // don't block for non-matching media queries, or for stylesheets that are
+  // already in the DOM (active route revalidations)
+  let matchingLinks = styleLinks.filter(
+    (link) =>
+      (!link.media || window.matchMedia(link.media).matches) &&
+      !document.querySelector(`link[rel="stylesheet"][href="${link.href}"]`)
+  );
+
+  await Promise.all(matchingLinks.map(prefetchStyleLink));
+}
+
+async function prefetchStyleLink(
+  descriptor: HtmlLinkDescriptor
+): Promise<void> {
+  return new Promise((resolve) => {
+    let link = document.createElement("link");
+    Object.assign(link, descriptor);
+
+    function removeLink() {
+      // if a navigation interrupts this prefetch React will update the <head>
+      // and remove the link we put in there manually, so we check if it's still
+      // there before trying to remove it
+      if (document.head.contains(link)) {
+        document.head.removeChild(link);
+      }
+    }
+
+    link.onload = () => {
+      removeLink();
+      resolve();
+    };
+
+    link.onerror = () => {
+      removeLink();
+      resolve();
+    };
+
+    document.head.appendChild(link);
+  });
+}
+
+////////////////////////////////////////////////////////////////////////////////
+export function isPageLinkDescriptor(
+  object: any
+): object is PrefetchPageDescriptor {
+  return object != null && typeof object.page === "string";
+}
+
+function isHtmlLinkDescriptor(object: any): object is HtmlLinkDescriptor {
+  if (object == null) {
+    return false;
+  }
+
+  // <link> may not have an href if <link rel="preload"> is used with imageSrcSet + imageSizes
+  // https://github.com/remix-run/remix/issues/184
+  // https://html.spec.whatwg.org/commit-snapshots/cb4f5ff75de5f4cbd7013c4abad02f21c77d4d1c/#attr-link-imagesrcset
+  if (object.href == null) {
+    return (
+      object.rel === "preload" &&
+      typeof object.imageSrcSet === "string" &&
+      typeof object.imageSizes === "string"
+    );
+  }
+
+  return typeof object.rel === "string" && typeof object.href === "string";
+}
+
+export type KeyedHtmlLinkDescriptor = { key: string; link: HtmlLinkDescriptor };
+
+export async function getKeyedPrefetchLinks(
+  matches: AgnosticDataRouteMatch[],
+  manifest: AssetsManifest,
+  routeModules: RouteModules
+): Promise<KeyedHtmlLinkDescriptor[]> {
+  let links = await Promise.all(
+    matches.map(async (match) => {
+      let mod = await loadRouteModule(
+        manifest.routes[match.route.id],
+        routeModules
+      );
+      return mod.links ? mod.links() : [];
+    })
+  );
+
+  return dedupeLinkDescriptors(
+    links
+      .flat(1)
+      .filter(isHtmlLinkDescriptor)
+      .filter((link) => link.rel === "stylesheet" || link.rel === "preload")
+      .map((link) =>
+        link.rel === "stylesheet"
+          ? ({ ...link, rel: "prefetch", as: "style" } as HtmlLinkDescriptor)
+          : ({ ...link, rel: "prefetch" } as HtmlLinkDescriptor)
+      )
+  );
+}
+
+// This is ridiculously identical to transition.ts `filterMatchesToLoad`
+export function getNewMatchesForLinks(
+  page: string,
+  nextMatches: AgnosticDataRouteMatch[],
+  currentMatches: AgnosticDataRouteMatch[],
+  manifest: AssetsManifest,
+  location: Location,
+  mode: "data" | "assets"
+): AgnosticDataRouteMatch[] {
+  let path = parsePathPatch(page);
+
+  let isNew = (match: AgnosticDataRouteMatch, index: number) => {
+    if (!currentMatches[index]) return true;
+    return match.route.id !== currentMatches[index].route.id;
+  };
+
+  let matchPathChanged = (match: AgnosticDataRouteMatch, index: number) => {
+    return (
+      // param change, /users/123 -> /users/456
+      currentMatches[index].pathname !== match.pathname ||
+      // splat param changed, which is not present in match.path
+      // e.g. /files/images/avatar.jpg -> files/finances.xls
+      (currentMatches[index].route.path?.endsWith("*") &&
+        currentMatches[index].params["*"] !== match.params["*"])
+    );
+  };
+
+  // NOTE: keep this mostly up-to-date w/ the transition data diff, but this
+  // version doesn't care about submissions
+  let newMatches =
+    mode === "data" && location.search !== path.search
+      ? // this is really similar to stuff in transition.ts, maybe somebody smarter
+        // than me (or in less of a hurry) can share some of it. You're the best.
+        nextMatches.filter((match, index) => {
+          let manifestRoute = manifest.routes[match.route.id];
+          if (!manifestRoute.hasLoader) {
+            return false;
+          }
+
+          if (isNew(match, index) || matchPathChanged(match, index)) {
+            return true;
+          }
+
+          if (match.route.shouldRevalidate) {
+            let routeChoice = match.route.shouldRevalidate({
+              currentUrl: new URL(
+                location.pathname + location.search + location.hash,
+                window.origin
+              ),
+              currentParams: currentMatches[0]?.params || {},
+              nextUrl: new URL(page, window.origin),
+              nextParams: match.params,
+              defaultShouldRevalidate: true,
+            });
+            if (typeof routeChoice === "boolean") {
+              return routeChoice;
+            }
+          }
+          return true;
+        })
+      : nextMatches.filter((match, index) => {
+          let manifestRoute = manifest.routes[match.route.id];
+          return (
+            (mode === "assets" || manifestRoute.hasLoader) &&
+            (isNew(match, index) || matchPathChanged(match, index))
+          );
+        });
+
+  return newMatches;
+}
+
+export function getDataLinkHrefs(
+  page: string,
+  matches: AgnosticDataRouteMatch[],
+  manifest: AssetsManifest
+): string[] {
+  let path = parsePathPatch(page);
+  return dedupeHrefs(
+    matches
+      .filter((match) => manifest.routes[match.route.id].hasLoader)
+      .map((match) => {
+        let { pathname, search } = path;
+        let searchParams = new URLSearchParams(search);
+        searchParams.set("_data", match.route.id);
+        return `${pathname}?${searchParams}`;
+      })
+  );
+}
+
+export function getModuleLinkHrefs(
+  matches: AgnosticDataRouteMatch[],
+  manifestPatch: AssetsManifest
+): string[] {
+  return dedupeHrefs(
+    matches
+      .map((match) => {
+        let route = manifestPatch.routes[match.route.id];
+        let hrefs = [route.module];
+        if (route.imports) {
+          hrefs = hrefs.concat(route.imports);
+        }
+        return hrefs;
+      })
+      .flat(1)
+  );
+}
+
+// The `<Script>` will render rel=modulepreload for the current page, we don't
+// need to include them in a page prefetch, this gives us the list to remove
+// while deduping.
+function getCurrentPageModulePreloadHrefs(
+  matches: AgnosticDataRouteMatch[],
+  manifest: AssetsManifest
+): string[] {
+  return dedupeHrefs(
+    matches
+      .map((match) => {
+        let route = manifest.routes[match.route.id];
+        let hrefs = [route.module];
+
+        if (route.imports) {
+          hrefs = hrefs.concat(route.imports);
+        }
+
+        return hrefs;
+      })
+      .flat(1)
+  );
+}
+
+function dedupeHrefs(hrefs: string[]): string[] {
+  return [...new Set(hrefs)];
+}
+
+function sortKeys<Obj extends { [Key in keyof Obj]: Obj[Key] }>(obj: Obj): Obj {
+  let sorted = {} as Obj;
+  let keys = Object.keys(obj).sort();
+
+  for (let key of keys) {
+    sorted[key as keyof Obj] = obj[key as keyof Obj];
+  }
+
+  return sorted;
+}
+
+type KeyedLinkDescriptor<Descriptor extends LinkDescriptor = LinkDescriptor> = {
+  key: string;
+  link: Descriptor;
+};
+
+function dedupeLinkDescriptors<Descriptor extends LinkDescriptor>(
+  descriptors: Descriptor[],
+  preloads?: string[]
+): KeyedLinkDescriptor<Descriptor>[] {
+  let set = new Set();
+  let preloadsSet = new Set(preloads);
+
+  return descriptors.reduce((deduped, descriptor) => {
+    let alreadyModulePreload =
+      preloads &&
+      !isPageLinkDescriptor(descriptor) &&
+      descriptor.as === "script" &&
+      descriptor.href &&
+      preloadsSet.has(descriptor.href);
+
+    if (alreadyModulePreload) {
+      return deduped;
+    }
+
+    let key = JSON.stringify(sortKeys(descriptor));
+    if (!set.has(key)) {
+      set.add(key);
+      deduped.push({ key, link: descriptor });
+    }
+
+    return deduped;
+  }, [] as KeyedLinkDescriptor<Descriptor>[]);
+}
+
+// https://github.com/remix-run/history/issues/897
+function parsePathPatch(href: string) {
+  let path = parsePath(href);
+  if (path.search === undefined) path.search = "";
+  return path;
+}
+
+// Detect if this browser supports <link rel="preload"> (or has it enabled).
+// Originally added to handle the firefox `network.preload` config:
+//   https://bugzilla.mozilla.org/show_bug.cgi?id=1847811
+let _isPreloadSupported: boolean | undefined;
+function isPreloadSupported(): boolean {
+  if (_isPreloadSupported !== undefined) {
+    return _isPreloadSupported;
+  }
+  let el: HTMLLinkElement | null = document.createElement("link");
+  _isPreloadSupported = el.relList.supports("preload");
+  el = null;
+  return _isPreloadSupported;
+}
diff --git a/packages/react-router-dom/ssr/markup.ts b/packages/react-router-dom/ssr/markup.ts
new file mode 100644
index 0000000000..49896900ef
--- /dev/null
+++ b/packages/react-router-dom/ssr/markup.ts
@@ -0,0 +1,27 @@
+// This escapeHtml utility is based on https://github.com/zertosh/htmlescape
+// License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
+
+// We've chosen to inline the utility here to reduce the number of npm dependencies we have,
+// slightly decrease the code size compared the original package and make it esm compatible.
+
+const ESCAPE_LOOKUP: { [match: string]: string } = {
+  "&": "\\u0026",
+  ">": "\\u003e",
+  "<": "\\u003c",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029",
+};
+
+const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
+
+export function escapeHtml(html: string) {
+  return html.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
+}
+
+export interface SafeHtml {
+  __html: string;
+}
+
+export function createHtml(html: string): SafeHtml {
+  return { __html: html };
+}
diff --git a/packages/react-router-dom/ssr/routeModules.ts b/packages/react-router-dom/ssr/routeModules.ts
new file mode 100644
index 0000000000..520fba450a
--- /dev/null
+++ b/packages/react-router-dom/ssr/routeModules.ts
@@ -0,0 +1,216 @@
+import type { ComponentType, ReactElement } from "react";
+import type {
+  ActionFunction as RRActionFunction,
+  ActionFunctionArgs as RRActionFunctionArgs,
+  LoaderFunction as RRLoaderFunction,
+  LoaderFunctionArgs as RRLoaderFunctionArgs,
+  DataRouteMatch,
+  Params,
+  Location,
+  ShouldRevalidateFunction,
+} from "react-router";
+import type { LoaderFunction } from "@remix-run/server-runtime";
+
+import type { SerializeFrom } from "./components";
+import type { AppData } from "./data";
+import type { LinkDescriptor } from "./links";
+import type { EntryRoute } from "./routes";
+
+export interface RouteModules {
+  [routeId: string]: RouteModule | undefined;
+}
+
+export interface RouteModule {
+  clientAction?: ClientActionFunction;
+  clientLoader?: ClientLoaderFunction;
+  ErrorBoundary?: ErrorBoundaryComponent;
+  HydrateFallback?: HydrateFallbackComponent;
+  Layout?: LayoutComponent;
+  default: RouteComponent;
+  handle?: RouteHandle;
+  links?: LinksFunction;
+  meta?: MetaFunction;
+  shouldRevalidate?: ShouldRevalidateFunction;
+}
+
+/**
+ * A function that handles data mutations for a route on the client
+ */
+export type ClientActionFunction = (
+  args: ClientActionFunctionArgs
+) => ReturnType<RRActionFunction>;
+
+/**
+ * Arguments passed to a route `clientAction` function
+ */
+export type ClientActionFunctionArgs = RRActionFunctionArgs<undefined> & {
+  serverAction: <T = AppData>() => Promise<SerializeFrom<T>>;
+};
+
+/**
+ * A function that loads data for a route on the client
+ */
+export type ClientLoaderFunction = ((
+  args: ClientLoaderFunctionArgs
+) => ReturnType<RRLoaderFunction>) & {
+  hydrate?: boolean;
+};
+
+/**
+ * Arguments passed to a route `clientLoader` function
+ */
+export type ClientLoaderFunctionArgs = RRLoaderFunctionArgs<undefined> & {
+  serverLoader: <T = AppData>() => Promise<SerializeFrom<T>>;
+};
+
+/**
+ * ErrorBoundary to display for this route
+ */
+export type ErrorBoundaryComponent = ComponentType;
+
+/**
+ * `<Route HydrateFallback>` component to render on initial loads
+ * when client loaders are present
+ */
+export type HydrateFallbackComponent = ComponentType;
+
+/**
+ * Optional, root-only `<Route Layout>` component to wrap the root content in.
+ * Useful for defining the <html>/<head>/<body> document shell shared by the
+ * Component, HydrateFallback, and ErrorBoundary
+ */
+export type LayoutComponent = ComponentType<{
+  children: ReactElement<
+    unknown,
+    ErrorBoundaryComponent | HydrateFallbackComponent | RouteComponent
+  >;
+}>;
+
+/**
+ * A function that defines `<link>` tags to be inserted into the `<head>` of
+ * the document on route transitions.
+ *
+ * @see https://remix.run/route/meta
+ */
+export interface LinksFunction {
+  (): LinkDescriptor[];
+}
+
+export interface MetaMatch<
+  RouteId extends string = string,
+  Loader extends LoaderFunction | unknown = unknown
+> {
+  id: RouteId;
+  pathname: DataRouteMatch["pathname"];
+  data: Loader extends LoaderFunction ? SerializeFrom<Loader> : unknown;
+  handle?: RouteHandle;
+  params: DataRouteMatch["params"];
+  meta: MetaDescriptor[];
+  error?: unknown;
+}
+
+export type MetaMatches<
+  MatchLoaders extends Record<string, LoaderFunction | unknown> = Record<
+    string,
+    unknown
+  >
+> = Array<
+  {
+    [K in keyof MatchLoaders]: MetaMatch<
+      Exclude<K, number | symbol>,
+      MatchLoaders[K]
+    >;
+  }[keyof MatchLoaders]
+>;
+
+export interface MetaArgs<
+  Loader extends LoaderFunction | unknown = unknown,
+  MatchLoaders extends Record<string, LoaderFunction | unknown> = Record<
+    string,
+    unknown
+  >
+> {
+  data:
+    | (Loader extends LoaderFunction ? SerializeFrom<Loader> : AppData)
+    | undefined;
+  params: Params;
+  location: Location;
+  matches: MetaMatches<MatchLoaders>;
+  error?: unknown;
+}
+
+export interface MetaFunction<
+  Loader extends LoaderFunction | unknown = unknown,
+  MatchLoaders extends Record<string, LoaderFunction | unknown> = Record<
+    string,
+    unknown
+  >
+> {
+  (args: MetaArgs<Loader, MatchLoaders>): MetaDescriptor[] | undefined;
+}
+
+export type MetaDescriptor =
+  | { charSet: "utf-8" }
+  | { title: string }
+  | { name: string; content: string }
+  | { property: string; content: string }
+  | { httpEquiv: string; content: string }
+  | { "script:ld+json": LdJsonObject }
+  | { tagName: "meta" | "link"; [name: string]: string }
+  | { [name: string]: unknown };
+
+type LdJsonObject = { [Key in string]: LdJsonValue } & {
+  [Key in string]?: LdJsonValue | undefined;
+};
+type LdJsonArray = LdJsonValue[] | readonly LdJsonValue[];
+type LdJsonPrimitive = string | number | boolean | null;
+type LdJsonValue = LdJsonPrimitive | LdJsonObject | LdJsonArray;
+
+/**
+ * A React component that is rendered for a route.
+ */
+export type RouteComponent = ComponentType<{}>;
+
+/**
+ * An arbitrary object that is associated with a route.
+ *
+ * @see https://remix.run/route/handle
+ */
+export type RouteHandle = unknown;
+
+export async function loadRouteModule(
+  route: EntryRoute,
+  routeModulesCache: RouteModules
+): Promise<RouteModule> {
+  if (route.id in routeModulesCache) {
+    return routeModulesCache[route.id] as RouteModule;
+  }
+
+  try {
+    let routeModule = await import(/* webpackIgnore: true */ route.module);
+    routeModulesCache[route.id] = routeModule;
+    return routeModule;
+  } catch (error: unknown) {
+    // User got caught in the middle of a deploy and the CDN no longer has the
+    // asset we're trying to import! Reload from the server and the user
+    // (should) get the new manifest--unless the developer purged the static
+    // assets, the manifest path, but not the documents 😬
+    if (
+      window.__remixContext &&
+      window.__remixContext.isSpaMode &&
+      // @ts-expect-error
+      typeof import.meta.hot !== "undefined"
+    ) {
+      // In SPA Mode (which implies vite) we don't want to perform a hard reload
+      // on dev-time errors since it's a vite compilation error and a reload is
+      // just going to fail with the same issue.  Let the UI bubble to the error
+      // boundary and let them see the error in the overlay or the dev server log
+      console.error(`Error loading route module \`${route.module}\`:`, error);
+      throw error;
+    }
+    window.location.reload();
+    return new Promise(() => {
+      // check out of this hook cause the DJs never gonna re[s]olve this
+    });
+  }
+}
diff --git a/packages/react-router-dom/ssr/routes.tsx b/packages/react-router-dom/ssr/routes.tsx
new file mode 100644
index 0000000000..25aa4e031d
--- /dev/null
+++ b/packages/react-router-dom/ssr/routes.tsx
@@ -0,0 +1,634 @@
+import * as React from "react";
+import type { HydrationState } from "@remix-run/router";
+import { UNSAFE_ErrorResponseImpl as ErrorResponse } from "@remix-run/router";
+import type {
+  ActionFunctionArgs,
+  LoaderFunctionArgs,
+  DataRouteObject,
+  ShouldRevalidateFunction,
+} from "react-router";
+import { redirect, useRouteError } from "react-router";
+
+import type { RouteModule, RouteModules } from "./routeModules";
+import { loadRouteModule } from "./routeModules";
+import {
+  fetchData,
+  isCatchResponse,
+  isDeferredData,
+  isDeferredResponse,
+  isRedirectResponse,
+  isResponse,
+  parseDeferredReadableStream,
+} from "./data";
+import type { FutureConfig } from "./entry";
+import { prefetchStyleLinks } from "./links";
+import { RemixRootDefaultErrorBoundary } from "./errorBoundaries";
+import { RemixRootDefaultHydrateFallback } from "./fallback";
+import invariant from "./invariant";
+
+export interface RouteManifest<Route> {
+  [routeId: string]: Route;
+}
+
+// NOTE: make sure to change the Route in server-runtime if you change this
+interface Route {
+  index?: boolean;
+  caseSensitive?: boolean;
+  id: string;
+  parentId?: string;
+  path?: string;
+}
+
+// NOTE: make sure to change the EntryRoute in server-runtime if you change this
+export interface EntryRoute extends Route {
+  hasAction: boolean;
+  hasLoader: boolean;
+  hasClientAction: boolean;
+  hasClientLoader: boolean;
+  hasErrorBoundary: boolean;
+  imports?: string[];
+  css?: string[];
+  module: string;
+  parentId?: string;
+}
+
+// Create a map of routes by parentId to use recursively instead of
+// repeatedly filtering the manifest.
+function groupRoutesByParentId(manifest: RouteManifest<EntryRoute>) {
+  let routes: Record<string, Omit<EntryRoute, "children">[]> = {};
+
+  Object.values(manifest).forEach((route) => {
+    let parentId = route.parentId || "";
+    if (!routes[parentId]) {
+      routes[parentId] = [];
+    }
+    routes[parentId].push(route);
+  });
+
+  return routes;
+}
+
+function getRouteComponents(
+  route: EntryRoute,
+  routeModule: RouteModule,
+  isSpaMode: boolean
+) {
+  let Component = getRouteModuleComponent(routeModule);
+  // HydrateFallback can only exist on the root route in SPA Mode
+  let HydrateFallback =
+    routeModule.HydrateFallback && (!isSpaMode || route.id === "root")
+      ? routeModule.HydrateFallback
+      : route.id === "root"
+      ? RemixRootDefaultHydrateFallback
+      : undefined;
+  let ErrorBoundary = routeModule.ErrorBoundary
+    ? routeModule.ErrorBoundary
+    : route.id === "root"
+    ? () => <RemixRootDefaultErrorBoundary error={useRouteError()} />
+    : undefined;
+
+  if (route.id === "root" && routeModule.Layout) {
+    return {
+      ...(Component
+        ? {
+            element: (
+              <routeModule.Layout>
+                <Component />
+              </routeModule.Layout>
+            ),
+          }
+        : { Component }),
+      ...(ErrorBoundary
+        ? {
+            errorElement: (
+              <routeModule.Layout>
+                <ErrorBoundary />
+              </routeModule.Layout>
+            ),
+          }
+        : { ErrorBoundary }),
+      ...(HydrateFallback
+        ? {
+            hydrateFallbackElement: (
+              <routeModule.Layout>
+                <HydrateFallback />
+              </routeModule.Layout>
+            ),
+          }
+        : { HydrateFallback }),
+    };
+  }
+
+  return { Component, ErrorBoundary, HydrateFallback };
+}
+
+export function createServerRoutes(
+  manifest: RouteManifest<EntryRoute>,
+  routeModules: RouteModules,
+  future: FutureConfig,
+  isSpaMode: boolean,
+  parentId: string = "",
+  routesByParentId: Record<
+    string,
+    Omit<EntryRoute, "children">[]
+  > = groupRoutesByParentId(manifest),
+  spaModeLazyPromise = Promise.resolve({ Component: () => null })
+): DataRouteObject[] {
+  return (routesByParentId[parentId] || []).map((route) => {
+    let routeModule = routeModules[route.id];
+    invariant(
+      routeModule,
+      "No `routeModule` available to create server routes"
+    );
+
+    let dataRoute: DataRouteObject = {
+      ...getRouteComponents(route, routeModule, isSpaMode),
+      caseSensitive: route.caseSensitive,
+      id: route.id,
+      index: route.index,
+      path: route.path,
+      handle: routeModule.handle,
+      // For SPA Mode, all routes are lazy except root.  However we tell the
+      // router root is also lazy here too since we don't need a full
+      // implementation - we just need a `lazy` prop to tell the RR rendering
+      // where to stop which is always at the root route in SPA mode
+      lazy: isSpaMode ? () => spaModeLazyPromise : undefined,
+      // For partial hydration rendering, we need to indicate when the route
+      // has a loader/clientLoader, but it won't ever be called during the static
+      // render, so just give it a no-op function so we can render down to the
+      // proper fallback
+      loader: route.hasLoader || route.hasClientLoader ? () => null : undefined,
+      // We don't need action/shouldRevalidate on these routes since they're
+      // for a static render
+    };
+
+    let children = createServerRoutes(
+      manifest,
+      routeModules,
+      future,
+      isSpaMode,
+      route.id,
+      routesByParentId,
+      spaModeLazyPromise
+    );
+    if (children.length > 0) dataRoute.children = children;
+    return dataRoute;
+  });
+}
+
+export function createClientRoutesWithHMRRevalidationOptOut(
+  needsRevalidation: Set<string>,
+  manifest: RouteManifest<EntryRoute>,
+  routeModulesCache: RouteModules,
+  initialState: HydrationState,
+  future: FutureConfig,
+  isSpaMode: boolean
+) {
+  return createClientRoutes(
+    manifest,
+    routeModulesCache,
+    initialState,
+    future,
+    isSpaMode,
+    "",
+    groupRoutesByParentId(manifest),
+    needsRevalidation
+  );
+}
+
+function preventInvalidServerHandlerCall(
+  type: "action" | "loader",
+  route: Omit<EntryRoute, "children">,
+  isSpaMode: boolean
+) {
+  if (isSpaMode) {
+    let fn = type === "action" ? "serverAction()" : "serverLoader()";
+    let msg = `You cannot call ${fn} in SPA Mode (routeId: "${route.id}")`;
+    console.error(msg);
+    throw new ErrorResponse(400, "Bad Request", new Error(msg), true);
+  }
+
+  let fn = type === "action" ? "serverAction()" : "serverLoader()";
+  let msg =
+    `You are trying to call ${fn} on a route that does not have a server ` +
+    `${type} (routeId: "${route.id}")`;
+  if (
+    (type === "loader" && !route.hasLoader) ||
+    (type === "action" && !route.hasAction)
+  ) {
+    console.error(msg);
+    throw new ErrorResponse(400, "Bad Request", new Error(msg), true);
+  }
+}
+
+function noActionDefinedError(
+  type: "action" | "clientAction",
+  routeId: string
+) {
+  let article = type === "clientAction" ? "a" : "an";
+  let msg =
+    `Route "${routeId}" does not have ${article} ${type}, but you are trying to ` +
+    `submit to it. To fix this, please add ${article} \`${type}\` function to the route`;
+  console.error(msg);
+  throw new ErrorResponse(405, "Method Not Allowed", new Error(msg), true);
+}
+
+export function createClientRoutes(
+  manifest: RouteManifest<EntryRoute>,
+  routeModulesCache: RouteModules,
+  initialState: HydrationState,
+  future: FutureConfig,
+  isSpaMode: boolean,
+  parentId: string = "",
+  routesByParentId: Record<
+    string,
+    Omit<EntryRoute, "children">[]
+  > = groupRoutesByParentId(manifest),
+  needsRevalidation?: Set<string>
+): DataRouteObject[] {
+  return (routesByParentId[parentId] || []).map((route) => {
+    let routeModule = routeModulesCache[route.id];
+
+    // Fetch data from the server either via single fetch or the standard `?_data`
+    // request.  Unwrap it when called via `serverLoader`/`serverAction` in a
+    // client handler, otherwise return the raw response for the router to unwrap
+    async function fetchServerHandlerAndMaybeUnwrap(
+      request: Request,
+      unwrap: boolean,
+      singleFetch: unknown
+    ) {
+      if (typeof singleFetch === "function") {
+        let result = await singleFetch();
+        return result;
+      }
+      let result = await fetchServerHandler(request, route);
+      return unwrap ? unwrapServerResponse(result) : result;
+    }
+
+    function fetchServerLoader(
+      request: Request,
+      unwrap: boolean,
+      singleFetch: unknown
+    ) {
+      if (!route.hasLoader) return Promise.resolve(null);
+      return fetchServerHandlerAndMaybeUnwrap(request, unwrap, singleFetch);
+    }
+
+    function fetchServerAction(
+      request: Request,
+      unwrap: boolean,
+      singleFetch: unknown
+    ) {
+      if (!route.hasAction) {
+        throw noActionDefinedError("action", route.id);
+      }
+      return fetchServerHandlerAndMaybeUnwrap(request, unwrap, singleFetch);
+    }
+
+    async function prefetchStylesAndCallHandler(
+      handler: () => Promise<unknown>
+    ) {
+      // Only prefetch links if we exist in the routeModulesCache (critical modules
+      // and navigating back to pages previously loaded via route.lazy).  Initial
+      // execution of route.lazy (when the module is not in the cache) will handle
+      // prefetching style links via loadRouteModuleWithBlockingLinks.
+      let cachedModule = routeModulesCache[route.id];
+      let linkPrefetchPromise = cachedModule
+        ? prefetchStyleLinks(route, cachedModule)
+        : Promise.resolve();
+      try {
+        return handler();
+      } finally {
+        await linkPrefetchPromise;
+      }
+    }
+
+    let dataRoute: DataRouteObject = {
+      id: route.id,
+      index: route.index,
+      path: route.path,
+    };
+
+    if (routeModule) {
+      // Use critical path modules directly
+      Object.assign(dataRoute, {
+        ...dataRoute,
+        ...getRouteComponents(route, routeModule, isSpaMode),
+        handle: routeModule.handle,
+        shouldRevalidate: needsRevalidation
+          ? wrapShouldRevalidateForHdr(
+              route.id,
+              routeModule.shouldRevalidate,
+              needsRevalidation
+            )
+          : routeModule.shouldRevalidate,
+      });
+
+      let initialData = initialState?.loaderData?.[route.id];
+      let initialError = initialState?.errors?.[route.id];
+      let isHydrationRequest =
+        needsRevalidation == null &&
+        (routeModule.clientLoader?.hydrate === true || !route.hasLoader);
+
+      dataRoute.loader = async (
+        { request, params }: LoaderFunctionArgs,
+        singleFetch?: unknown
+      ) => {
+        try {
+          let result = await prefetchStylesAndCallHandler(async () => {
+            invariant(
+              routeModule,
+              "No `routeModule` available for critical-route loader"
+            );
+            if (!routeModule.clientLoader) {
+              if (isSpaMode) return null;
+              // Call the server when no client loader exists
+              return fetchServerLoader(request, false, singleFetch);
+            }
+
+            return routeModule.clientLoader({
+              request,
+              params,
+              async serverLoader() {
+                preventInvalidServerHandlerCall("loader", route, isSpaMode);
+
+                // On the first call, resolve with the server result
+                if (isHydrationRequest) {
+                  if (initialError !== undefined) {
+                    throw initialError;
+                  }
+                  return initialData;
+                }
+
+                // Call the server loader for client-side navigations
+                return fetchServerLoader(request, true, singleFetch);
+              },
+            });
+          });
+          return result;
+        } finally {
+          // Whether or not the user calls `serverLoader`, we only let this
+          // stick around as true for one loader call
+          isHydrationRequest = false;
+        }
+      };
+
+      // Let React Router know whether to run this on hydration
+      dataRoute.loader.hydrate = shouldHydrateRouteLoader(
+        route,
+        routeModule,
+        isSpaMode
+      );
+
+      dataRoute.action = (
+        { request, params }: ActionFunctionArgs,
+        singleFetch?: unknown
+      ) => {
+        return prefetchStylesAndCallHandler(async () => {
+          invariant(
+            routeModule,
+            "No `routeModule` available for critical-route action"
+          );
+          if (!routeModule.clientAction) {
+            if (isSpaMode) {
+              throw noActionDefinedError("clientAction", route.id);
+            }
+            return fetchServerAction(request, false, singleFetch);
+          }
+
+          return routeModule.clientAction({
+            request,
+            params,
+            async serverAction() {
+              preventInvalidServerHandlerCall("action", route, isSpaMode);
+              return fetchServerAction(request, true, singleFetch);
+            },
+          });
+        });
+      };
+    } else {
+      // If the lazy route does not have a client loader/action we want to call
+      // the server loader/action in parallel with the module load so we add
+      // loader/action as static props on the route
+      if (!route.hasClientLoader) {
+        dataRoute.loader = (
+          { request }: LoaderFunctionArgs,
+          singleFetch?: unknown
+        ) =>
+          prefetchStylesAndCallHandler(() => {
+            if (isSpaMode) return Promise.resolve(null);
+            return fetchServerLoader(request, false, singleFetch);
+          });
+      }
+      if (!route.hasClientAction) {
+        dataRoute.action = (
+          { request }: ActionFunctionArgs,
+          singleFetch?: unknown
+        ) =>
+          prefetchStylesAndCallHandler(() => {
+            if (isSpaMode) {
+              throw noActionDefinedError("clientAction", route.id);
+            }
+            return fetchServerAction(request, false, singleFetch);
+          });
+      }
+
+      // Load all other modules via route.lazy()
+      dataRoute.lazy = async () => {
+        let mod = await loadRouteModuleWithBlockingLinks(
+          route,
+          routeModulesCache
+        );
+
+        let lazyRoute: Partial<DataRouteObject> = { ...mod };
+        if (mod.clientLoader) {
+          let clientLoader = mod.clientLoader;
+          lazyRoute.loader = (
+            args: LoaderFunctionArgs,
+            singleFetch?: unknown
+          ) =>
+            clientLoader({
+              ...args,
+              async serverLoader() {
+                preventInvalidServerHandlerCall("loader", route, isSpaMode);
+                return fetchServerLoader(args.request, true, singleFetch);
+              },
+            });
+        }
+
+        if (mod.clientAction) {
+          let clientAction = mod.clientAction;
+          lazyRoute.action = (
+            args: ActionFunctionArgs,
+            singleFetch?: unknown
+          ) =>
+            clientAction({
+              ...args,
+              async serverAction() {
+                preventInvalidServerHandlerCall("action", route, isSpaMode);
+                return fetchServerAction(args.request, true, singleFetch);
+              },
+            });
+        }
+
+        if (needsRevalidation) {
+          lazyRoute.shouldRevalidate = wrapShouldRevalidateForHdr(
+            route.id,
+            mod.shouldRevalidate,
+            needsRevalidation
+          );
+        }
+
+        return {
+          ...(lazyRoute.loader ? { loader: lazyRoute.loader } : {}),
+          ...(lazyRoute.action ? { action: lazyRoute.action } : {}),
+          hasErrorBoundary: lazyRoute.hasErrorBoundary,
+          shouldRevalidate: lazyRoute.shouldRevalidate,
+          handle: lazyRoute.handle,
+          // No need to wrap these in layout since the root route is never
+          // loaded via route.lazy()
+          Component: lazyRoute.Component,
+          ErrorBoundary: lazyRoute.ErrorBoundary,
+        };
+      };
+    }
+
+    let children = createClientRoutes(
+      manifest,
+      routeModulesCache,
+      initialState,
+      future,
+      isSpaMode,
+      route.id,
+      routesByParentId,
+      needsRevalidation
+    );
+    if (children.length > 0) dataRoute.children = children;
+    return dataRoute;
+  });
+}
+
+// When an HMR / HDR update happens we opt out of all user-defined
+// revalidation logic and force a revalidation on the first call
+function wrapShouldRevalidateForHdr(
+  routeId: string,
+  routeShouldRevalidate: ShouldRevalidateFunction | undefined,
+  needsRevalidation: Set<string>
+): ShouldRevalidateFunction {
+  let handledRevalidation = false;
+  return (arg) => {
+    if (!handledRevalidation) {
+      handledRevalidation = true;
+      return needsRevalidation.has(routeId);
+    }
+
+    return routeShouldRevalidate
+      ? routeShouldRevalidate(arg)
+      : arg.defaultShouldRevalidate;
+  };
+}
+
+async function loadRouteModuleWithBlockingLinks(
+  route: EntryRoute,
+  routeModules: RouteModules
+) {
+  let routeModule = await loadRouteModule(route, routeModules);
+  await prefetchStyleLinks(route, routeModule);
+
+  // Include all `browserSafeRouteExports` fields, except `HydrateFallback`
+  // since those aren't used on lazily loaded routes
+  return {
+    Component: getRouteModuleComponent(routeModule),
+    ErrorBoundary: routeModule.ErrorBoundary,
+    clientAction: routeModule.clientAction,
+    clientLoader: routeModule.clientLoader,
+    handle: routeModule.handle,
+    links: routeModule.links,
+    meta: routeModule.meta,
+    shouldRevalidate: routeModule.shouldRevalidate,
+  };
+}
+
+async function fetchServerHandler(request: Request, route: EntryRoute) {
+  let result = await fetchData(request, route.id);
+
+  if (result instanceof Error) {
+    throw result;
+  }
+
+  if (isRedirectResponse(result)) {
+    throw getRedirect(result);
+  }
+
+  if (isCatchResponse(result)) {
+    throw result;
+  }
+
+  if (isDeferredResponse(result) && result.body) {
+    return await parseDeferredReadableStream(result.body);
+  }
+
+  return result;
+}
+
+function unwrapServerResponse(
+  result: Awaited<ReturnType<typeof fetchServerHandler>> | null
+) {
+  if (isDeferredData(result)) {
+    return result.data;
+  }
+
+  if (isResponse(result)) {
+    let contentType = result.headers.get("Content-Type");
+    // Check between word boundaries instead of startsWith() due to the last
+    // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
+    if (contentType && /\bapplication\/json\b/.test(contentType)) {
+      return result.json();
+    } else {
+      return result.text();
+    }
+  }
+
+  return result;
+}
+
+function getRedirect(response: Response): Response {
+  let status = parseInt(response.headers.get("X-Remix-Status")!, 10) || 302;
+  let url = response.headers.get("X-Remix-Redirect")!;
+  let headers: Record<string, string> = {};
+  let revalidate = response.headers.get("X-Remix-Revalidate");
+  if (revalidate) {
+    headers["X-Remix-Revalidate"] = revalidate;
+  }
+  let reloadDocument = response.headers.get("X-Remix-Reload-Document");
+  if (reloadDocument) {
+    headers["X-Remix-Reload-Document"] = reloadDocument;
+  }
+  return redirect(url, { status, headers });
+}
+
+// Our compiler generates the default export as `{}` when no default is provided,
+// which can lead us to trying to use that as a Component in RR and calling
+// createElement on it.  Patching here as a quick fix and hoping it's no longer
+// an issue in Vite.
+function getRouteModuleComponent(routeModule: RouteModule) {
+  if (routeModule.default == null) return undefined;
+  let isEmptyObject =
+    typeof routeModule.default === "object" &&
+    Object.keys(routeModule.default).length === 0;
+  if (!isEmptyObject) {
+    return routeModule.default;
+  }
+}
+
+export function shouldHydrateRouteLoader(
+  route: EntryRoute,
+  routeModule: RouteModule,
+  isSpaMode: boolean
+) {
+  return (
+    (isSpaMode && route.id !== "root") ||
+    (routeModule.clientLoader != null &&
+      (routeModule.clientLoader.hydrate === true || route.hasLoader !== true))
+  );
+}
diff --git a/packages/react-router-dom/ssr/scroll-restoration.tsx b/packages/react-router-dom/ssr/scroll-restoration.tsx
new file mode 100644
index 0000000000..d7a6e58768
--- /dev/null
+++ b/packages/react-router-dom/ssr/scroll-restoration.tsx
@@ -0,0 +1,83 @@
+import * as React from "react";
+import { useLocation, useMatches } from "react-router";
+
+import type { ScrollRestorationProps as ScrollRestorationPropsRR } from "../index";
+import { UNSAFE_useScrollRestoration as useScrollRestoration } from "../index";
+import type { ScriptProps } from "./components";
+import { useRemixContext } from "./components";
+
+let STORAGE_KEY = "positions";
+
+/**
+ * This component will emulate the browser's scroll restoration on location
+ * changes.
+ *
+ * @see https://remix.run/components/scroll-restoration
+ */
+export function ScrollRestoration({
+  getKey,
+  ...props
+}: ScriptProps & {
+  getKey?: ScrollRestorationPropsRR["getKey"];
+}) {
+  let { isSpaMode } = useRemixContext();
+  let location = useLocation();
+  let matches = useMatches();
+
+  useScrollRestoration({
+    getKey,
+    storageKey: STORAGE_KEY,
+  });
+
+  // In order to support `getKey`, we need to compute a "key" here so we can
+  // hydrate that up so that SSR scroll restoration isn't waiting on React to
+  // hydrate. *However*, our key on the server is not the same as our key on
+  // the client!  So if the user's getKey implementation returns the SSR
+  // location key, then let's ignore it and let our inline <script> below pick
+  // up the client side history state key
+  let key = React.useMemo(
+    () => {
+      if (!getKey) return null;
+      let userKey = getKey(location, matches);
+      return userKey !== location.key ? userKey : null;
+    },
+    // Nah, we only need this the first time for the SSR render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  // In SPA Mode, there's nothing to restore on initial render since we didn't
+  // render anything on the server
+  if (isSpaMode) {
+    return null;
+  }
+
+  let restoreScroll = ((STORAGE_KEY: string, restoreKey: string) => {
+    if (!window.history.state || !window.history.state.key) {
+      let key = Math.random().toString(32).slice(2);
+      window.history.replaceState({ key }, "");
+    }
+    try {
+      let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "{}");
+      let storedY = positions[restoreKey || window.history.state.key];
+      if (typeof storedY === "number") {
+        window.scrollTo(0, storedY);
+      }
+    } catch (error: unknown) {
+      console.error(error);
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  }).toString();
+
+  return (
+    <script
+      {...props}
+      suppressHydrationWarning
+      dangerouslySetInnerHTML={{
+        __html: `(${restoreScroll})(${JSON.stringify(
+          STORAGE_KEY
+        )}, ${JSON.stringify(key)})`,
+      }}
+    />
+  );
+}
diff --git a/packages/react-router-dom/ssr/server.tsx b/packages/react-router-dom/ssr/server.tsx
new file mode 100644
index 0000000000..63fea111b2
--- /dev/null
+++ b/packages/react-router-dom/ssr/server.tsx
@@ -0,0 +1,106 @@
+import type { ReactElement } from "react";
+import * as React from "react";
+
+import { createStaticRouter, StaticRouterProvider } from "../server";
+import { RemixContext } from "./components";
+import type { EntryContext } from "./entry";
+import { RemixErrorBoundary } from "./errorBoundaries";
+import { createServerRoutes, shouldHydrateRouteLoader } from "./routes";
+import { StreamTransfer } from "./single-fetch";
+
+export interface RemixServerProps {
+  context: EntryContext;
+  url: string | URL;
+  abortDelay?: number;
+}
+
+/**
+ * The entry point for a Remix app when it is rendered on the server (in
+ * `app/entry.server.js`). This component is used to generate the HTML in the
+ * response from the server.
+ */
+export function RemixServer({
+  context,
+  url,
+  abortDelay,
+}: RemixServerProps): ReactElement {
+  if (typeof url === "string") {
+    url = new URL(url);
+  }
+
+  let { manifest, routeModules, criticalCss, serverHandoffString } = context;
+  let routes = createServerRoutes(
+    manifest.routes,
+    routeModules,
+    context.future,
+    context.isSpaMode
+  );
+
+  // Create a shallow clone of `loaderData` we can mutate for partial hydration.
+  // When a route exports a `clientLoader` and a `HydrateFallback`, we want to
+  // render the fallback on the server so we clear our the `loaderData` during SSR.
+  // Is it important not to change the `context` reference here since we use it
+  // for context._deepestRenderedBoundaryId tracking
+  context.staticHandlerContext.loaderData = {
+    ...context.staticHandlerContext.loaderData,
+  };
+  for (let match of context.staticHandlerContext.matches) {
+    let routeId = match.route.id;
+    let route = routeModules[routeId];
+    let manifestRoute = context.manifest.routes[routeId];
+    // Clear out the loaderData to avoid rendering the route component when the
+    // route opted into clientLoader hydration and either:
+    // * gave us a HydrateFallback
+    // * or doesn't have a server loader and we have no data to render
+    if (
+      route &&
+      shouldHydrateRouteLoader(manifestRoute, route, context.isSpaMode) &&
+      (route.HydrateFallback || !manifestRoute.hasLoader)
+    ) {
+      context.staticHandlerContext.loaderData[routeId] = undefined;
+    }
+  }
+
+  let router = createStaticRouter(routes, context.staticHandlerContext, {
+    future: {
+      v7_partialHydration: true,
+      v7_relativeSplatPath: context.future.v3_relativeSplatPath,
+    },
+  });
+
+  return (
+    <>
+      <RemixContext.Provider
+        value={{
+          manifest,
+          routeModules,
+          criticalCss,
+          serverHandoffString,
+          future: context.future,
+          isSpaMode: context.isSpaMode,
+          serializeError: context.serializeError,
+          abortDelay,
+          renderMeta: context.renderMeta,
+        }}
+      >
+        <RemixErrorBoundary location={router.state.location}>
+          <StaticRouterProvider
+            router={router}
+            context={context.staticHandlerContext}
+            hydrate={false}
+          />
+        </RemixErrorBoundary>
+      </RemixContext.Provider>
+      {context.future.unstable_singleFetch && context.serverHandoffStream ? (
+        <React.Suspense>
+          <StreamTransfer
+            context={context}
+            identifier={0}
+            reader={context.serverHandoffStream.getReader()}
+            textDecoder={new TextDecoder()}
+          />
+        </React.Suspense>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/react-router-dom/ssr/single-fetch.tsx b/packages/react-router-dom/ssr/single-fetch.tsx
new file mode 100644
index 0000000000..7a9c278565
--- /dev/null
+++ b/packages/react-router-dom/ssr/single-fetch.tsx
@@ -0,0 +1,375 @@
+import * as React from "react";
+import type {
+  unstable_DataStrategyFunction as DataStrategyFunction,
+  unstable_HandlerResult as HandlerResult,
+} from "@remix-run/router";
+import {
+  UNSAFE_ErrorResponseImpl as ErrorResponseImpl,
+  redirect,
+} from "@remix-run/router";
+import type {
+  UNSAFE_SingleFetchResult as SingleFetchResult,
+  UNSAFE_SingleFetchResults as SingleFetchResults,
+} from "@remix-run/server-runtime";
+import { UNSAFE_SingleFetchRedirectSymbol as SingleFetchRedirectSymbol } from "@remix-run/server-runtime";
+import type {
+  DataRouteObject,
+  unstable_DataStrategyFunctionArgs as DataStrategyFunctionArgs,
+} from "react-router";
+import { decode } from "turbo-stream";
+
+import { createRequestInit } from "./data";
+import type { AssetsManifest, EntryContext } from "./entry";
+import { escapeHtml } from "./markup";
+import type { RouteModules } from "./routeModules";
+import invariant from "./invariant";
+
+interface StreamTransferProps {
+  context: EntryContext;
+  identifier: number;
+  reader: ReadableStreamDefaultReader<Uint8Array>;
+  textDecoder: TextDecoder;
+}
+
+// StreamTransfer recursively renders down chunks of the `serverHandoffStream`
+// into the client-side `streamController`
+export function StreamTransfer({
+  context,
+  identifier,
+  reader,
+  textDecoder,
+}: StreamTransferProps) {
+  // If the user didn't render the <Scripts> component then we don't have to
+  // bother streaming anything in
+  if (!context.renderMeta || !context.renderMeta.didRenderScripts) {
+    return null;
+  }
+
+  if (!context.renderMeta.streamCache) {
+    context.renderMeta.streamCache = {};
+  }
+  let { streamCache } = context.renderMeta;
+  let promise = streamCache[identifier];
+  if (!promise) {
+    promise = streamCache[identifier] = reader
+      .read()
+      .then((result) => {
+        streamCache[identifier].result = {
+          done: result.done,
+          value: textDecoder.decode(result.value, { stream: true }),
+        };
+      })
+      .catch((e) => {
+        streamCache[identifier].error = e;
+      });
+  }
+
+  if (promise.error) {
+    throw promise.error;
+  }
+  if (promise.result === undefined) {
+    throw promise;
+  }
+
+  let { done, value } = promise.result;
+  let scriptTag = value ? (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `window.__remixContext.streamController.enqueue(${escapeHtml(
+          JSON.stringify(value)
+        )});`,
+      }}
+    />
+  ) : null;
+
+  if (done) {
+    return (
+      <>
+        {scriptTag}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.__remixContext.streamController.close();`,
+          }}
+        />
+      </>
+    );
+  } else {
+    return (
+      <>
+        {scriptTag}
+        <React.Suspense>
+          <StreamTransfer
+            context={context}
+            identifier={identifier + 1}
+            reader={reader}
+            textDecoder={textDecoder}
+          />
+        </React.Suspense>
+      </>
+    );
+  }
+}
+
+export function getSingleFetchDataStrategy(
+  manifest: AssetsManifest,
+  routeModules: RouteModules
+): DataStrategyFunction {
+  return async ({ request, matches }) =>
+    request.method !== "GET"
+      ? singleFetchActionStrategy(request, matches)
+      : singleFetchLoaderStrategy(manifest, routeModules, request, matches);
+}
+
+// Actions are simple since they're singular calls to the server
+function singleFetchActionStrategy(
+  request: Request,
+  matches: DataStrategyFunctionArgs["matches"]
+) {
+  return Promise.all(
+    matches.map(async (m) => {
+      let actionStatus: number | undefined;
+      let result = await m.resolve(async (handler): Promise<HandlerResult> => {
+        let result = await handler(async () => {
+          let url = singleFetchUrl(request.url);
+          let init = await createRequestInit(request);
+          let { data, status } = await fetchAndDecode(url, init);
+          actionStatus = status;
+          return unwrapSingleFetchResult(data as SingleFetchResult, m.route.id);
+        });
+        return {
+          type: "data",
+          result,
+          status: actionStatus,
+        };
+      });
+      return {
+        ...result,
+        // Proxy along the action HTTP response status for thrown errors
+        status: actionStatus,
+      };
+    })
+  );
+}
+
+// Loaders are trickier since we only want to hit the server once, so we
+// create a singular promise for all server-loader routes to latch onto.
+function singleFetchLoaderStrategy(
+  manifest: AssetsManifest,
+  routeModules: RouteModules,
+  request: Request,
+  matches: DataStrategyFunctionArgs["matches"]
+) {
+  let singleFetchPromise: Promise<SingleFetchResults> | undefined;
+  return Promise.all(
+    matches.map(async (m) =>
+      m.resolve(async (handler): Promise<HandlerResult> => {
+        let result: unknown;
+        let url = stripIndexParam(singleFetchUrl(request.url));
+
+        // When a route has a client loader, it calls it's singular server loader
+        if (manifest.routes[m.route.id].hasClientLoader) {
+          result = await handler(async () => {
+            url.searchParams.set("_routes", m.route.id);
+            let { data } = await fetchAndDecode(url);
+            return unwrapSingleFetchResults(
+              data as SingleFetchResults,
+              m.route.id
+            );
+          });
+        } else {
+          result = await handler(async () => {
+            // Otherwise we let multiple routes hook onto the same promise
+            if (!singleFetchPromise) {
+              url = addRevalidationParam(
+                manifest,
+                routeModules,
+                matches.map((m) => m.route),
+                matches.filter((m) => m.shouldLoad).map((m) => m.route),
+                url
+              );
+              singleFetchPromise = fetchAndDecode(url).then(
+                ({ data }) => data as SingleFetchResults
+              );
+            }
+            let results = await singleFetchPromise;
+            return unwrapSingleFetchResults(results, m.route.id);
+          });
+        }
+
+        return {
+          type: "data",
+          result,
+        };
+      })
+    )
+  );
+}
+
+function stripIndexParam(url: URL) {
+  let indexValues = url.searchParams.getAll("index");
+  url.searchParams.delete("index");
+  let indexValuesToKeep = [];
+  for (let indexValue of indexValues) {
+    if (indexValue) {
+      indexValuesToKeep.push(indexValue);
+    }
+  }
+  for (let toKeep of indexValuesToKeep) {
+    url.searchParams.append("index", toKeep);
+  }
+
+  return url;
+}
+
+// Determine which routes we want to load so we can add a `?_routes` search param
+// for fine-grained revalidation if necessary. There's some nuance to this decision:
+//
+//  - The presence of `shouldRevalidate` and `clientLoader` functions are the only
+//    way to trigger fine-grained single fetch loader calls.  without either of
+//    these on the route matches we just always ask for the full `.data` request.
+//  - If any routes have a `shouldRevalidate` or `clientLoader` then we do a
+//    comparison of the routes we matched and the routes we're aiming to load
+//  - If they don't match up, then we add the `_routes` param or fine-grained
+//    loading
+//  - This is used by the single fetch implementation above and by the
+//    `<PrefetchPageLinksImpl>` component so we can prefetch routes using the
+//    same logic
+export function addRevalidationParam(
+  manifest: AssetsManifest,
+  routeModules: RouteModules,
+  matchedRoutes: DataRouteObject[],
+  loadRoutes: DataRouteObject[],
+  url: URL
+) {
+  let genRouteIds = (arr: string[]) =>
+    arr.filter((id) => manifest.routes[id].hasLoader).join(",");
+
+  // Look at the `routeModules` for `shouldRevalidate` here instead of the manifest
+  // since HDR adds a wrapper for `shouldRevalidate` even if the route didn't have one
+  // initially.
+  // TODO: We probably can get rid of that wrapper once we're strictly on on
+  // single-fetch in v3 and just leverage a needsRevalidation data structure here
+  // to determine what to fetch
+  let needsParam = matchedRoutes.some(
+    (r) =>
+      routeModules[r.id]?.shouldRevalidate ||
+      manifest.routes[r.id]?.hasClientLoader
+  );
+  if (!needsParam) {
+    return url;
+  }
+
+  let matchedIds = genRouteIds(matchedRoutes.map((r) => r.id));
+  let loadIds = genRouteIds(
+    loadRoutes
+      .filter((r) => !manifest.routes[r.id]?.hasClientLoader)
+      .map((r) => r.id)
+  );
+  if (matchedIds !== loadIds) {
+    url.searchParams.set("_routes", loadIds);
+  }
+  return url;
+}
+
+export function singleFetchUrl(reqUrl: URL | string) {
+  let url =
+    typeof reqUrl === "string"
+      ? new URL(reqUrl, window.location.origin)
+      : reqUrl;
+  url.pathname = `${url.pathname === "/" ? "_root" : url.pathname}.data`;
+  return url;
+}
+
+async function fetchAndDecode(url: URL, init?: RequestInit) {
+  let res = await fetch(url, init);
+  if (res.headers.get("Content-Type")?.includes("text/x-turbo")) {
+    invariant(res.body, "No response body to decode");
+    let decoded = await decodeViaTurboStream(res.body, window);
+    return { status: res.status, data: decoded.value };
+  }
+
+  // If we didn't get back a turbo-stream response, then we never reached the
+  // Remix server and likely this is a network error - just expose up the
+  // response body as an Error
+  throw new Error(await res.text());
+}
+
+// Note: If you change this function please change the corresponding
+// encodeViaTurboStream function in server-runtime
+export function decodeViaTurboStream(
+  body: ReadableStream<Uint8Array>,
+  global: Window | typeof globalThis
+) {
+  return decode(body, {
+    plugins: [
+      (type: string, ...rest: unknown[]) => {
+        // Decode Errors back into Error instances using the right type and with
+        // the right (potentially undefined) stacktrace
+        if (type === "SanitizedError") {
+          let [name, message, stack] = rest as [
+            string,
+            string,
+            string | undefined
+          ];
+          let Constructor = Error;
+          // @ts-expect-error
+          if (name && name in global && typeof global[name] === "function") {
+            // @ts-expect-error
+            Constructor = global[name];
+          }
+          let error = new Constructor(message);
+          error.stack = stack;
+          return { value: error };
+        }
+
+        if (type === "ErrorResponse") {
+          let [data, status, statusText] = rest as [
+            unknown,
+            number,
+            string | undefined
+          ];
+          return {
+            value: new ErrorResponseImpl(status, statusText, data),
+          };
+        }
+
+        if (type === "SingleFetchRedirect") {
+          return { value: { [SingleFetchRedirectSymbol]: rest[0] } };
+        }
+      },
+    ],
+  });
+}
+
+function unwrapSingleFetchResults(
+  results: SingleFetchResults,
+  routeId: string
+) {
+  let redirect = results[SingleFetchRedirectSymbol];
+  if (redirect) {
+    return unwrapSingleFetchResult(redirect, routeId);
+  }
+
+  return results[routeId] !== undefined
+    ? unwrapSingleFetchResult(results[routeId], routeId)
+    : null;
+}
+
+function unwrapSingleFetchResult(result: SingleFetchResult, routeId: string) {
+  if ("error" in result) {
+    throw result.error;
+  } else if ("redirect" in result) {
+    let headers: Record<string, string> = {};
+    if (result.revalidate) {
+      headers["X-Remix-Revalidate"] = "yes";
+    }
+    if (result.reload) {
+      headers["X-Remix-Reload-Document"] = "yes";
+    }
+    return redirect(result.redirect, { status: result.status, headers });
+  } else if ("data" in result) {
+    return result.data;
+  } else {
+    throw new Error(`No response found for routeId "${routeId}"`);
+  }
+}
diff --git a/packages/router/__tests__/navigation-test.ts b/packages/router/__tests__/navigation-test.ts
index 55838ab4be..909671c01e 100644
--- a/packages/router/__tests__/navigation-test.ts
+++ b/packages/router/__tests__/navigation-test.ts
@@ -172,7 +172,6 @@ describe("navigations", () => {
 
       // Node 18 and 20 output different errors here
       // Node 18 and 20 output different errors here
-      console.log("process.version", process.version);
       let expected = process.version.startsWith("v18")
         ? "Unexpected token } in JSON at position 15"
         : "Unexpected non-whitespace character after JSON at position 15";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4519942a6b..c051b77c6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -253,9 +253,15 @@ importers:
       '@remix-run/router':
         specifier: workspace:*
         version: link:../router
+      '@remix-run/server-runtime':
+        specifier: workspace:*
+        version: link:../remix-server-runtime
       react-router:
         specifier: workspace:*
         version: link:../react-router
+      turbo-stream:
+        specifier: ^2.0.0
+        version: 2.0.0
     devDependencies:
       react:
         specifier: ^18.2.0
@@ -269,6 +275,9 @@ importers:
       '@remix-run/router':
         specifier: workspace:*
         version: link:../router
+      '@remix-run/server-runtime':
+        specifier: workspace:*
+        version: link:../remix-server-runtime
       history:
         specifier: ^5.3.0
         version: 5.3.0
@@ -284,6 +293,9 @@ importers:
       react-router-dom:
         specifier: 4 || 5
         version: 5.3.4(react@18.2.0)
+      turbo-stream:
+        specifier: ^2.0.0
+        version: 2.0.0
 
   packages/react-router-native:
     dependencies: