Extract reusable getHydrationData utility

Author: brophdawg11

packages/react-router/lib/dom-export/hydrated-router.tsx

@@ -25,6 +25,7 @@ import {
   UNSAFE_createClientRoutesWithHMRRevalidationOptOut as createClientRoutesWithHMRRevalidationOptOut,
   matchRoutes,
 } from "react-router";
+import { getHydrationData } from "../dom/ssr/hydration";
 import { RouterProvider } from "./dom-router-provider";
 
 type SSRInfo = {
@@ -126,9 +127,9 @@ function createHydratedRouter({
   );
 
   let hydrationData: HydrationState | undefined = undefined;
-  let loaderData = ssrInfo.context.state.loaderData;
   // In SPA mode we only hydrate build-time root loader data
   if (ssrInfo.context.isSpaMode) {
+    let { loaderData } = ssrInfo.context.state;
     if (
       ssrInfo.manifest.routes.root?.hasLoader &&
       loaderData &&
@@ -141,51 +142,19 @@ function createHydratedRouter({
       };
     }
   } else {
-    // 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: { ...loaderData },
-    };
-    let initialMatches = matchRoutes(
+    hydrationData = getHydrationData(
+      ssrInfo.context.state,
       routes,
+      (routeId) => ({
+        clientLoader: ssrInfo!.routeModules[routeId]?.clientLoader,
+        hasLoader: ssrInfo!.manifest.routes[routeId]?.hasLoader === true,
+        hasHydrateFallback:
+          ssrInfo!.routeModules[routeId]?.HydrateFallback != null,
+      }),
       window.location,
-      window.__reactRouterContext?.basename
+      window.__reactRouterContext?.basename,
+      ssrInfo.context.isSpaMode
     );
-    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 &&
-          manifestRoute &&
-          shouldHydrateRouteLoader(
-            manifestRoute,
-            route,
-            ssrInfo.context.isSpaMode
-          ) &&
-          (route.HydrateFallback || !manifestRoute.hasLoader)
-        ) {
-          delete hydrationData.loaderData![routeId];
-        } 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) {
       // TODO: De-dup this or remove entirely in v7 where single fetch is the

packages/react-router/lib/dom/ssr/hydration.tsx

@@ -0,0 +1,65 @@
+import type { DataRouteObject } from "../../context";
+import type { Path } from "../../router/history";
+import type { Router as DataRouter, HydrationState } from "../../router/router";
+import { matchRoutes } from "../../router/utils";
+import type { ClientLoaderFunction } from "./routeModules";
+import { shouldHydrateRouteLoader } from "./routes";
+
+export function getHydrationData(
+  state: {
+    loaderData?: DataRouter["state"]["loaderData"];
+    actionData?: DataRouter["state"]["actionData"];
+    errors?: DataRouter["state"]["errors"];
+  },
+  routes: DataRouteObject[],
+  getRouteInfo: (routeId: string) => {
+    clientLoader: ClientLoaderFunction | undefined;
+    hasLoader: boolean;
+    hasHydrateFallback: boolean;
+  },
+  location: Path,
+  basename: string | undefined,
+  isSpaMode: boolean
+): HydrationState {
+  // 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.
+  let hydrationData = {
+    ...state,
+    loaderData: { ...state.loaderData },
+  };
+  let initialMatches = matchRoutes(routes, location, basename);
+  if (initialMatches) {
+    for (let match of initialMatches) {
+      let routeId = match.route.id;
+      let routeInfo = getRouteInfo(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 (
+        shouldHydrateRouteLoader(
+          routeId,
+          routeInfo.clientLoader,
+          routeInfo.hasLoader,
+          isSpaMode
+        ) &&
+        (routeInfo.hasHydrateFallback || !routeInfo.hasLoader)
+      ) {
+        delete hydrationData.loaderData![routeId];
+      } else if (!routeInfo.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;
+      }
+    }
+  }
+
+  return hydrationData;
+}

packages/react-router/lib/dom/ssr/routes.tsx

@@ -9,7 +9,11 @@ import type {
   ShouldRevalidateFunctionArgs,
 } from "../../router/utils";
 import { ErrorResponseImpl, compilePath } from "../../router/utils";
-import type { RouteModule, RouteModules } from "./routeModules";
+import type {
+  ClientLoaderFunction,
+  RouteModule,
+  RouteModules,
+} from "./routeModules";
 import { loadRouteModule } from "./routeModules";
 import type { FutureConfig } from "./entry";
 import { prefetchRouteCss, prefetchStyleLinks } from "./links";
@@ -382,8 +386,9 @@ export function createClientRoutes(
 
       // Let React Router know whether to run this on hydration
       dataRoute.loader.hydrate = shouldHydrateRouteLoader(
-        route,
-        routeModule,
+        route.id,
+        routeModule.clientLoader,
+        route.hasLoader,
         isSpaMode
       );
 
@@ -676,13 +681,14 @@ function getRouteModuleComponent(routeModule: RouteModule) {
 }
 
 export function shouldHydrateRouteLoader(
-  route: EntryRoute,
-  routeModule: RouteModule,
+  routeId: string,
+  clientLoader: ClientLoaderFunction | undefined,
+  hasLoader: boolean,
   isSpaMode: boolean
 ) {
   return (
-    (isSpaMode && route.id !== "root") ||
-    (routeModule.clientLoader != null &&
-      (routeModule.clientLoader.hydrate === true || route.hasLoader !== true))
+    (isSpaMode && routeId !== "root") ||
+    (clientLoader != null &&
+      (clientLoader.hydrate === true || hasLoader !== true))
   );
 }

packages/react-router/lib/dom/ssr/server.tsx

@@ -57,7 +57,12 @@ export function ServerRouter({
     if (
       route &&
       manifestRoute &&
-      shouldHydrateRouteLoader(manifestRoute, route, context.isSpaMode) &&
+      shouldHydrateRouteLoader(
+        routeId,
+        route.clientLoader,
+        manifestRoute.hasLoader,
+        context.isSpaMode
+      ) &&
       (route.HydrateFallback || !manifestRoute.hasLoader)
     ) {
       delete context.staticHandlerContext.loaderData[routeId];