@remix-run/router 1.19.2 → 1.20.0-pre.0

package/router.ts

@@ -391,8 +391,8 @@ export interface RouterInit {
   future?: Partial<FutureConfig>;
   hydrationData?: HydrationState;
   window?: Window;
-  unstable_patchRoutesOnNavigation?: AgnosticPatchRoutesOnNavigationFunction;
-  unstable_dataStrategy?: DataStrategyFunction;
+  dataStrategy?: DataStrategyFunction;
+  patchRoutesOnNavigation?: AgnosticPatchRoutesOnNavigationFunction;
 }
 
 /**
@@ -422,7 +422,7 @@ export interface StaticHandler {
     opts?: {
       requestContext?: unknown;
       skipLoaderErrorBubbling?: boolean;
-      unstable_dataStrategy?: DataStrategyFunction;
+      dataStrategy?: DataStrategyFunction;
     }
   ): Promise<StaticHandlerContext | Response>;
   queryRoute(
@@ -430,7 +430,7 @@ export interface StaticHandler {
     opts?: {
       routeId?: string;
       requestContext?: unknown;
-      unstable_dataStrategy?: DataStrategyFunction;
+      dataStrategy?: DataStrategyFunction;
     }
   ): Promise<any>;
 }
@@ -448,8 +448,8 @@ export interface RouterSubscriber {
     state: RouterState,
     opts: {
       deletedFetchers: string[];
-      unstable_viewTransitionOpts?: ViewTransitionOpts;
-      unstable_flushSync: boolean;
+      viewTransitionOpts?: ViewTransitionOpts;
+      flushSync: boolean;
     }
   ): void;
 }
@@ -475,7 +475,7 @@ export type RelativeRoutingType = "route" | "path";
 type BaseNavigateOrFetchOptions = {
   preventScrollReset?: boolean;
   relative?: RelativeRoutingType;
-  unstable_flushSync?: boolean;
+  flushSync?: boolean;
 };
 
 // Only allowed for navigations
@@ -483,7 +483,7 @@ type BaseNavigateOptions = BaseNavigateOrFetchOptions & {
   replace?: boolean;
   state?: any;
   fromRouteId?: string;
-  unstable_viewTransition?: boolean;
+  viewTransition?: boolean;
 };
 
 // Only allowed for submission navigations
@@ -797,8 +797,8 @@ export function createRouter(init: RouterInit): Router {
   );
   let inFlightDataRoutes: AgnosticDataRouteObject[] | undefined;
   let basename = init.basename || "/";
-  let dataStrategyImpl = init.unstable_dataStrategy || defaultDataStrategy;
-  let patchRoutesOnNavigationImpl = init.unstable_patchRoutesOnNavigation;
+  let dataStrategyImpl = init.dataStrategy || defaultDataStrategy;
+  let patchRoutesOnNavigationImpl = init.patchRoutesOnNavigation;
 
   // Config driven behavior flags
   let future: FutureConfig = {
@@ -814,10 +814,6 @@ export function createRouter(init: RouterInit): Router {
   let unlistenHistory: (() => void) | null = null;
   // Externally-provided functions to call on all state changes
   let subscribers = new Set<RouterSubscriber>();
-  // FIFO queue of previously discovered routes to prevent re-calling on
-  // subsequent navigations to the same path
-  let discoveredRoutesMaxSize = 1000;
-  let discoveredRoutes = new Set<string>();
   // Externally-provided object to hold scroll restoration locations during routing
   let savedScrollPositions: Record<string, number> | null = null;
   // Externally-provided function to get scroll restoration keys
@@ -894,33 +890,18 @@ export function createRouter(init: RouterInit): Router {
     // were marked for explicit hydration
     let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;
     let errors = init.hydrationData ? init.hydrationData.errors : null;
-    let isRouteInitialized = (m: AgnosticDataRouteMatch) => {
-      // No loader, nothing to initialize
-      if (!m.route.loader) {
-        return true;
-      }
-      // Explicitly opting-in to running on hydration
-      if (
-        typeof m.route.loader === "function" &&
-        m.route.loader.hydrate === true
-      ) {
-        return false;
-      }
-      // Otherwise, initialized if hydrated with data or an error
-      return (
-        (loaderData && loaderData[m.route.id] !== undefined) ||
-        (errors && errors[m.route.id] !== undefined)
-      );
-    };
-
     // If errors exist, don't consider routes below the boundary
     if (errors) {
       let idx = initialMatches.findIndex(
         (m) => errors![m.route.id] !== undefined
       );
-      initialized = initialMatches.slice(0, idx + 1).every(isRouteInitialized);
+      initialized = initialMatches
+        .slice(0, idx + 1)
+        .every((m) => !shouldLoadRouteOnHydration(m.route, loaderData, errors));
     } else {
-      initialized = initialMatches.every(isRouteInitialized);
+      initialized = initialMatches.every(
+        (m) => !shouldLoadRouteOnHydration(m.route, loaderData, errors)
+      );
     }
   } else {
     // Without partial hydration - we're initialized if we were provided any
@@ -1187,8 +1168,8 @@ export function createRouter(init: RouterInit): Router {
     [...subscribers].forEach((subscriber) =>
       subscriber(state, {
         deletedFetchers: deletedFetchersKeys,
-        unstable_viewTransitionOpts: opts.viewTransitionOpts,
-        unstable_flushSync: opts.flushSync === true,
+        viewTransitionOpts: opts.viewTransitionOpts,
+        flushSync: opts.flushSync === true,
       })
     );
 
@@ -1411,7 +1392,7 @@ export function createRouter(init: RouterInit): Router {
         ? opts.preventScrollReset === true
         : undefined;
 
-    let flushSync = (opts && opts.unstable_flushSync) === true;
+    let flushSync = (opts && opts.flushSync) === true;
 
     let blockerKey = shouldBlockNavigation({
       currentLocation,
@@ -1450,7 +1431,7 @@ export function createRouter(init: RouterInit): Router {
       pendingError: error,
       preventScrollReset,
       replace: opts && opts.replace,
-      enableViewTransition: opts && opts.unstable_viewTransition,
+      enableViewTransition: opts && opts.viewTransition,
       flushSync,
     });
   }
@@ -1559,7 +1540,7 @@ export function createRouter(init: RouterInit): Router {
     // Short circuit if it's only a hash change and not a revalidation or
     // mutation submission.
     //
-    // Ignore on initial page loads because since the initial load will always
+    // Ignore on initial page loads because since the initial hydration will always
     // be "same hash".  For example, on /page#hash and submit a <Form method="post">
     // which will default to a navigation to /page
     if (
@@ -1983,9 +1964,7 @@ export function createRouter(init: RouterInit): Router {
     }
 
     revalidatingFetchers.forEach((rf) => {
-      if (fetchControllers.has(rf.key)) {
-        abortFetcher(rf.key);
-      }
+      abortFetcher(rf.key);
       if (rf.controller) {
         // Fetchers use an independent AbortController so that aborting a fetcher
         // (via deleteFetcher) does not abort the triggering navigation that
@@ -2026,6 +2005,7 @@ export function createRouter(init: RouterInit): Router {
         abortPendingFetchRevalidations
       );
     }
+
     revalidatingFetchers.forEach((rf) => fetchControllers.delete(rf.key));
 
     // If any loaders returned a redirect Response, start a new REPLACE navigation
@@ -2053,7 +2033,6 @@ export function createRouter(init: RouterInit): Router {
     let { loaderData, errors } = processLoaderData(
       state,
       matches,
-      matchesToLoad,
       loaderResults,
       pendingActionResult,
       revalidatingFetchers,
@@ -2073,13 +2052,9 @@ export function createRouter(init: RouterInit): Router {
       });
     });
 
-    // During partial hydration, preserve SSR errors for routes that don't re-run
+    // Preserve SSR errors during partial hydration
     if (future.v7_partialHydration && initialHydration && state.errors) {
-      Object.entries(state.errors)
-        .filter(([id]) => !matchesToLoad.some((m) => m.route.id === id))
-        .forEach(([routeId, error]) => {
-          errors = Object.assign(errors || {}, { [routeId]: error });
-        });
+      errors = { ...state.errors, ...errors };
     }
 
     let updatedFetchers = markFetchRedirectsDone();
@@ -2143,8 +2118,9 @@ export function createRouter(init: RouterInit): Router {
       );
     }
 
-    if (fetchControllers.has(key)) abortFetcher(key);
-    let flushSync = (opts && opts.unstable_flushSync) === true;
+    abortFetcher(key);
+
+    let flushSync = (opts && opts.flushSync) === true;
 
     let routesToUse = inFlightDataRoutes || dataRoutes;
     let normalizedPath = normalizeTo(
@@ -2188,7 +2164,7 @@ export function createRouter(init: RouterInit): Router {
 
     let match = getTargetMatch(matches, path);
 
-    pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
+    let preventScrollReset = (opts && opts.preventScrollReset) === true;
 
     if (submission && isMutationMethod(submission.formMethod)) {
       handleFetcherAction(
@@ -2199,6 +2175,7 @@ export function createRouter(init: RouterInit): Router {
         matches,
         fogOfWar.active,
         flushSync,
+        preventScrollReset,
         submission
       );
       return;
@@ -2215,6 +2192,7 @@ export function createRouter(init: RouterInit): Router {
       matches,
       fogOfWar.active,
       flushSync,
+      preventScrollReset,
       submission
     );
   }
@@ -2229,6 +2207,7 @@ export function createRouter(init: RouterInit): Router {
     requestMatches: AgnosticDataRouteMatch[],
     isFogOfWar: boolean,
     flushSync: boolean,
+    preventScrollReset: boolean,
     submission: Submission
   ) {
     interruptActiveLoads();
@@ -2343,6 +2322,7 @@ export function createRouter(init: RouterInit): Router {
           updateFetcherState(key, getLoadingFetcher(submission));
           return startRedirectNavigation(fetchRequest, actionResult, false, {
             fetcherSubmission: submission,
+            preventScrollReset,
           });
         }
       }
@@ -2412,9 +2392,7 @@ export function createRouter(init: RouterInit): Router {
           existingFetcher ? existingFetcher.data : undefined
         );
         state.fetchers.set(staleKey, revalidatingFetcher);
-        if (fetchControllers.has(staleKey)) {
-          abortFetcher(staleKey);
-        }
+        abortFetcher(staleKey);
         if (rf.controller) {
           fetchControllers.set(staleKey, rf.controller);
         }
@@ -2457,7 +2435,8 @@ export function createRouter(init: RouterInit): Router {
       return startRedirectNavigation(
         revalidationRequest,
         redirect.result,
-        false
+        false,
+        { preventScrollReset }
       );
     }
 
@@ -2470,7 +2449,8 @@ export function createRouter(init: RouterInit): Router {
       return startRedirectNavigation(
         revalidationRequest,
         redirect.result,
-        false
+        false,
+        { preventScrollReset }
       );
     }
 
@@ -2478,7 +2458,6 @@ export function createRouter(init: RouterInit): Router {
     let { loaderData, errors } = processLoaderData(
       state,
       matches,
-      matchesToLoad,
       loaderResults,
       undefined,
       revalidatingFetchers,
@@ -2538,6 +2517,7 @@ export function createRouter(init: RouterInit): Router {
     matches: AgnosticDataRouteMatch[],
     isFogOfWar: boolean,
     flushSync: boolean,
+    preventScrollReset: boolean,
     submission?: Submission
   ) {
     let existingFetcher = state.fetchers.get(key);
@@ -2634,7 +2614,9 @@ export function createRouter(init: RouterInit): Router {
         return;
       } else {
         fetchRedirectIds.add(key);
-        await startRedirectNavigation(fetchRequest, result, false);
+        await startRedirectNavigation(fetchRequest, result, false, {
+          preventScrollReset,
+        });
         return;
       }
     }
@@ -2677,10 +2659,12 @@ export function createRouter(init: RouterInit): Router {
     {
       submission,
       fetcherSubmission,
+      preventScrollReset,
       replace,
     }: {
       submission?: Submission;
       fetcherSubmission?: Submission;
+      preventScrollReset?: boolean;
       replace?: boolean;
     } = {}
   ) {
@@ -2761,7 +2745,7 @@ export function createRouter(init: RouterInit): Router {
           formAction: location,
         },
         // Preserve these flags across redirects
-        preventScrollReset: pendingPreventScrollReset,
+        preventScrollReset: preventScrollReset || pendingPreventScrollReset,
         enableViewTransition: isNavigation
           ? pendingViewTransitionEnabled
           : undefined,
@@ -2778,7 +2762,7 @@ export function createRouter(init: RouterInit): Router {
         // Send fetcher submissions through for shouldRevalidate
         fetcherSubmission,
         // Preserve these flags across redirects
-        preventScrollReset: pendingPreventScrollReset,
+        preventScrollReset: preventScrollReset || pendingPreventScrollReset,
         enableViewTransition: isNavigation
           ? pendingViewTransitionEnabled
           : undefined,
@@ -2927,8 +2911,8 @@ export function createRouter(init: RouterInit): Router {
     fetchLoadMatches.forEach((_, key) => {
       if (fetchControllers.has(key)) {
         cancelledFetcherLoads.add(key);
-        abortFetcher(key);
       }
+      abortFetcher(key);
     });
   }
 
@@ -3011,9 +2995,10 @@ export function createRouter(init: RouterInit): Router {
 
   function abortFetcher(key: string) {
     let controller = fetchControllers.get(key);
-    invariant(controller, `Expected fetch controller: ${key}`);
-    controller.abort();
-    fetchControllers.delete(key);
+    if (controller) {
+      controller.abort();
+      fetchControllers.delete(key);
+    }
   }
 
   function markFetchersDone(keys: string[]) {
@@ -3243,13 +3228,6 @@ export function createRouter(init: RouterInit): Router {
     pathname: string
   ): { active: boolean; matches: AgnosticDataRouteMatch[] | null } {
     if (patchRoutesOnNavigationImpl) {
-      // Don't bother re-calling patchRouteOnMiss for a path we've already
-      // processed.  the last execution would have patched the route tree
-      // accordingly so `matches` here are already accurate.
-      if (discoveredRoutes.has(pathname)) {
-        return { active: false, matches };
-      }
-
       if (!matches) {
         let fogMatches = matchRoutesImpl<AgnosticDataRouteObject>(
           routesToUse,
@@ -3298,21 +3276,30 @@ export function createRouter(init: RouterInit): Router {
     pathname: string,
     signal: AbortSignal
   ): Promise<DiscoverRoutesResult> {
+    if (!patchRoutesOnNavigationImpl) {
+      return { type: "success", matches };
+    }
+
     let partialMatches: AgnosticDataRouteMatch[] | null = matches;
     while (true) {
       let isNonHMR = inFlightDataRoutes == null;
       let routesToUse = inFlightDataRoutes || dataRoutes;
+      let localManifest = manifest;
       try {
-        await loadLazyRouteChildren(
-          patchRoutesOnNavigationImpl!,
-          pathname,
-          partialMatches,
-          routesToUse,
-          manifest,
-          mapRouteProperties,
-          pendingPatchRoutes,
-          signal
-        );
+        await patchRoutesOnNavigationImpl({
+          path: pathname,
+          matches: partialMatches,
+          patch: (routeId, children) => {
+            if (signal.aborted) return;
+            patchRoutesImpl(
+              routeId,
+              children,
+              routesToUse,
+              localManifest,
+              mapRouteProperties
+            );
+          },
+        });
       } catch (e) {
         return { type: "error", error: e, partialMatches };
       } finally {
@@ -3322,7 +3309,7 @@ export function createRouter(init: RouterInit): Router {
         // trigger a re-run of memoized `router.routes` dependencies.
         // HMR will already update the identity and reflow when it lands
         // `inFlightDataRoutes` in `completeNavigation`
-        if (isNonHMR) {
+        if (isNonHMR && !signal.aborted) {
           dataRoutes = [...dataRoutes];
         }
       }
@@ -3333,7 +3320,6 @@ export function createRouter(init: RouterInit): Router {
 
       let newMatches = matchRoutes(routesToUse, pathname, basename);
       if (newMatches) {
-        addToFifoQueue(pathname, discoveredRoutes);
         return { type: "success", matches: newMatches };
       }
 
@@ -3352,7 +3338,6 @@ export function createRouter(init: RouterInit): Router {
             (m, i) => m.route.id === newPartialMatches![i].route.id
           ))
       ) {
-        addToFifoQueue(pathname, discoveredRoutes);
         return { type: "success", matches: null };
       }
 
@@ -3360,14 +3345,6 @@ export function createRouter(init: RouterInit): Router {
     }
   }
 
-  function addToFifoQueue(path: string, queue: Set<string>) {
-    if (queue.size >= discoveredRoutesMaxSize) {
-      let first = queue.values().next().value;
-      queue.delete(first);
-    }
-    queue.add(path);
-  }
-
   function _internalSetRoutes(newRoutes: AgnosticDataRouteObject[]) {
     manifest = {};
     inFlightDataRoutes = convertRoutesToDataRoutes(
@@ -3538,11 +3515,11 @@ export function createStaticHandler(
     {
       requestContext,
       skipLoaderErrorBubbling,
-      unstable_dataStrategy,
+      dataStrategy,
     }: {
       requestContext?: unknown;
       skipLoaderErrorBubbling?: boolean;
-      unstable_dataStrategy?: DataStrategyFunction;
+      dataStrategy?: DataStrategyFunction;
     } = {}
   ): Promise<StaticHandlerContext | Response> {
     let url = new URL(request.url);
@@ -3594,7 +3571,7 @@ export function createStaticHandler(
       location,
       matches,
       requestContext,
-      unstable_dataStrategy || null,
+      dataStrategy || null,
       skipLoaderErrorBubbling === true,
       null
     );
@@ -3639,11 +3616,11 @@ export function createStaticHandler(
     {
       routeId,
       requestContext,
-      unstable_dataStrategy,
+      dataStrategy,
     }: {
       requestContext?: unknown;
       routeId?: string;
-      unstable_dataStrategy?: DataStrategyFunction;
+      dataStrategy?: DataStrategyFunction;
     } = {}
   ): Promise<any> {
     let url = new URL(request.url);
@@ -3677,7 +3654,7 @@ export function createStaticHandler(
       location,
       matches,
       requestContext,
-      unstable_dataStrategy || null,
+      dataStrategy || null,
       false,
       match
     );
@@ -3716,7 +3693,7 @@ export function createStaticHandler(
     location: Location,
     matches: AgnosticDataRouteMatch[],
     requestContext: unknown,
-    unstable_dataStrategy: DataStrategyFunction | null,
+    dataStrategy: DataStrategyFunction | null,
     skipLoaderErrorBubbling: boolean,
     routeMatch: AgnosticDataRouteMatch | null
   ): Promise<Omit<StaticHandlerContext, "location" | "basename"> | Response> {
@@ -3732,7 +3709,7 @@ export function createStaticHandler(
           matches,
           routeMatch || getTargetMatch(matches, location),
           requestContext,
-          unstable_dataStrategy,
+          dataStrategy,
           skipLoaderErrorBubbling,
           routeMatch != null
         );
@@ -3743,7 +3720,7 @@ export function createStaticHandler(
         request,
         matches,
         requestContext,
-        unstable_dataStrategy,
+        dataStrategy,
         skipLoaderErrorBubbling,
         routeMatch
       );
@@ -3778,7 +3755,7 @@ export function createStaticHandler(
     matches: AgnosticDataRouteMatch[],
     actionMatch: AgnosticDataRouteMatch,
     requestContext: unknown,
-    unstable_dataStrategy: DataStrategyFunction | null,
+    dataStrategy: DataStrategyFunction | null,
     skipLoaderErrorBubbling: boolean,
     isRouteRequest: boolean
   ): Promise<Omit<StaticHandlerContext, "location" | "basename"> | Response> {
@@ -3805,7 +3782,7 @@ export function createStaticHandler(
         matches,
         isRouteRequest,
         requestContext,
-        unstable_dataStrategy
+        dataStrategy
       );
       result = results[actionMatch.route.id];
 
@@ -3877,7 +3854,7 @@ export function createStaticHandler(
         loaderRequest,
         matches,
         requestContext,
-        unstable_dataStrategy,
+        dataStrategy,
         skipLoaderErrorBubbling,
         null,
         [boundaryMatch.route.id, result]
@@ -3902,7 +3879,7 @@ export function createStaticHandler(
       loaderRequest,
       matches,
       requestContext,
-      unstable_dataStrategy,
+      dataStrategy,
       skipLoaderErrorBubbling,
       null
     );
@@ -3924,7 +3901,7 @@ export function createStaticHandler(
     request: Request,
     matches: AgnosticDataRouteMatch[],
     requestContext: unknown,
-    unstable_dataStrategy: DataStrategyFunction | null,
+    dataStrategy: DataStrategyFunction | null,
     skipLoaderErrorBubbling: boolean,
     routeMatch: AgnosticDataRouteMatch | null,
     pendingActionResult?: PendingActionResult
@@ -3987,7 +3964,7 @@ export function createStaticHandler(
       matches,
       isRouteRequest,
       requestContext,
-      unstable_dataStrategy
+      dataStrategy
     );
 
     if (request.signal.aborted) {
@@ -4033,10 +4010,10 @@ export function createStaticHandler(
     matches: AgnosticDataRouteMatch[],
     isRouteRequest: boolean,
     requestContext: unknown,
-    unstable_dataStrategy: DataStrategyFunction | null
+    dataStrategy: DataStrategyFunction | null
   ): Promise<Record<string, DataResult>> {
     let results = await callDataStrategyImpl(
-      unstable_dataStrategy || defaultDataStrategy,
+      dataStrategy || defaultDataStrategy,
       type,
       null,
       request,
@@ -4179,16 +4156,23 @@ function normalizeTo(
     path.hash = location.hash;
   }
 
-  // Add an ?index param for matched index routes if we don't already have one
-  if (
-    (to == null || to === "" || to === ".") &&
-    activeRouteMatch &&
-    activeRouteMatch.route.index &&
-    !hasNakedIndexQuery(path.search)
-  ) {
-    path.search = path.search
-      ? path.search.replace(/^\?/, "?index&")
-      : "?index";
+  // Account for `?index` params when routing to the current location
+  if ((to == null || to === "" || to === ".") && activeRouteMatch) {
+    let nakedIndex = hasNakedIndexQuery(path.search);
+    if (activeRouteMatch.route.index && !nakedIndex) {
+      // Add one when we're targeting an index route
+      path.search = path.search
+        ? path.search.replace(/^\?/, "?index&")
+        : "?index";
+    } else if (!activeRouteMatch.route.index && nakedIndex) {
+      // Remove existing ones when we're not
+      let params = new URLSearchParams(path.search);
+      let indexValues = params.getAll("index");
+      params.delete("index");
+      indexValues.filter((v) => v).forEach((v) => params.append("index", v));
+      let qs = params.toString();
+      path.search = qs ? `?${qs}` : "";
+    }
   }
 
   // If we're operating within a basename, prepend it to the pathname.  If
@@ -4352,20 +4336,18 @@ function normalizeNavigateOptions(
   return { path: createPath(parsedPath), submission };
 }
 
-// Filter out all routes below any caught error as they aren't going to
+// Filter out all routes at/below any caught error as they aren't going to
 // render so we don't need to load them
 function getLoaderMatchesUntilBoundary(
   matches: AgnosticDataRouteMatch[],
-  boundaryId: string
+  boundaryId: string,
+  includeBoundary = false
 ) {
-  let boundaryMatches = matches;
-  if (boundaryId) {
-    let index = matches.findIndex((m) => m.route.id === boundaryId);
-    if (index >= 0) {
-      boundaryMatches = matches.slice(0, index);
-    }
+  let index = matches.findIndex((m) => m.route.id === boundaryId);
+  if (index >= 0) {
+    return matches.slice(0, includeBoundary ? index + 1 : index);
   }
-  return boundaryMatches;
+  return matches;
 }
 
 function getMatchesToLoad(
@@ -4374,7 +4356,7 @@ function getMatchesToLoad(
   matches: AgnosticDataRouteMatch[],
   submission: Submission | undefined,
   location: Location,
-  isInitialLoad: boolean,
+  initialHydration: boolean,
   skipActionErrorRevalidation: boolean,
   isRevalidationRequired: boolean,
   cancelledDeferredRoutes: string[],
@@ -4395,13 +4377,26 @@ function getMatchesToLoad(
   let nextUrl = history.createURL(location);
 
   // Pick navigation matches that are net-new or qualify for revalidation
-  let boundaryId =
-    pendingActionResult && isErrorResult(pendingActionResult[1])
-      ? pendingActionResult[0]
-      : undefined;
-  let boundaryMatches = boundaryId
-    ? getLoaderMatchesUntilBoundary(matches, boundaryId)
-    : matches;
+  let boundaryMatches = matches;
+  if (initialHydration && state.errors) {
+    // On initial hydration, only consider matches up to _and including_ the boundary.
+    // This is inclusive to handle cases where a server loader ran successfully,
+    // a child server loader bubbled up to this route, but this route has
+    // `clientLoader.hydrate` so we want to still run the `clientLoader` so that
+    // we have a complete version of `loaderData`
+    boundaryMatches = getLoaderMatchesUntilBoundary(
+      matches,
+      Object.keys(state.errors)[0],
+      true
+    );
+  } else if (pendingActionResult && isErrorResult(pendingActionResult[1])) {
+    // If an action threw an error, we call loaders up to, but not including the
+    // boundary
+    boundaryMatches = getLoaderMatchesUntilBoundary(
+      matches,
+      pendingActionResult[0]
+    );
+  }
 
   // Don't revalidate loaders by default after action 4xx/5xx responses
   // when the flag is enabled.  They can still opt-into revalidation via
@@ -4423,15 +4418,8 @@ function getMatchesToLoad(
       return false;
     }
 
-    if (isInitialLoad) {
-      if (typeof route.loader !== "function" || route.loader.hydrate) {
-        return true;
-      }
-      return (
-        state.loaderData[route.id] === undefined &&
-        // Don't re-run if the loader ran and threw an error
-        (!state.errors || state.errors[route.id] === undefined)
-      );
+    if (initialHydration) {
+      return shouldLoadRouteOnHydration(route, state.loaderData, state.errors);
     }
 
     // Always call the loader on new route instances and pending defer cancellations
@@ -4473,12 +4461,12 @@ function getMatchesToLoad(
   let revalidatingFetchers: RevalidatingFetcher[] = [];
   fetchLoadMatches.forEach((f, key) => {
     // Don't revalidate:
-    //  - on initial load (shouldn't be any fetchers then anyway)
+    //  - on initial hydration (shouldn't be any fetchers then anyway)
     //  - if fetcher won't be present in the subsequent render
     //    - no longer matches the URL (v7_fetcherPersist=false)
     //    - was unmounted but persisted due to v7_fetcherPersist=true
     if (
-      isInitialLoad ||
+      initialHydration ||
       !matches.some((m) => m.route.id === f.routeId) ||
       deletedFetchers.has(key)
     ) {
@@ -4558,6 +4546,38 @@ function getMatchesToLoad(
   return [navigationMatches, revalidatingFetchers];
 }
 
+function shouldLoadRouteOnHydration(
+  route: AgnosticDataRouteObject,
+  loaderData: RouteData | null | undefined,
+  errors: RouteData | null | undefined
+) {
+  // We dunno if we have a loader - gotta find out!
+  if (route.lazy) {
+    return true;
+  }
+
+  // No loader, nothing to initialize
+  if (!route.loader) {
+    return false;
+  }
+
+  let hasData = loaderData != null && loaderData[route.id] !== undefined;
+  let hasError = errors != null && errors[route.id] !== undefined;
+
+  // Don't run if we error'd during SSR
+  if (!hasData && hasError) {
+    return false;
+  }
+
+  // Explicitly opting-in to running on hydration
+  if (typeof route.loader === "function" && route.loader.hydrate === true) {
+    return true;
+  }
+
+  // Otherwise, run if we're not yet initialized with anything
+  return !hasData && !hasError;
+}
+
 function isNewLoader(
   currentLoaderData: RouteData,
   currentMatch: AgnosticDataRouteMatch,
@@ -4607,53 +4627,6 @@ function shouldRevalidateLoader(
   return arg.defaultShouldRevalidate;
 }
 
-/**
- * Idempotent utility to execute patchRoutesOnNavigation() to lazily load route
- * definitions and update the routes/routeManifest
- */
-async function loadLazyRouteChildren(
-  patchRoutesOnNavigationImpl: AgnosticPatchRoutesOnNavigationFunction,
-  path: string,
-  matches: AgnosticDataRouteMatch[],
-  routes: AgnosticDataRouteObject[],
-  manifest: RouteManifest,
-  mapRouteProperties: MapRoutePropertiesFunction,
-  pendingRouteChildren: Map<
-    string,
-    ReturnType<typeof patchRoutesOnNavigationImpl>
-  >,
-  signal: AbortSignal
-) {
-  let key = [path, ...matches.map((m) => m.route.id)].join("-");
-  try {
-    let pending = pendingRouteChildren.get(key);
-    if (!pending) {
-      pending = patchRoutesOnNavigationImpl({
-        path,
-        matches,
-        patch: (routeId, children) => {
-          if (!signal.aborted) {
-            patchRoutesImpl(
-              routeId,
-              children,
-              routes,
-              manifest,
-              mapRouteProperties
-            );
-          }
-        },
-      });
-      pendingRouteChildren.set(key, pending);
-    }
-
-    if (pending && isPromise<AgnosticRouteObject[]>(pending)) {
-      await pending;
-    }
-  } finally {
-    pendingRouteChildren.delete(key);
-  }
-}
-
 function patchRoutesImpl(
   routeId: string | null,
   children: AgnosticRouteObject[],
@@ -4661,32 +4634,79 @@ function patchRoutesImpl(
   manifest: RouteManifest,
   mapRouteProperties: MapRoutePropertiesFunction
 ) {
+  let childrenToPatch: AgnosticDataRouteObject[];
   if (routeId) {
     let route = manifest[routeId];
     invariant(
       route,
       `No route found to patch children into: routeId = ${routeId}`
     );
-    let dataChildren = convertRoutesToDataRoutes(
-      children,
-      mapRouteProperties,
-      [routeId, "patch", String(route.children?.length || "0")],
-      manifest
-    );
-    if (route.children) {
-      route.children.push(...dataChildren);
-    } else {
-      route.children = dataChildren;
+    if (!route.children) {
+      route.children = [];
     }
+    childrenToPatch = route.children;
   } else {
-    let dataChildren = convertRoutesToDataRoutes(
-      children,
-      mapRouteProperties,
-      ["patch", String(routesToUse.length || "0")],
-      manifest
-    );
-    routesToUse.push(...dataChildren);
+    childrenToPatch = routesToUse;
+  }
+
+  // Don't patch in routes we already know about so that `patch` is idempotent
+  // to simplify user-land code. This is useful because we re-call the
+  // `patchRoutesOnNavigation` function for matched routes with params.
+  let uniqueChildren = children.filter(
+    (newRoute) =>
+      !childrenToPatch.some((existingRoute) =>
+        isSameRoute(newRoute, existingRoute)
+      )
+  );
+
+  let newRoutes = convertRoutesToDataRoutes(
+    uniqueChildren,
+    mapRouteProperties,
+    [routeId || "_", "patch", String(childrenToPatch?.length || "0")],
+    manifest
+  );
+
+  childrenToPatch.push(...newRoutes);
+}
+
+function isSameRoute(
+  newRoute: AgnosticRouteObject,
+  existingRoute: AgnosticRouteObject
+): boolean {
+  // Most optimal check is by id
+  if (
+    "id" in newRoute &&
+    "id" in existingRoute &&
+    newRoute.id === existingRoute.id
+  ) {
+    return true;
+  }
+
+  // Second is by pathing differences
+  if (
+    !(
+      newRoute.index === existingRoute.index &&
+      newRoute.path === existingRoute.path &&
+      newRoute.caseSensitive === existingRoute.caseSensitive
+    )
+  ) {
+    return false;
   }
+
+  // Pathless layout routes are trickier since we need to check children.
+  // If they have no children then they're the same as far as we can tell
+  if (
+    (!newRoute.children || newRoute.children.length === 0) &&
+    (!existingRoute.children || existingRoute.children.length === 0)
+  ) {
+    return true;
+  }
+
+  // Otherwise, we look to see if every child in the new route is already
+  // represented in the existing route's children
+  return newRoute.children!.every((aChild, i) =>
+    existingRoute.children?.some((bChild) => isSameRoute(aChild, bChild))
+  );
 }
 
 /**
@@ -5038,7 +5058,7 @@ async function convertDataStrategyResultToDataResult(
         };
       }
 
-      // Convert thrown unstable_data() to ErrorResponse instances
+      // Convert thrown data() to ErrorResponse instances
       result = new ErrorResponseImpl(
         result.init?.status || 500,
         undefined,
@@ -5310,7 +5330,6 @@ function processRouteLoaderData(
 function processLoaderData(
   state: RouterState,
   matches: AgnosticDataRouteMatch[],
-  matchesToLoad: AgnosticDataRouteMatch[],
   results: Record<string, DataResult>,
   pendingActionResult: PendingActionResult | undefined,
   revalidatingFetchers: RevalidatingFetcher[],
@@ -5477,7 +5496,7 @@ function getInternalRouterError(
     statusText = "Bad Request";
     if (type === "route-discovery") {
       errorMessage =
-        `Unable to match URL "${pathname}" - the \`unstable_patchRoutesOnNavigation()\` ` +
+        `Unable to match URL "${pathname}" - the \`patchRoutesOnNavigation()\` ` +
         `function threw the following error:\n${message}`;
     } else if (method && pathname && routeId) {
       errorMessage =