@remix-run/router 1.15.3 → 1.16.0-pre.0

package/router.ts

@@ -8,11 +8,13 @@ import {
   warning,
 } from "./history";
 import type {
-  ActionFunction,
   AgnosticDataRouteMatch,
   AgnosticDataRouteObject,
+  DataStrategyMatch,
   AgnosticRouteObject,
   DataResult,
+  DataStrategyFunction,
+  DataStrategyFunctionArgs,
   DeferredData,
   DeferredResult,
   DetectErrorBoundaryFunction,
@@ -20,8 +22,8 @@ import type {
   FormEncType,
   FormMethod,
   HTMLFormMethod,
+  HandlerResult,
   ImmutableRouteKey,
-  LoaderFunction,
   MapRoutePropertiesFunction,
   MutationFormMethod,
   RedirectResult,
@@ -357,6 +359,7 @@ export interface FutureConfig {
   v7_partialHydration: boolean;
   v7_prependBasename: boolean;
   v7_relativeSplatPath: boolean;
+  unstable_skipActionErrorRevalidation: boolean;
 }
 
 /**
@@ -374,6 +377,7 @@ export interface RouterInit {
   future?: Partial<FutureConfig>;
   hydrationData?: HydrationState;
   window?: Window;
+  unstable_dataStrategy?: DataStrategyFunction;
 }
 
 /**
@@ -400,7 +404,13 @@ export interface StaticHandler {
   dataRoutes: AgnosticDataRouteObject[];
   query(
     request: Request,
-    opts?: { requestContext?: unknown }
+    opts?: {
+      loadRouteIds?: string[];
+      requestContext?: unknown;
+      skipLoaders?: boolean;
+      skipLoaderErrorBubbling?: boolean;
+      unstable_dataStrategy?: DataStrategyFunction;
+    }
   ): Promise<StaticHandlerContext | Response>;
   queryRoute(
     request: Request,
@@ -616,18 +626,14 @@ interface ShortCircuitable {
   shortCircuited?: boolean;
 }
 
+type PendingActionResult = [string, SuccessResult | ErrorResult];
+
 interface HandleActionResult extends ShortCircuitable {
   /**
-   * Error thrown from the current action, keyed by the route containing the
-   * error boundary to render the error.  To be committed to the state after
-   * loaders have completed
-   */
-  pendingActionError?: RouteData;
-  /**
-   * Data returned from the current action, keyed by the route owning the action.
-   * To be committed to the state after loaders have completed
+   * Tuple for the returned or thrown value from the current action.  The routeId
+   * is the action route for success and the bubbled boundary route for errors.
    */
-  pendingActionData?: RouteData;
+  pendingActionResult?: PendingActionResult;
 }
 
 interface HandleLoadersResult extends ShortCircuitable {
@@ -660,16 +666,6 @@ interface RevalidatingFetcher extends FetchLoadMatch {
   controller: AbortController | null;
 }
 
-/**
- * Wrapper object to allow us to throw any response out from callLoaderOrAction
- * for queryRouter while preserving whether or not it was thrown or returned
- * from the loader/action
- */
-interface QueryRouteResponse {
-  type: ResultType.data | ResultType.error;
-  response: Response;
-}
-
 const validMutationMethodsArr: MutationFormMethod[] = [
   "post",
   "put",
@@ -776,6 +772,7 @@ export function createRouter(init: RouterInit): Router {
   );
   let inFlightDataRoutes: AgnosticDataRouteObject[] | undefined;
   let basename = init.basename || "/";
+  let dataStrategyImpl = init.unstable_dataStrategy || defaultDataStrategy;
   // Config driven behavior flags
   let future: FutureConfig = {
     v7_fetcherPersist: false,
@@ -783,6 +780,7 @@ export function createRouter(init: RouterInit): Router {
     v7_partialHydration: false,
     v7_prependBasename: false,
     v7_relativeSplatPath: false,
+    unstable_skipActionErrorRevalidation: false,
     ...init.future,
   };
   // Cleanup function for history
@@ -835,9 +833,16 @@ export function createRouter(init: RouterInit): Router {
     let errors = init.hydrationData ? init.hydrationData.errors : null;
     let isRouteInitialized = (m: AgnosticDataRouteMatch) => {
       // No loader, nothing to initialize
-      if (!m.route.loader) return true;
+      if (!m.route.loader) {
+        return true;
+      }
       // Explicitly opting-in to running on hydration
-      if (m.route.loader.hydrate === true) return false;
+      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) ||
@@ -1493,24 +1498,24 @@ export function createRouter(init: RouterInit): Router {
       pendingNavigationController.signal,
       opts && opts.submission
     );
-    let pendingActionData: RouteData | undefined;
-    let pendingError: RouteData | undefined;
+    let pendingActionResult: PendingActionResult | undefined;
 
     if (opts && opts.pendingError) {
       // If we have a pendingError, it means the user attempted a GET submission
       // with binary FormData so assign here and skip to handleLoaders.  That
       // way we handle calling loaders above the boundary etc.  It's not really
       // different from an actionError in that sense.
-      pendingError = {
-        [findNearestBoundary(matches).route.id]: opts.pendingError,
-      };
+      pendingActionResult = [
+        findNearestBoundary(matches).route.id,
+        { type: ResultType.error, error: opts.pendingError },
+      ];
     } else if (
       opts &&
       opts.submission &&
       isMutationMethod(opts.submission.formMethod)
     ) {
       // Call action if we received an action submission
-      let actionOutput = await handleAction(
+      let actionResult = await handleAction(
         request,
         location,
         opts.submission,
@@ -1518,17 +1523,20 @@ export function createRouter(init: RouterInit): Router {
         { replace: opts.replace, flushSync }
       );
 
-      if (actionOutput.shortCircuited) {
+      if (actionResult.shortCircuited) {
         return;
       }
 
-      pendingActionData = actionOutput.pendingActionData;
-      pendingError = actionOutput.pendingActionError;
+      pendingActionResult = actionResult.pendingActionResult;
       loadingNavigation = getLoadingNavigation(location, opts.submission);
       flushSync = false;
 
       // Create a GET request for the loaders
-      request = new Request(request.url, { signal: request.signal });
+      request = createClientSideRequest(
+        init.history,
+        request.url,
+        request.signal
+      );
     }
 
     // Call loaders
@@ -1542,8 +1550,7 @@ export function createRouter(init: RouterInit): Router {
       opts && opts.replace,
       opts && opts.initialHydration === true,
       flushSync,
-      pendingActionData,
-      pendingError
+      pendingActionResult
     );
 
     if (shortCircuited) {
@@ -1557,7 +1564,7 @@ export function createRouter(init: RouterInit): Router {
 
     completeNavigation(location, {
       matches,
-      ...(pendingActionData ? { actionData: pendingActionData } : {}),
+      ...getActionDataForCommit(pendingActionResult),
       loaderData,
       errors,
     });
@@ -1592,16 +1599,13 @@ export function createRouter(init: RouterInit): Router {
         }),
       };
     } else {
-      result = await callLoaderOrAction(
+      let results = await callDataStrategy(
         "action",
         request,
-        actionMatch,
-        matches,
-        manifest,
-        mapRouteProperties,
-        basename,
-        future.v7_relativeSplatPath
+        [actionMatch],
+        matches
       );
+      result = results[0];
 
       if (request.signal.aborted) {
         return { shortCircuited: true };
@@ -1616,13 +1620,24 @@ export function createRouter(init: RouterInit): Router {
         // If the user didn't explicity indicate replace behavior, replace if
         // we redirected to the exact same location we're currently at to avoid
         // double back-buttons
-        replace =
-          result.location === state.location.pathname + state.location.search;
+        let location = normalizeRedirectLocation(
+          result.response.headers.get("Location")!,
+          new URL(request.url),
+          basename
+        );
+        replace = location === state.location.pathname + state.location.search;
       }
-      await startRedirectNavigation(state, result, { submission, replace });
+      await startRedirectNavigation(request, result, {
+        submission,
+        replace,
+      });
       return { shortCircuited: true };
     }
 
+    if (isDeferredResult(result)) {
+      throw getInternalRouterError(400, { type: "defer-action" });
+    }
+
     if (isErrorResult(result)) {
       // Store off the pending error - we use it to determine which loaders
       // to call and will commit it when we complete the navigation
@@ -1637,18 +1652,12 @@ export function createRouter(init: RouterInit): Router {
       }
 
       return {
-        // Send back an empty object we can use to clear out any prior actionData
-        pendingActionData: {},
-        pendingActionError: { [boundaryMatch.route.id]: result.error },
+        pendingActionResult: [boundaryMatch.route.id, result],
       };
     }
 
-    if (isDeferredResult(result)) {
-      throw getInternalRouterError(400, { type: "defer-action" });
-    }
-
     return {
-      pendingActionData: { [actionMatch.route.id]: result.data },
+      pendingActionResult: [actionMatch.route.id, result],
     };
   }
 
@@ -1664,8 +1673,7 @@ export function createRouter(init: RouterInit): Router {
     replace?: boolean,
     initialHydration?: boolean,
     flushSync?: boolean,
-    pendingActionData?: RouteData,
-    pendingError?: RouteData
+    pendingActionResult?: PendingActionResult
   ): Promise<HandleLoadersResult> {
     // Figure out the right navigation we want to use for data loading
     let loadingNavigation =
@@ -1686,6 +1694,7 @@ export function createRouter(init: RouterInit): Router {
       activeSubmission,
       location,
       future.v7_partialHydration && initialHydration === true,
+      future.unstable_skipActionErrorRevalidation,
       isRevalidationRequired,
       cancelledDeferredRoutes,
       cancelledFetcherLoads,
@@ -1694,8 +1703,7 @@ export function createRouter(init: RouterInit): Router {
       fetchRedirectIds,
       routesToUse,
       basename,
-      pendingActionData,
-      pendingError
+      pendingActionResult
     );
 
     // Cancel pending deferreds for no-longer-matched routes or routes we're
@@ -1718,8 +1726,11 @@ export function createRouter(init: RouterInit): Router {
           matches,
           loaderData: {},
           // Commit pending error if we're short circuiting
-          errors: pendingError || null,
-          ...(pendingActionData ? { actionData: pendingActionData } : {}),
+          errors:
+            pendingActionResult && isErrorResult(pendingActionResult[1])
+              ? { [pendingActionResult[0]]: pendingActionResult[1].error }
+              : null,
+          ...getActionDataForCommit(pendingActionResult),
           ...(updatedFetchers ? { fetchers: new Map(state.fetchers) } : {}),
         },
         { flushSync }
@@ -1745,15 +1756,27 @@ export function createRouter(init: RouterInit): Router {
         );
         state.fetchers.set(rf.key, revalidatingFetcher);
       });
-      let actionData = pendingActionData || state.actionData;
+
+      let actionData: Record<string, RouteData> | null | undefined;
+      if (pendingActionResult && !isErrorResult(pendingActionResult[1])) {
+        // This is cast to `any` currently because `RouteData`uses any and it
+        // would be a breaking change to use any.
+        // TODO: v7 - change `RouteData` to use `unknown` instead of `any`
+        actionData = {
+          [pendingActionResult[0]]: pendingActionResult[1].data as any,
+        };
+      } else if (state.actionData) {
+        if (Object.keys(state.actionData).length === 0) {
+          actionData = null;
+        } else {
+          actionData = state.actionData;
+        }
+      }
+
       updateState(
         {
           navigation: loadingNavigation,
-          ...(actionData
-            ? Object.keys(actionData).length === 0
-              ? { actionData: null }
-              : { actionData }
-            : {}),
+          ...(actionData !== undefined ? { actionData } : {}),
           ...(revalidatingFetchers.length > 0
             ? { fetchers: new Map(state.fetchers) }
             : {}),
@@ -1786,7 +1809,7 @@ export function createRouter(init: RouterInit): Router {
       );
     }
 
-    let { results, loaderResults, fetcherResults } =
+    let { loaderResults, fetcherResults } =
       await callLoadersAndMaybeResolveData(
         state.matches,
         matches,
@@ -1811,7 +1834,7 @@ export function createRouter(init: RouterInit): Router {
     revalidatingFetchers.forEach((rf) => fetchControllers.delete(rf.key));
 
     // If any loaders returned a redirect Response, start a new REPLACE navigation
-    let redirect = findRedirect(results);
+    let redirect = findRedirect([...loaderResults, ...fetcherResults]);
     if (redirect) {
       if (redirect.idx >= matchesToLoad.length) {
         // If this redirect came from a fetcher make sure we mark it in
@@ -1821,7 +1844,9 @@ export function createRouter(init: RouterInit): Router {
           revalidatingFetchers[redirect.idx - matchesToLoad.length].key;
         fetchRedirectIds.add(fetcherKey);
       }
-      await startRedirectNavigation(state, redirect.result, { replace });
+      await startRedirectNavigation(request, redirect.result, {
+        replace,
+      });
       return { shortCircuited: true };
     }
 
@@ -1831,7 +1856,7 @@ export function createRouter(init: RouterInit): Router {
       matches,
       matchesToLoad,
       loaderResults,
-      pendingError,
+      pendingActionResult,
       revalidatingFetchers,
       fetcherResults,
       activeDeferreds
@@ -1995,16 +2020,13 @@ export function createRouter(init: RouterInit): Router {
     fetchControllers.set(key, abortController);
 
     let originatingLoadId = incrementingLoadId;
-    let actionResult = await callLoaderOrAction(
+    let actionResults = await callDataStrategy(
       "action",
       fetchRequest,
-      match,
-      requestMatches,
-      manifest,
-      mapRouteProperties,
-      basename,
-      future.v7_relativeSplatPath
+      [match],
+      requestMatches
     );
+    let actionResult = actionResults[0];
 
     if (fetchRequest.signal.aborted) {
       // We can delete this so long as we weren't aborted by our own fetcher
@@ -2037,7 +2059,7 @@ export function createRouter(init: RouterInit): Router {
         } else {
           fetchRedirectIds.add(key);
           updateFetcherState(key, getLoadingFetcher(submission));
-          return startRedirectNavigation(state, actionResult, {
+          return startRedirectNavigation(fetchRequest, actionResult, {
             fetcherSubmission: submission,
           });
         }
@@ -2083,6 +2105,7 @@ export function createRouter(init: RouterInit): Router {
       submission,
       nextLocation,
       false,
+      future.unstable_skipActionErrorRevalidation,
       isRevalidationRequired,
       cancelledDeferredRoutes,
       cancelledFetcherLoads,
@@ -2091,8 +2114,7 @@ export function createRouter(init: RouterInit): Router {
       fetchRedirectIds,
       routesToUse,
       basename,
-      { [match.route.id]: actionResult.data },
-      undefined // No need to send through errors since we short circuit above
+      [match.route.id, actionResult]
     );
 
     // Put all revalidating fetchers into the loading state, except for the
@@ -2126,7 +2148,7 @@ export function createRouter(init: RouterInit): Router {
       abortPendingFetchRevalidations
     );
 
-    let { results, loaderResults, fetcherResults } =
+    let { loaderResults, fetcherResults } =
       await callLoadersAndMaybeResolveData(
         state.matches,
         matches,
@@ -2148,7 +2170,7 @@ export function createRouter(init: RouterInit): Router {
     fetchControllers.delete(key);
     revalidatingFetchers.forEach((r) => fetchControllers.delete(r.key));
 
-    let redirect = findRedirect(results);
+    let redirect = findRedirect([...loaderResults, ...fetcherResults]);
     if (redirect) {
       if (redirect.idx >= matchesToLoad.length) {
         // If this redirect came from a fetcher make sure we mark it in
@@ -2158,7 +2180,7 @@ export function createRouter(init: RouterInit): Router {
           revalidatingFetchers[redirect.idx - matchesToLoad.length].key;
         fetchRedirectIds.add(fetcherKey);
       }
-      return startRedirectNavigation(state, redirect.result);
+      return startRedirectNavigation(revalidationRequest, redirect.result);
     }
 
     // Process and commit output from loaders
@@ -2246,16 +2268,13 @@ export function createRouter(init: RouterInit): Router {
     fetchControllers.set(key, abortController);
 
     let originatingLoadId = incrementingLoadId;
-    let result: DataResult = await callLoaderOrAction(
+    let results = await callDataStrategy(
       "loader",
       fetchRequest,
-      match,
-      matches,
-      manifest,
-      mapRouteProperties,
-      basename,
-      future.v7_relativeSplatPath
+      [match],
+      matches
     );
+    let result = results[0];
 
     // Deferred isn't supported for fetcher loads, await everything and treat it
     // as a normal load.  resolveDeferredData will return undefined if this
@@ -2293,7 +2312,7 @@ export function createRouter(init: RouterInit): Router {
         return;
       } else {
         fetchRedirectIds.add(key);
-        await startRedirectNavigation(state, result);
+        await startRedirectNavigation(fetchRequest, result);
         return;
       }
     }
@@ -2330,7 +2349,7 @@ export function createRouter(init: RouterInit): Router {
    * the history action from the original navigation (PUSH or REPLACE).
    */
   async function startRedirectNavigation(
-    state: RouterState,
+    request: Request,
     redirect: RedirectResult,
     {
       submission,
@@ -2342,26 +2361,29 @@ export function createRouter(init: RouterInit): Router {
       replace?: boolean;
     } = {}
   ) {
-    if (redirect.revalidate) {
+    if (redirect.response.headers.has("X-Remix-Revalidate")) {
       isRevalidationRequired = true;
     }
 
-    let redirectLocation = createLocation(state.location, redirect.location, {
+    let location = redirect.response.headers.get("Location");
+    invariant(location, "Expected a Location header on the redirect Response");
+    location = normalizeRedirectLocation(
+      location,
+      new URL(request.url),
+      basename
+    );
+    let redirectLocation = createLocation(state.location, location, {
       _isRedirect: true,
     });
-    invariant(
-      redirectLocation,
-      "Expected a location on the redirect navigation"
-    );
 
     if (isBrowser) {
       let isDocumentReload = false;
 
-      if (redirect.reloadDocument) {
+      if (redirect.response.headers.has("X-Remix-Reload-Document")) {
         // Hard reload if the response contained X-Remix-Reload-Document
         isDocumentReload = true;
-      } else if (ABSOLUTE_URL_REGEX.test(redirect.location)) {
-        const url = init.history.createURL(redirect.location);
+      } else if (ABSOLUTE_URL_REGEX.test(location)) {
+        const url = init.history.createURL(location);
         isDocumentReload =
           // Hard reload if it's an absolute URL to a new origin
           url.origin !== routerWindow.location.origin ||
@@ -2371,9 +2393,9 @@ export function createRouter(init: RouterInit): Router {
 
       if (isDocumentReload) {
         if (replace) {
-          routerWindow.location.replace(redirect.location);
+          routerWindow.location.replace(location);
         } else {
-          routerWindow.location.assign(redirect.location);
+          routerWindow.location.assign(location);
         }
         return;
       }
@@ -2404,14 +2426,14 @@ export function createRouter(init: RouterInit): Router {
     // redirected location
     let activeSubmission = submission || fetcherSubmission;
     if (
-      redirectPreserveMethodStatusCodes.has(redirect.status) &&
+      redirectPreserveMethodStatusCodes.has(redirect.response.status) &&
       activeSubmission &&
       isMutationMethod(activeSubmission.formMethod)
     ) {
       await startNavigation(redirectHistoryAction, redirectLocation, {
         submission: {
           ...activeSubmission,
-          formAction: redirect.location,
+          formAction: location,
         },
         // Preserve this flag across redirects
         preventScrollReset: pendingPreventScrollReset,
@@ -2433,6 +2455,55 @@ export function createRouter(init: RouterInit): Router {
     }
   }
 
+  // Utility wrapper for calling dataStrategy client-side without having to
+  // pass around the manifest, mapRouteProperties, etc.
+  async function callDataStrategy(
+    type: "loader" | "action",
+    request: Request,
+    matchesToLoad: AgnosticDataRouteMatch[],
+    matches: AgnosticDataRouteMatch[]
+  ): Promise<DataResult[]> {
+    try {
+      let results = await callDataStrategyImpl(
+        dataStrategyImpl,
+        type,
+        request,
+        matchesToLoad,
+        matches,
+        manifest,
+        mapRouteProperties
+      );
+
+      return await Promise.all(
+        results.map((result, i) => {
+          if (isRedirectHandlerResult(result)) {
+            let response = result.result as Response;
+            return {
+              type: ResultType.redirect,
+              response: normalizeRelativeRoutingRedirectResponse(
+                response,
+                request,
+                matchesToLoad[i].route.id,
+                matches,
+                basename,
+                future.v7_relativeSplatPath
+              ),
+            };
+          }
+
+          return convertHandlerResultToDataResult(result);
+        })
+      );
+    } catch (e) {
+      // If the outer dataStrategy method throws, just return the error for all
+      // matches - and it'll naturally bubble to the root
+      return matchesToLoad.map(() => ({
+        type: ResultType.error,
+        error: e,
+      }));
+    }
+  }
+
   async function callLoadersAndMaybeResolveData(
     currentMatches: AgnosticDataRouteMatch[],
     matches: AgnosticDataRouteMatch[],
@@ -2440,45 +2511,33 @@ export function createRouter(init: RouterInit): Router {
     fetchersToLoad: RevalidatingFetcher[],
     request: Request
   ) {
-    // Call all navigation loaders and revalidating fetcher loaders in parallel,
-    // then slice off the results into separate arrays so we can handle them
-    // accordingly
-    let results = await Promise.all([
-      ...matchesToLoad.map((match) =>
-        callLoaderOrAction(
-          "loader",
-          request,
-          match,
-          matches,
-          manifest,
-          mapRouteProperties,
-          basename,
-          future.v7_relativeSplatPath
-        )
-      ),
+    let [loaderResults, ...fetcherResults] = await Promise.all([
+      matchesToLoad.length
+        ? callDataStrategy("loader", request, matchesToLoad, matches)
+        : [],
       ...fetchersToLoad.map((f) => {
         if (f.matches && f.match && f.controller) {
-          return callLoaderOrAction(
-            "loader",
-            createClientSideRequest(init.history, f.path, f.controller.signal),
-            f.match,
-            f.matches,
-            manifest,
-            mapRouteProperties,
-            basename,
-            future.v7_relativeSplatPath
+          let fetcherRequest = createClientSideRequest(
+            init.history,
+            f.path,
+            f.controller.signal
           );
+          return callDataStrategy(
+            "loader",
+            fetcherRequest,
+            [f.match],
+            f.matches
+          ).then((r) => r[0]);
         } else {
-          let error: ErrorResult = {
+          return Promise.resolve<DataResult>({
             type: ResultType.error,
-            error: getInternalRouterError(404, { pathname: f.path }),
-          };
-          return error;
+            error: getInternalRouterError(404, {
+              pathname: f.path,
+            }),
+          });
         }
       }),
     ]);
-    let loaderResults = results.slice(0, matchesToLoad.length);
-    let fetcherResults = results.slice(matchesToLoad.length);
 
     await Promise.all([
       resolveDeferredResults(
@@ -2498,7 +2557,10 @@ export function createRouter(init: RouterInit): Router {
       ),
     ]);
 
-    return { results, loaderResults, fetcherResults };
+    return {
+      loaderResults,
+      fetcherResults,
+    };
   }
 
   function interruptActiveLoads() {
@@ -2925,10 +2987,33 @@ export function createStaticHandler(
    * redirect response is returned or thrown from any action/loader.  We
    * propagate that out and return the raw Response so the HTTP server can
    * return it directly.
+   *
+   * - `opts.loadRouteIds` is an optional array of routeIds to run only a subset of
+   *   loaders during a query() call
+   * - `opts.requestContext` is an optional server context that will be passed
+   *   to actions/loaders in the `context` parameter
+   * - `opts.skipLoaderErrorBubbling` is an optional parameter that will prevent
+   *   the bubbling of errors which allows single-fetch-type implementations
+   *   where the client will handle the bubbling and we may need to return data
+   *   for the handling route
+   * - `opts.skipLoaders` is an optional parameter that will prevent loaders
+   *   from running after an action
    */
   async function query(
     request: Request,
-    { requestContext }: { requestContext?: unknown } = {}
+    {
+      loadRouteIds,
+      requestContext,
+      skipLoaderErrorBubbling,
+      skipLoaders,
+      unstable_dataStrategy,
+    }: {
+      loadRouteIds?: string[];
+      requestContext?: unknown;
+      skipLoaderErrorBubbling?: boolean;
+      skipLoaders?: boolean;
+      unstable_dataStrategy?: DataStrategyFunction;
+    } = {}
   ): Promise<StaticHandlerContext | Response> {
     let url = new URL(request.url);
     let method = request.method;
@@ -2974,7 +3059,17 @@ export function createStaticHandler(
       };
     }
 
-    let result = await queryImpl(request, location, matches, requestContext);
+    let result = await queryImpl(
+      request,
+      location,
+      matches,
+      requestContext,
+      unstable_dataStrategy || null,
+      loadRouteIds || null,
+      skipLoaderErrorBubbling === true,
+      skipLoaders === true,
+      null
+    );
     if (isResponse(result)) {
       return result;
     }
@@ -3004,6 +3099,12 @@ export function createStaticHandler(
    * serialize the error as they see fit while including the proper response
    * code.  Examples here are 404 and 405 errors that occur prior to reaching
    * any user-defined loaders.
+   *
+   * - `opts.routeId` allows you to specify the specific route handler to call.
+   *   If not provided the handler will determine the proper route by matching
+   *   against `request.url`
+   * - `opts.requestContext` is an optional server context that will be passed
+   *    to actions/loaders in the `context` parameter
    */
   async function queryRoute(
     request: Request,
@@ -3043,6 +3144,10 @@ export function createStaticHandler(
       location,
       matches,
       requestContext,
+      null,
+      null,
+      false,
+      false,
       match
     );
     if (isResponse(result)) {
@@ -3079,7 +3184,11 @@ export function createStaticHandler(
     location: Location,
     matches: AgnosticDataRouteMatch[],
     requestContext: unknown,
-    routeMatch?: AgnosticDataRouteMatch
+    unstable_dataStrategy: DataStrategyFunction | null,
+    loadRouteIds: string[] | null,
+    skipLoaderErrorBubbling: boolean,
+    skipLoaders: boolean,
+    routeMatch: AgnosticDataRouteMatch | null
   ): Promise<Omit<StaticHandlerContext, "location" | "basename"> | Response> {
     invariant(
       request.signal,
@@ -3093,6 +3202,10 @@ export function createStaticHandler(
           matches,
           routeMatch || getTargetMatch(matches, location),
           requestContext,
+          unstable_dataStrategy,
+          loadRouteIds,
+          skipLoaderErrorBubbling,
+          skipLoaders,
           routeMatch != null
         );
         return result;
@@ -3102,6 +3215,9 @@ export function createStaticHandler(
         request,
         matches,
         requestContext,
+        unstable_dataStrategy,
+        loadRouteIds,
+        skipLoaderErrorBubbling,
         routeMatch
       );
       return isResponse(result)
@@ -3112,14 +3228,14 @@ export function createStaticHandler(
             actionHeaders: {},
           };
     } catch (e) {
-      // If the user threw/returned a Response in callLoaderOrAction, we throw
-      // it to bail out and then return or throw here based on whether the user
-      // returned or threw
-      if (isQueryRouteResponse(e)) {
+      // If the user threw/returned a Response in callLoaderOrAction for a
+      // `queryRoute` call, we throw the `HandlerResult` to bail out early
+      // and then return or throw the raw Response here accordingly
+      if (isHandlerResult(e) && isResponse(e.result)) {
         if (e.type === ResultType.error) {
-          throw e.response;
+          throw e.result;
         }
-        return e.response;
+        return e.result;
       }
       // Redirects are always returned since they don't propagate to catch
       // boundaries
@@ -3135,6 +3251,10 @@ export function createStaticHandler(
     matches: AgnosticDataRouteMatch[],
     actionMatch: AgnosticDataRouteMatch,
     requestContext: unknown,
+    unstable_dataStrategy: DataStrategyFunction | null,
+    loadRouteIds: string[] | null,
+    skipLoaderErrorBubbling: boolean,
+    skipLoaders: boolean,
     isRouteRequest: boolean
   ): Promise<Omit<StaticHandlerContext, "location" | "basename"> | Response> {
     let result: DataResult;
@@ -3153,17 +3273,16 @@ export function createStaticHandler(
         error,
       };
     } else {
-      result = await callLoaderOrAction(
+      let results = await callDataStrategy(
         "action",
         request,
-        actionMatch,
+        [actionMatch],
         matches,
-        manifest,
-        mapRouteProperties,
-        basename,
-        future.v7_relativeSplatPath,
-        { isStaticRequest: true, isRouteRequest, requestContext }
+        isRouteRequest,
+        requestContext,
+        unstable_dataStrategy
       );
+      result = results[0];
 
       if (request.signal.aborted) {
         throwStaticHandlerAbortedError(request, isRouteRequest, future);
@@ -3176,9 +3295,9 @@ export function createStaticHandler(
       // can get back on the "throw all redirect responses" train here should
       // this ever happen :/
       throw new Response(null, {
-        status: result.status,
+        status: result.response.status,
         headers: {
-          Location: result.location,
+          Location: result.response.headers.get("Location")!,
         },
       });
     }
@@ -3215,51 +3334,102 @@ export function createStaticHandler(
       };
     }
 
+    // Create a GET request for the loaders
+    let loaderRequest = new Request(request.url, {
+      headers: request.headers,
+      redirect: request.redirect,
+      signal: request.signal,
+    });
+
     if (isErrorResult(result)) {
       // Store off the pending error - we use it to determine which loaders
       // to call and will commit it when we complete the navigation
-      let boundaryMatch = findNearestBoundary(matches, actionMatch.route.id);
+      let boundaryMatch = skipLoaderErrorBubbling
+        ? actionMatch
+        : findNearestBoundary(matches, actionMatch.route.id);
+      let statusCode = isRouteErrorResponse(result.error)
+        ? result.error.status
+        : result.statusCode != null
+        ? result.statusCode
+        : 500;
+      let actionHeaders = {
+        ...(result.headers ? { [actionMatch.route.id]: result.headers } : {}),
+      };
+
+      if (skipLoaders) {
+        return {
+          matches,
+          loaderData: {},
+          actionData: {},
+          errors: {
+            [boundaryMatch.route.id]: result.error,
+          },
+          statusCode,
+          loaderHeaders: {},
+          actionHeaders,
+          activeDeferreds: null,
+        };
+      }
+
       let context = await loadRouteData(
-        request,
+        loaderRequest,
         matches,
         requestContext,
-        undefined,
-        {
-          [boundaryMatch.route.id]: result.error,
-        }
+        unstable_dataStrategy,
+        loadRouteIds,
+        skipLoaderErrorBubbling,
+        null,
+        [boundaryMatch.route.id, result]
       );
 
       // action status codes take precedence over loader status codes
       return {
         ...context,
-        statusCode: isRouteErrorResponse(result.error)
-          ? result.error.status
-          : 500,
+        statusCode,
         actionData: null,
-        actionHeaders: {
-          ...(result.headers ? { [actionMatch.route.id]: result.headers } : {}),
+        actionHeaders,
+      };
+    }
+
+    let actionHeaders = result.headers
+      ? { [actionMatch.route.id]: result.headers }
+      : {};
+
+    if (skipLoaders) {
+      return {
+        matches,
+        loaderData: {},
+        actionData: {
+          [actionMatch.route.id]: result.data,
         },
+        errors: null,
+        statusCode: result.statusCode || 200,
+        loaderHeaders: {},
+        actionHeaders,
+        activeDeferreds: null,
       };
     }
 
-    // Create a GET request for the loaders
-    let loaderRequest = new Request(request.url, {
-      headers: request.headers,
-      redirect: request.redirect,
-      signal: request.signal,
-    });
-    let context = await loadRouteData(loaderRequest, matches, requestContext);
+    let context = await loadRouteData(
+      loaderRequest,
+      matches,
+      requestContext,
+      unstable_dataStrategy,
+      loadRouteIds,
+      skipLoaderErrorBubbling,
+      null
+    );
 
     return {
       ...context,
-      // action status codes take precedence over loader status codes
-      ...(result.statusCode ? { statusCode: result.statusCode } : {}),
       actionData: {
         [actionMatch.route.id]: result.data,
       },
-      actionHeaders: {
-        ...(result.headers ? { [actionMatch.route.id]: result.headers } : {}),
-      },
+      // action status codes take precedence over loader status codes
+      ...(result.statusCode ? { statusCode: result.statusCode } : {}),
+      actionHeaders: result.headers
+        ? { [actionMatch.route.id]: result.headers }
+        : {},
     };
   }
 
@@ -3267,8 +3437,11 @@ export function createStaticHandler(
     request: Request,
     matches: AgnosticDataRouteMatch[],
     requestContext: unknown,
-    routeMatch?: AgnosticDataRouteMatch,
-    pendingActionError?: RouteData
+    unstable_dataStrategy: DataStrategyFunction | null,
+    loadRouteIds: string[] | null,
+    skipLoaderErrorBubbling: boolean,
+    routeMatch: AgnosticDataRouteMatch | null,
+    pendingActionResult?: PendingActionResult
   ): Promise<
     | Omit<
         StaticHandlerContext,
@@ -3293,14 +3466,19 @@ export function createStaticHandler(
 
     let requestMatches = routeMatch
       ? [routeMatch]
-      : getLoaderMatchesUntilBoundary(
-          matches,
-          Object.keys(pendingActionError || {})[0]
-        );
+      : pendingActionResult && isErrorResult(pendingActionResult[1])
+      ? getLoaderMatchesUntilBoundary(matches, pendingActionResult[0])
+      : matches;
     let matchesToLoad = requestMatches.filter(
       (m) => m.route.loader || m.route.lazy
     );
 
+    if (loadRouteIds) {
+      matchesToLoad = matchesToLoad.filter((m) =>
+        loadRouteIds.includes(m.route.id)
+      );
+    }
+
     // Short circuit if we have no loaders to run (query())
     if (matchesToLoad.length === 0) {
       return {
@@ -3310,28 +3488,27 @@ export function createStaticHandler(
           (acc, m) => Object.assign(acc, { [m.route.id]: null }),
           {}
         ),
-        errors: pendingActionError || null,
+        errors:
+          pendingActionResult && isErrorResult(pendingActionResult[1])
+            ? {
+                [pendingActionResult[0]]: pendingActionResult[1].error,
+              }
+            : null,
         statusCode: 200,
         loaderHeaders: {},
         activeDeferreds: null,
       };
     }
 
-    let results = await Promise.all([
-      ...matchesToLoad.map((match) =>
-        callLoaderOrAction(
-          "loader",
-          request,
-          match,
-          matches,
-          manifest,
-          mapRouteProperties,
-          basename,
-          future.v7_relativeSplatPath,
-          { isStaticRequest: true, isRouteRequest, requestContext }
-        )
-      ),
-    ]);
+    let results = await callDataStrategy(
+      "loader",
+      request,
+      matchesToLoad,
+      matches,
+      isRouteRequest,
+      requestContext,
+      unstable_dataStrategy
+    );
 
     if (request.signal.aborted) {
       throwStaticHandlerAbortedError(request, isRouteRequest, future);
@@ -3343,8 +3520,9 @@ export function createStaticHandler(
       matches,
       matchesToLoad,
       results,
-      pendingActionError,
-      activeDeferreds
+      pendingActionResult,
+      activeDeferreds,
+      skipLoaderErrorBubbling
     );
 
     // Add a null for any non-loader matches for proper revalidation on the client
@@ -3367,6 +3545,53 @@ export function createStaticHandler(
     };
   }
 
+  // Utility wrapper for calling dataStrategy server-side without having to
+  // pass around the manifest, mapRouteProperties, etc.
+  async function callDataStrategy(
+    type: "loader" | "action",
+    request: Request,
+    matchesToLoad: AgnosticDataRouteMatch[],
+    matches: AgnosticDataRouteMatch[],
+    isRouteRequest: boolean,
+    requestContext: unknown,
+    unstable_dataStrategy: DataStrategyFunction | null
+  ): Promise<DataResult[]> {
+    let results = await callDataStrategyImpl(
+      unstable_dataStrategy || defaultDataStrategy,
+      type,
+      request,
+      matchesToLoad,
+      matches,
+      manifest,
+      mapRouteProperties,
+      requestContext
+    );
+
+    return await Promise.all(
+      results.map((result, i) => {
+        if (isRedirectHandlerResult(result)) {
+          let response = result.result as Response;
+          // Throw redirects and let the server handle them with an HTTP redirect
+          throw normalizeRelativeRoutingRedirectResponse(
+            response,
+            request,
+            matchesToLoad[i].route.id,
+            matches,
+            basename,
+            future.v7_relativeSplatPath
+          );
+        }
+        if (isResponse(result.result) && isRouteRequest) {
+          // For SSR single-route requests, we want to hand Responses back
+          // directly without unwrapping
+          throw result;
+        }
+
+        return convertHandlerResultToDataResult(result);
+      })
+    );
+  }
+
   return {
     dataRoutes,
     query,
@@ -3643,7 +3868,7 @@ function normalizeNavigateOptions(
 // render so we don't need to load them
 function getLoaderMatchesUntilBoundary(
   matches: AgnosticDataRouteMatch[],
-  boundaryId?: string
+  boundaryId: string
 ) {
   let boundaryMatches = matches;
   if (boundaryId) {
@@ -3662,6 +3887,7 @@ function getMatchesToLoad(
   submission: Submission | undefined,
   location: Location,
   isInitialLoad: boolean,
+  skipActionErrorRevalidation: boolean,
   isRevalidationRequired: boolean,
   cancelledDeferredRoutes: string[],
   cancelledFetcherLoads: string[],
@@ -3670,21 +3896,33 @@ function getMatchesToLoad(
   fetchRedirectIds: Set<string>,
   routesToUse: AgnosticDataRouteObject[],
   basename: string | undefined,
-  pendingActionData?: RouteData,
-  pendingError?: RouteData
+  pendingActionResult?: PendingActionResult
 ): [AgnosticDataRouteMatch[], RevalidatingFetcher[]] {
-  let actionResult = pendingError
-    ? Object.values(pendingError)[0]
-    : pendingActionData
-    ? Object.values(pendingActionData)[0]
+  let actionResult = pendingActionResult
+    ? isErrorResult(pendingActionResult[1])
+      ? pendingActionResult[1].error
+      : pendingActionResult[1].data
     : undefined;
-
   let currentUrl = history.createURL(state.location);
   let nextUrl = history.createURL(location);
 
   // Pick navigation matches that are net-new or qualify for revalidation
-  let boundaryId = pendingError ? Object.keys(pendingError)[0] : undefined;
-  let boundaryMatches = getLoaderMatchesUntilBoundary(matches, boundaryId);
+  let boundaryId =
+    pendingActionResult && isErrorResult(pendingActionResult[1])
+      ? pendingActionResult[0]
+      : undefined;
+  let boundaryMatches = boundaryId
+    ? getLoaderMatchesUntilBoundary(matches, boundaryId)
+    : matches;
+
+  // Don't revalidate loaders by default after action 4xx/5xx responses
+  // when the flag is enabled.  They can still opt-into revalidation via
+  // `shouldRevalidate` via `actionResult`
+  let actionStatus = pendingActionResult
+    ? pendingActionResult[1].statusCode
+    : undefined;
+  let shouldSkipRevalidation =
+    skipActionErrorRevalidation && actionStatus && actionStatus >= 400;
 
   let navigationMatches = boundaryMatches.filter((match, index) => {
     let { route } = match;
@@ -3698,7 +3936,7 @@ function getMatchesToLoad(
     }
 
     if (isInitialLoad) {
-      if (route.loader.hydrate) {
+      if (typeof route.loader !== "function" || route.loader.hydrate) {
         return true;
       }
       return (
@@ -3730,15 +3968,16 @@ function getMatchesToLoad(
       nextParams: nextRouteMatch.params,
       ...submission,
       actionResult,
-      defaultShouldRevalidate:
-        // Forced revalidation due to submission, useRevalidator, or X-Remix-Revalidate
-        isRevalidationRequired ||
-        // Clicked the same link, resubmitted a GET form
-        currentUrl.pathname + currentUrl.search ===
-          nextUrl.pathname + nextUrl.search ||
-        // Search params affect all loaders
-        currentUrl.search !== nextUrl.search ||
-        isNewRouteInstance(currentRouteMatch, nextRouteMatch),
+      unstable_actionStatus: actionStatus,
+      defaultShouldRevalidate: shouldSkipRevalidation
+        ? false
+        : // Forced revalidation due to submission, useRevalidator, or X-Remix-Revalidate
+          isRevalidationRequired ||
+          currentUrl.pathname + currentUrl.search ===
+            nextUrl.pathname + nextUrl.search ||
+          // Search params affect all loaders
+          currentUrl.search !== nextUrl.search ||
+          isNewRouteInstance(currentRouteMatch, nextRouteMatch),
     });
   });
 
@@ -3808,7 +4047,10 @@ function getMatchesToLoad(
         nextParams: matches[matches.length - 1].params,
         ...submission,
         actionResult,
-        defaultShouldRevalidate: isRevalidationRequired,
+        unstable_actionStatus: actionStatus,
+        defaultShouldRevalidate: shouldSkipRevalidation
+          ? false
+          : isRevalidationRequired,
       });
     }
 
@@ -3954,39 +4196,138 @@ async function loadLazyRouteModule(
   });
 }
 
+// Default implementation of `dataStrategy` which fetches all loaders in parallel
+function defaultDataStrategy(
+  opts: DataStrategyFunctionArgs
+): ReturnType<DataStrategyFunction> {
+  return Promise.all(opts.matches.map((m) => m.resolve()));
+}
+
+async function callDataStrategyImpl(
+  dataStrategyImpl: DataStrategyFunction,
+  type: "loader" | "action",
+  request: Request,
+  matchesToLoad: AgnosticDataRouteMatch[],
+  matches: AgnosticDataRouteMatch[],
+  manifest: RouteManifest,
+  mapRouteProperties: MapRoutePropertiesFunction,
+  requestContext?: unknown
+): Promise<HandlerResult[]> {
+  let routeIdsToLoad = matchesToLoad.reduce(
+    (acc, m) => acc.add(m.route.id),
+    new Set<string>()
+  );
+  let loadedMatches = new Set<string>();
+
+  // Send all matches here to allow for a middleware-type implementation.
+  // handler will be a no-op for unneeded routes and we filter those results
+  // back out below.
+  let results = await dataStrategyImpl({
+    matches: matches.map((match) => {
+      let shouldLoad = routeIdsToLoad.has(match.route.id);
+      // `resolve` encapsulates the route.lazy, executing the
+      // loader/action, and mapping return values/thrown errors to a
+      // HandlerResult.  Users can pass a callback to take fine-grained control
+      // over the execution of the loader/action
+      let resolve: DataStrategyMatch["resolve"] = (handlerOverride) => {
+        loadedMatches.add(match.route.id);
+        return shouldLoad
+          ? callLoaderOrAction(
+              type,
+              request,
+              match,
+              manifest,
+              mapRouteProperties,
+              handlerOverride,
+              requestContext
+            )
+          : Promise.resolve({ type: ResultType.data, result: undefined });
+      };
+
+      return {
+        ...match,
+        shouldLoad,
+        resolve,
+      };
+    }),
+    request,
+    params: matches[0].params,
+    context: requestContext,
+  });
+
+  // Throw if any loadRoute implementations not called since they are what
+  // ensures a route is fully loaded
+  matches.forEach((m) =>
+    invariant(
+      loadedMatches.has(m.route.id),
+      `\`match.resolve()\` was not called for route id "${m.route.id}". ` +
+        "You must call `match.resolve()` on every match passed to " +
+        "`dataStrategy` to ensure all routes are properly loaded."
+    )
+  );
+
+  // Filter out any middleware-only matches for which we didn't need to run handlers
+  return results.filter((_, i) => routeIdsToLoad.has(matches[i].route.id));
+}
+
+// Default logic for calling a loader/action is the user has no specified a dataStrategy
 async function callLoaderOrAction(
   type: "loader" | "action",
   request: Request,
   match: AgnosticDataRouteMatch,
-  matches: AgnosticDataRouteMatch[],
   manifest: RouteManifest,
   mapRouteProperties: MapRoutePropertiesFunction,
-  basename: string,
-  v7_relativeSplatPath: boolean,
-  opts: {
-    isStaticRequest?: boolean;
-    isRouteRequest?: boolean;
-    requestContext?: unknown;
-  } = {}
-): Promise<DataResult> {
-  let resultType;
-  let result;
+  handlerOverride: Parameters<DataStrategyMatch["resolve"]>[0],
+  staticContext?: unknown
+): Promise<HandlerResult> {
+  let result: HandlerResult;
   let onReject: (() => void) | undefined;
 
-  let runHandler = (handler: ActionFunction | LoaderFunction) => {
+  let runHandler = (
+    handler: AgnosticRouteObject["loader"] | AgnosticRouteObject["action"]
+  ): Promise<HandlerResult> => {
     // Setup a promise we can race against so that abort signals short circuit
     let reject: () => void;
-    let abortPromise = new Promise((_, r) => (reject = r));
+    // This will never resolve so safe to type it as Promise<HandlerResult> to
+    // satisfy the function return value
+    let abortPromise = new Promise<HandlerResult>((_, r) => (reject = r));
     onReject = () => reject();
     request.signal.addEventListener("abort", onReject);
-    return Promise.race([
-      handler({
-        request,
-        params: match.params,
-        context: opts.requestContext,
-      }),
-      abortPromise,
-    ]);
+
+    let actualHandler = (ctx?: unknown) => {
+      if (typeof handler !== "function") {
+        return Promise.reject(
+          new Error(
+            `You cannot call the handler for a route which defines a boolean ` +
+              `"${type}" [routeId: ${match.route.id}]`
+          )
+        );
+      }
+      return handler(
+        {
+          request,
+          params: match.params,
+          context: staticContext,
+        },
+        ...(ctx !== undefined ? [ctx] : [])
+      );
+    };
+
+    let handlerPromise: Promise<HandlerResult>;
+    if (handlerOverride) {
+      handlerPromise = handlerOverride((ctx: unknown) => actualHandler(ctx));
+    } else {
+      handlerPromise = (async () => {
+        try {
+          let val = await actualHandler();
+          return { type: "data", result: val };
+        } catch (e) {
+          return { type: "error", result: e };
+        }
+      })();
+    }
+
+    return Promise.race([handlerPromise, abortPromise]);
   };
 
   try {
@@ -3996,7 +4337,7 @@ async function callLoaderOrAction(
       if (handler) {
         // Run statically defined handler in parallel with lazy()
         let handlerError;
-        let values = await Promise.all([
+        let [value] = await Promise.all([
           // If the handler throws, don't let it immediately bubble out,
           // since we need to let the lazy() execution finish so we know if this
           // route has a boundary that can handle the error
@@ -4005,17 +4346,17 @@ async function callLoaderOrAction(
           }),
           loadLazyRouteModule(match.route, mapRouteProperties, manifest),
         ]);
-        if (handlerError) {
+        if (handlerError !== undefined) {
           throw handlerError;
         }
-        result = values[0];
+        result = value!;
       } else {
         // Load lazy route module, then run any returned handler
         await loadLazyRouteModule(match.route, mapRouteProperties, manifest);
 
         handler = match.route[type];
         if (handler) {
-          // Handler still run even if we got interrupted to maintain consistency
+          // Handler still runs even if we got interrupted to maintain consistency
           // with un-abortable behavior of handler execution on non-lazy or
           // previously-lazy-loaded routes
           result = await runHandler(handler);
@@ -4030,7 +4371,7 @@ async function callLoaderOrAction(
         } else {
           // lazy() route has no loader to run.  Short circuit here so we don't
           // hit the invariant below that errors on returning undefined.
-          return { type: ResultType.data, data: undefined };
+          return { type: ResultType.data, result: undefined };
         }
       }
     } else if (!handler) {
@@ -4044,85 +4385,31 @@ async function callLoaderOrAction(
     }
 
     invariant(
-      result !== undefined,
+      result.result !== undefined,
       `You defined ${type === "action" ? "an action" : "a loader"} for route ` +
         `"${match.route.id}" but didn't return anything from your \`${type}\` ` +
         `function. Please return a value or \`null\`.`
     );
   } catch (e) {
-    resultType = ResultType.error;
-    result = e;
+    // We should already be catching and converting normal handler executions to
+    // HandlerResults and returning them, so anything that throws here is an
+    // unexpected error we still need to wrap
+    return { type: ResultType.error, result: e };
   } finally {
     if (onReject) {
       request.signal.removeEventListener("abort", onReject);
     }
   }
 
-  if (isResponse(result)) {
-    let status = result.status;
-
-    // Process redirects
-    if (redirectStatusCodes.has(status)) {
-      let location = result.headers.get("Location");
-      invariant(
-        location,
-        "Redirects returned/thrown from loaders/actions must have a Location header"
-      );
-
-      // Support relative routing in internal redirects
-      if (!ABSOLUTE_URL_REGEX.test(location)) {
-        location = normalizeTo(
-          new URL(request.url),
-          matches.slice(0, matches.indexOf(match) + 1),
-          basename,
-          true,
-          location,
-          v7_relativeSplatPath
-        );
-      } else if (!opts.isStaticRequest) {
-        // Strip off the protocol+origin for same-origin + same-basename absolute
-        // redirects. If this is a static request, we can let it go back to the
-        // browser as-is
-        let currentUrl = new URL(request.url);
-        let url = location.startsWith("//")
-          ? new URL(currentUrl.protocol + location)
-          : new URL(location);
-        let isSameBasename = stripBasename(url.pathname, basename) != null;
-        if (url.origin === currentUrl.origin && isSameBasename) {
-          location = url.pathname + url.search + url.hash;
-        }
-      }
-
-      // Don't process redirects in the router during static requests requests.
-      // Instead, throw the Response and let the server handle it with an HTTP
-      // redirect.  We also update the Location header in place in this flow so
-      // basename and relative routing is taken into account
-      if (opts.isStaticRequest) {
-        result.headers.set("Location", location);
-        throw result;
-      }
-
-      return {
-        type: ResultType.redirect,
-        status,
-        location,
-        revalidate: result.headers.get("X-Remix-Revalidate") !== null,
-        reloadDocument: result.headers.get("X-Remix-Reload-Document") !== null,
-      };
-    }
+  return result;
+}
 
-    // For SSR single-route requests, we want to hand Responses back directly
-    // without unwrapping.  We do this with the QueryRouteResponse wrapper
-    // interface so we can know whether it was returned or thrown
-    if (opts.isRouteRequest) {
-      let queryRouteResponse: QueryRouteResponse = {
-        type:
-          resultType === ResultType.error ? ResultType.error : ResultType.data,
-        response: result,
-      };
-      throw queryRouteResponse;
-    }
+async function convertHandlerResultToDataResult(
+  handlerResult: HandlerResult
+): Promise<DataResult> {
+  let { result, type, status } = handlerResult;
 
+  if (isResponse(result)) {
     let data: any;
 
     try {
@@ -4142,10 +4429,11 @@ async function callLoaderOrAction(
       return { type: ResultType.error, error: e };
     }
 
-    if (resultType === ResultType.error) {
+    if (type === ResultType.error) {
       return {
-        type: resultType,
-        error: new ErrorResponseImpl(status, result.statusText, data),
+        type: ResultType.error,
+        error: new ErrorResponseImpl(result.status, result.statusText, data),
+        statusCode: result.status,
         headers: result.headers,
       };
     }
@@ -4158,8 +4446,12 @@ async function callLoaderOrAction(
     };
   }
 
-  if (resultType === ResultType.error) {
-    return { type: resultType, error: result };
+  if (type === ResultType.error) {
+    return {
+      type: ResultType.error,
+      error: result,
+      statusCode: isRouteErrorResponse(result) ? result.status : status,
+    };
   }
 
   if (isDeferredData(result)) {
@@ -4171,7 +4463,60 @@ async function callLoaderOrAction(
     };
   }
 
-  return { type: ResultType.data, data: result };
+  return { type: ResultType.data, data: result, statusCode: status };
+}
+
+// Support relative routing in internal redirects
+function normalizeRelativeRoutingRedirectResponse(
+  response: Response,
+  request: Request,
+  routeId: string,
+  matches: AgnosticDataRouteMatch[],
+  basename: string,
+  v7_relativeSplatPath: boolean
+) {
+  let location = response.headers.get("Location");
+  invariant(
+    location,
+    "Redirects returned/thrown from loaders/actions must have a Location header"
+  );
+
+  if (!ABSOLUTE_URL_REGEX.test(location)) {
+    let trimmedMatches = matches.slice(
+      0,
+      matches.findIndex((m) => m.route.id === routeId) + 1
+    );
+    location = normalizeTo(
+      new URL(request.url),
+      trimmedMatches,
+      basename,
+      true,
+      location,
+      v7_relativeSplatPath
+    );
+    response.headers.set("Location", location);
+  }
+
+  return response;
+}
+
+function normalizeRedirectLocation(
+  location: string,
+  currentUrl: URL,
+  basename: string
+): string {
+  if (ABSOLUTE_URL_REGEX.test(location)) {
+    // Strip off the protocol+origin for same-origin + same-basename absolute redirects
+    let normalizedLocation = location;
+    let url = normalizedLocation.startsWith("//")
+      ? new URL(currentUrl.protocol + normalizedLocation)
+      : new URL(normalizedLocation);
+    let isSameBasename = stripBasename(url.pathname, basename) != null;
+    if (url.origin === currentUrl.origin && isSameBasename) {
+      return url.pathname + url.search + url.hash;
+    }
+  }
+  return location;
 }
 
 // Utility method for creating the Request instances for loaders/actions during
@@ -4239,8 +4584,9 @@ function processRouteLoaderData(
   matches: AgnosticDataRouteMatch[],
   matchesToLoad: AgnosticDataRouteMatch[],
   results: DataResult[],
-  pendingError: RouteData | undefined,
-  activeDeferreds: Map<string, DeferredData>
+  pendingActionResult: PendingActionResult | undefined,
+  activeDeferreds: Map<string, DeferredData>,
+  skipLoaderErrorBubbling: boolean
 ): {
   loaderData: RouterState["loaderData"];
   errors: RouterState["errors"] | null;
@@ -4253,6 +4599,10 @@ function processRouteLoaderData(
   let statusCode: number | undefined;
   let foundError = false;
   let loaderHeaders: Record<string, Headers> = {};
+  let pendingError =
+    pendingActionResult && isErrorResult(pendingActionResult[1])
+      ? pendingActionResult[1].error
+      : undefined;
 
   // Process loader results into state.loaderData/state.errors
   results.forEach((result, index) => {
@@ -4262,23 +4612,27 @@ function processRouteLoaderData(
       "Cannot handle redirect results in processLoaderData"
     );
     if (isErrorResult(result)) {
-      // Look upwards from the matched route for the closest ancestor
-      // error boundary, defaulting to the root match
-      let boundaryMatch = findNearestBoundary(matches, id);
       let error = result.error;
       // If we have a pending action error, we report it at the highest-route
       // that throws a loader error, and then clear it out to indicate that
       // it was consumed
-      if (pendingError) {
-        error = Object.values(pendingError)[0];
+      if (pendingError !== undefined) {
+        error = pendingError;
         pendingError = undefined;
       }
 
       errors = errors || {};
 
-      // Prefer higher error values if lower errors bubble to the same boundary
-      if (errors[boundaryMatch.route.id] == null) {
-        errors[boundaryMatch.route.id] = error;
+      if (skipLoaderErrorBubbling) {
+        errors[id] = error;
+      } else {
+        // Look upwards from the matched route for the closest ancestor error
+        // boundary, defaulting to the root match.  Prefer higher error values
+        // if lower errors bubble to the same boundary
+        let boundaryMatch = findNearestBoundary(matches, id);
+        if (errors[boundaryMatch.route.id] == null) {
+          errors[boundaryMatch.route.id] = error;
+        }
       }
 
       // Clear our any prior loaderData for the throwing route
@@ -4299,21 +4653,28 @@ function processRouteLoaderData(
       if (isDeferredResult(result)) {
         activeDeferreds.set(id, result.deferredData);
         loaderData[id] = result.deferredData.data;
+        // Error status codes always override success status codes, but if all
+        // loaders are successful we take the deepest status code.
+        if (
+          result.statusCode != null &&
+          result.statusCode !== 200 &&
+          !foundError
+        ) {
+          statusCode = result.statusCode;
+        }
+        if (result.headers) {
+          loaderHeaders[id] = result.headers;
+        }
       } else {
         loaderData[id] = result.data;
-      }
-
-      // Error status codes always override success status codes, but if all
-      // loaders are successful we take the deepest status code.
-      if (
-        result.statusCode != null &&
-        result.statusCode !== 200 &&
-        !foundError
-      ) {
-        statusCode = result.statusCode;
-      }
-      if (result.headers) {
-        loaderHeaders[id] = result.headers;
+        // Error status codes always override success status codes, but if all
+        // loaders are successful we take the deepest status code.
+        if (result.statusCode && result.statusCode !== 200 && !foundError) {
+          statusCode = result.statusCode;
+        }
+        if (result.headers) {
+          loaderHeaders[id] = result.headers;
+        }
       }
     }
   });
@@ -4321,9 +4682,9 @@ function processRouteLoaderData(
   // If we didn't consume the pending action error (i.e., all loaders
   // resolved), then consume it here.  Also clear out any loaderData for the
   // throwing route
-  if (pendingError) {
-    errors = pendingError;
-    loaderData[Object.keys(pendingError)[0]] = undefined;
+  if (pendingError !== undefined && pendingActionResult) {
+    errors = { [pendingActionResult[0]]: pendingError };
+    loaderData[pendingActionResult[0]] = undefined;
   }
 
   return {
@@ -4339,7 +4700,7 @@ function processLoaderData(
   matches: AgnosticDataRouteMatch[],
   matchesToLoad: AgnosticDataRouteMatch[],
   results: DataResult[],
-  pendingError: RouteData | undefined,
+  pendingActionResult: PendingActionResult | undefined,
   revalidatingFetchers: RevalidatingFetcher[],
   fetcherResults: DataResult[],
   activeDeferreds: Map<string, DeferredData>
@@ -4351,8 +4712,9 @@ function processLoaderData(
     matches,
     matchesToLoad,
     results,
-    pendingError,
-    activeDeferreds
+    pendingActionResult,
+    activeDeferreds,
+    false // This method is only called client side so we always want to bubble
   );
 
   // Process results from our revalidating fetchers
@@ -4425,6 +4787,24 @@ function mergeLoaderData(
   return mergedLoaderData;
 }
 
+function getActionDataForCommit(
+  pendingActionResult: PendingActionResult | undefined
+) {
+  if (!pendingActionResult) {
+    return {};
+  }
+  return isErrorResult(pendingActionResult[1])
+    ? {
+        // Clear out prior actionData on errors
+        actionData: {},
+      }
+    : {
+        actionData: {
+          [pendingActionResult[0]]: pendingActionResult[1].data,
+        },
+      };
+}
+
 // Find the nearest error boundary, looking upwards from the leaf route (or the
 // route specified by routeId) for the closest ancestor error boundary,
 // defaulting to the root match
@@ -4559,6 +4939,22 @@ function isHashChangeOnly(a: Location, b: Location): boolean {
   return false;
 }
 
+function isHandlerResult(result: unknown): result is HandlerResult {
+  return (
+    result != null &&
+    typeof result === "object" &&
+    "type" in result &&
+    "result" in result &&
+    (result.type === ResultType.data || result.type === ResultType.error)
+  );
+}
+
+function isRedirectHandlerResult(result: HandlerResult) {
+  return (
+    isResponse(result.result) && redirectStatusCodes.has(result.result.status)
+  );
+}
+
 function isDeferredResult(result: DataResult): result is DeferredResult {
   return result.type === ResultType.deferred;
 }
@@ -4603,14 +4999,6 @@ function isRedirectResponse(result: any): result is Response {
   return status >= 300 && status <= 399 && location != null;
 }
 
-function isQueryRouteResponse(obj: any): obj is QueryRouteResponse {
-  return (
-    obj &&
-    isResponse(obj.response) &&
-    (obj.type === ResultType.data || obj.type === ResultType.error)
-  );
-}
-
 function isValidMethod(method: string): method is FormMethod | V7_FormMethod {
   return validRequestMethods.has(method.toLowerCase() as FormMethod);
 }