fix(rsc): preserve component metadata for client loader revalidation (#15323)

Author: jacob-ebey

integration/rsc/rsc-test.ts

@@ -485,6 +485,11 @@ implementations.forEach((implementation) => {
                       path: "client-route-component-props",
                       lazy: () => import("./routes/client-route-component-props/home"),
                     },
+                    {
+                      id: "client-loader-revalidation",
+                      path: "client-loader-revalidation",
+                      lazy: () => import("./routes/client-loader-revalidation/home"),
+                    },
                     {
                       id: "client-error-boundary-props-client-loader",
                       path: "client-error-boundary-props-client-loader",
@@ -587,6 +592,17 @@ implementations.forEach((implementation) => {
               export default function RootRoute() {
                 return <Outlet />;
               }
+
+              export { shouldRevalidate } from "./root.client";
+            `,
+            "src/routes/root.client.tsx": js`
+              "use client";
+
+              export function shouldRevalidate({ currentUrl, defaultShouldRevalidate }) {
+                return currentUrl.pathname === "/client-loader-revalidation"
+                  ? false
+                  : defaultShouldRevalidate;
+              }
             `,
 
             "src/config/request-context.ts": js`
@@ -1213,6 +1229,36 @@ implementations.forEach((implementation) => {
               }
             `,
 
+            "src/routes/client-loader-revalidation/home.tsx": js`
+              export { default, clientLoader } from "./home.client";
+            `,
+            "src/routes/client-loader-revalidation/home.client.tsx": js`
+              "use client";
+
+              import { useRevalidator } from "react-router";
+
+              let count = 0;
+
+              export async function clientLoader() {
+                return { count: ++count };
+              }
+
+              export default function HomeRoute({ loaderData }) {
+                const revalidator = useRevalidator();
+                return (
+                  <div>
+                    <p data-client-loader-count>{loaderData.count}</p>
+                    <button
+                      data-revalidate
+                      onClick={() => revalidator.revalidate()}
+                    >
+                      Revalidate
+                    </button>
+                  </div>
+                );
+              }
+            `,
+
             "src/routes/client-error-boundary-props-client-loader/home.tsx": js`
               export { default, clientLoader, ErrorBoundary } from "./home.client";
             `,
@@ -2328,6 +2374,32 @@ implementations.forEach((implementation) => {
           validateRSCHtml(await page.content());
         });
 
+        test("Allows client loaders to opt out of server revalidation once their component is rendered", async ({
+          page,
+        }) => {
+          await page.goto(
+            `http://localhost:${port}/client-loader-revalidation`,
+          );
+          await expect(page.locator("[data-client-loader-count]")).toHaveText(
+            "1",
+          );
+
+          const rscRequests: string[] = [];
+          page.on("request", (request) => {
+            const url = new URL(request.url());
+            if (url.pathname.endsWith(".rsc")) {
+              rscRequests.push(url.href);
+            }
+          });
+
+          await page.click("[data-revalidate]");
+          await expect(page.locator("[data-client-loader-count]")).toHaveText(
+            "2",
+          );
+
+          expect(rscRequests).toEqual([]);
+        });
+
         test("Passes props to client ErrorBoundary when error is thrown in client loader", async ({
           page,
         }) => {

packages/react-router/.changes/patch.rsc-client-loader-revalidation.md

@@ -0,0 +1 @@
+Preserve RSC route component metadata so routes with a `clientLoader` can skip unnecessary server requests once their components have rendered while still fetching missing server-rendered elements.

packages/react-router/lib/rsc/browser.tsx

@@ -453,24 +453,26 @@ function createRouterFromPayload({
 
 const renderedRoutesContext = createContext<RSCRouteManifest[]>();
 
+type DataRouteObjectWithManifestInfo = DataRouteObject & {
+  children?: DataRouteObjectWithManifestInfo[];
+  hasLoader: boolean;
+  hasClientLoader: boolean;
+  hasComponent: boolean;
+  hasAction: boolean;
+  hasClientAction: boolean;
+};
+
+type RSCDataRouteMatch = DataRouteMatch & {
+  route: DataRouteObjectWithManifestInfo;
+};
+
 export function getRSCSingleFetchDataStrategy(
   getRouter: () => DataRouter,
   ssr: boolean,
   createFromReadableStream: BrowserCreateFromReadableStreamFunction,
   fetchImplementation: (request: Request) => Promise<Response>,
   clientVersion?: string,
 ): DataStrategyFunction {
-  // TODO: Clean this up with a shared type
-  type RSCDataRouteMatch = DataRouteMatch & {
-    route: DataRouteObject & {
-      hasLoader: boolean;
-      hasClientLoader: boolean;
-      hasComponent: boolean;
-      hasAction: boolean;
-      hasClientAction: boolean;
-    };
-  };
-
   // create map
   let dataStrategy = getSingleFetchDataStrategyImpl(
     getRouter,
@@ -479,9 +481,6 @@ export function getRSCSingleFetchDataStrategy(
       return {
         hasLoader: M.route.hasLoader,
         hasClientLoader: M.route.hasClientLoader,
-        hasComponent: M.route.hasComponent,
-        hasAction: M.route.hasAction,
-        hasClientAction: M.route.hasClientAction,
       };
     },
     // pass map into fetchAndDecode so it can add payloads
@@ -497,7 +496,7 @@ export function getRSCSingleFetchDataStrategy(
     // `serverLoader` or not, otherwise we'll have nothing to render.
     (match) => {
       let M = match as RSCDataRouteMatch;
-      return M.route.hasComponent && !M.route.element;
+      return !M.route.hasComponent || M.route.element != null;
     },
   );
   return async (args) =>
@@ -892,14 +891,6 @@ export function RSCHydratedRouter({
   );
 }
 
-type DataRouteObjectWithManifestInfo = DataRouteObject & {
-  children?: DataRouteObjectWithManifestInfo[];
-  hasLoader: boolean;
-  hasClientLoader: boolean;
-  hasAction: boolean;
-  hasClientAction: boolean;
-};
-
 function createRouteFromServerManifest(
   match: RSCRouteManifest,
   payload?: RSCRenderPayload,
@@ -982,6 +973,7 @@ function createRouteFromServerManifest(
     // have a `loader` we may need to get the `element` implementation
     hasLoader: true,
     hasClientLoader: match.clientLoader != null,
+    hasComponent: match.hasComponent,
     hasAction: match.hasAction,
     hasClientAction: match.clientAction != null,
   };