feat(react-router): server action revalidation opt out via $SKIP_REVALIDATION field. (#14154)

jacob-ebey · web-flow · commit bebb46c5b644 · 2025-08-21T15:40:28.000-07:00
diff --git a/.changeset/cuddly-rockets-obey.md b/.changeset/cuddly-rockets-obey.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+server action revalidation opt out via $SKIP_REVALIDATION field
diff --git a/integration/rsc/rsc-test.ts b/integration/rsc/rsc-test.ts
@@ -1,15 +1,13 @@
-import { test, expect } from "@playwright/test";
+import {
+  test,
+  expect,
+  type Response as PlaywrightResponse,
+} from "@playwright/test";
 import getPort from "get-port";
 
 import { implementations, js, setupRscTest, validateRSCHtml } from "./utils";
 
 implementations.forEach((implementation) => {
-  let stop: () => void;
-
-  test.afterEach(() => {
-    stop?.();
-  });
-
   test.describe(`RSC (${implementation.name})`, () => {
     test.describe("Development", () => {
       let port: number;
@@ -479,11 +477,48 @@ implementations.forEach((implementation) => {
                       path: "hydrate-fallback-props",
                       lazy: () => import("./routes/hydrate-fallback-props/home"),
                     },
+                    {
+                      id: "no-revalidate-server-action",
+                      path: "no-revalidate-server-action",
+                      lazy: () => import("./routes/no-revalidate-server-action/home"),
+                    },
                   ],
                 },
               ] satisfies RSCRouteConfig;
             `,
 
+            "src/routes/root.tsx": js`
+              import { Links, Outlet, ScrollRestoration } from "react-router";
+              
+              export const unstable_middleware = [
+                async (_, next) => {
+                  const response = await next();
+                  return response.headers.set("x-test", "test");
+                }
+              ];
+
+              export function Layout({ children }: { children: React.ReactNode }) {
+                return (
+                  <html lang="en">
+                    <head>
+                      <meta charSet="utf-8" />
+                      <meta name="viewport" content="width=device-width, initial-scale=1" />
+                      <title>Vite (RSC)</title>
+                      <Links />
+                    </head>
+                    <body>
+                      {children}
+                      <ScrollRestoration />
+                    </body>
+                  </html>
+                );
+              }
+
+              export default function RootRoute() {
+                return <Outlet />;
+              }
+            `,
+
             "src/config/request-context.ts": js`
               import { unstable_createContext, unstable_RouterContextProvider } from "react-router";
   
@@ -1108,6 +1143,47 @@ implementations.forEach((implementation) => {
                 );
               }
             `,
+
+            "src/routes/no-revalidate-server-action/home.actions.ts": js`
+              "use server";
+
+              export async function noRevalidateAction() {
+                return "no revalidate";
+              }
+            `,
+            "src/routes/no-revalidate-server-action/home.tsx": js`
+              import ClientHomeRoute from "./home.client";
+
+              export function loader() {
+                console.log("loader");
+              }
+
+              export default function HomeRoute() {
+                return <ClientHomeRoute identity={{}} />;
+              }
+            `,
+            "src/routes/no-revalidate-server-action/home.client.tsx": js`
+              "use client";
+
+              import { useActionState, useState } from "react";
+              import { noRevalidateAction } from "./home.actions";
+
+              export default function HomeRoute({ identity }) {
+                const [initialIdentity] = useState(identity);
+                const [state, action, pending] = useActionState(noRevalidateAction, null);
+                return (
+                  <div>
+                    <form action={action}>
+                      <input name="$SKIP_REVALIDATION" type="hidden" />
+                      <button type="submit" data-submit>No Revalidate</button>
+                    </form>
+                    {state && <div data-state>{state}</div>}
+                    {pending && <div data-pending>Pending</div>}
+                    {initialIdentity !== identity && <div data-revalidated>Revalidated</div>}
+                  </div>
+                );
+              }
+            `,
           },
         });
       });
@@ -1525,6 +1601,36 @@ implementations.forEach((implementation) => {
           // Ensure this is using RSC
           validateRSCHtml(await page.content());
         });
+
+        test("Supports server actions that disable revalidation", async ({
+          page,
+        }) => {
+          await page.goto(
+            `http://localhost:${port}/no-revalidate-server-action`,
+            { waitUntil: "networkidle" },
+          );
+
+          const actionResponsePromise = new Promise<PlaywrightResponse>(
+            (resolve) => {
+              page.on("response", async (response) => {
+                if (!!(await response.request().headerValue("rsc-action-id"))) {
+                  resolve(response);
+                }
+              });
+            },
+          );
+
+          await page.click("[data-submit]");
+          await page.waitForSelector("[data-state]");
+          await page.waitForSelector("[data-pending]", { state: "hidden" });
+          await page.waitForSelector("[data-revalidated]", { state: "hidden" });
+          expect(await page.locator("[data-state]").textContent()).toBe(
+            "no revalidate",
+          );
+
+          const actionResponse = await actionResponsePromise;
+          expect(await actionResponse.headerValue("x-test")).toBe("test");
+        });
       });
 
       test.describe("Errors", () => {
diff --git a/packages/react-router/lib/router/router.ts b/packages/react-router/lib/router/router.ts
@@ -435,7 +435,12 @@ export interface StaticHandler {
       skipRevalidation?: boolean;
       dataStrategy?: DataStrategyFunction<unknown>;
       unstable_generateMiddlewareResponse?: (
-        query: (r: Request) => Promise<StaticHandlerContext | Response>,
+        query: (
+          r: Request,
+          args?: {
+            filterMatchesToLoad?: (match: AgnosticDataRouteMatch) => boolean;
+          },
+        ) => Promise<StaticHandlerContext | Response>,
       ) => MaybePromise<Response>;
     },
   ): Promise<StaticHandlerContext | Response>;
@@ -3649,7 +3654,14 @@ export function createStaticHandler(
           },
           async () => {
             let res = await generateMiddlewareResponse(
-              async (revalidationRequest: Request) => {
+              async (
+                revalidationRequest: Request,
+                opts: {
+                  filterMatchesToLoad?:
+                    | ((match: AgnosticDataRouteMatch) => boolean)
+                    | undefined;
+                } = {},
+              ) => {
                 let result = await queryImpl(
                   revalidationRequest,
                   location,
@@ -3658,7 +3670,9 @@ export function createStaticHandler(
                   dataStrategy || null,
                   skipLoaderErrorBubbling === true,
                   null,
-                  filterMatchesToLoad || null,
+                  "filterMatchesToLoad" in opts
+                    ? (opts.filterMatchesToLoad ?? null)
+                    : null,
                   skipRevalidation === true,
                 );
 
diff --git a/packages/react-router/lib/rsc/server.rsc.ts b/packages/react-router/lib/rsc/server.rsc.ts
@@ -515,6 +515,7 @@ async function processServerAction(
   temporaryReferences: unknown,
 ): Promise<
   | {
+      skipRevalidation: boolean;
       revalidationRequest: Request;
       actionResult?: Promise<unknown>;
       formState?: unknown;
@@ -559,9 +560,21 @@ async function processServerAction(
       // The error is propagated to the client through the result promise in the stream
       onError?.(error);
     }
+
+    let maybeFormData = actionArgs.length === 1 ? actionArgs[0] : actionArgs[1];
+    let formData =
+      maybeFormData &&
+      typeof maybeFormData === "object" &&
+      maybeFormData instanceof FormData
+        ? maybeFormData
+        : null;
+
+    let skipRevalidation = formData?.has("$SKIP_REVALIDATION") ?? false;
+
     return {
       actionResult,
       revalidationRequest: getRevalidationRequest(),
+      skipRevalidation,
     };
   } else if (isFormRequest) {
     const formData = await request.clone().formData();
@@ -591,6 +604,7 @@ async function processServerAction(
       return {
         formState,
         revalidationRequest: getRevalidationRequest(),
+        skipRevalidation: false,
       };
     }
   }
@@ -701,20 +715,25 @@ async function generateRenderResponse(
   const ctx: ServerContext = {
     runningAction: false,
   };
+
   const result = await ServerStorage.run(ctx, () =>
     staticHandler.query(request, {
       requestContext,
       skipLoaderErrorBubbling: isDataRequest,
       skipRevalidation: isSubmission,
       ...(routeIdsToLoad
-        ? { filterMatchesToLoad: (m) => routeIdsToLoad!.includes(m.route.id) }
-        : null),
+        ? {
+            filterMatchesToLoad: (m: AgnosticDataRouteMatch) =>
+              routeIdsToLoad!.includes(m.route.id),
+          }
+        : {}),
       async unstable_generateMiddlewareResponse(query) {
         // If this is an RSC server action, process that and then call query as a
         // revalidation.  If this is a RR Form/Fetcher submission,
         // `processServerAction` will fall through as a no-op and we'll pass the
         // POST `request` to `query` and process our action there.
         let formState: unknown;
+        let skipRevalidation = false;
         if (request.method === "POST") {
           ctx.runningAction = true;
           let result = await processServerAction(
@@ -741,6 +760,7 @@ async function generateRenderResponse(
             );
           }
 
+          skipRevalidation = result?.skipRevalidation ?? false;
           actionResult = result?.actionResult;
           formState = result?.formState;
           request = result?.revalidationRequest ?? request;
@@ -758,7 +778,14 @@ async function generateRenderResponse(
           }
         }
 
-        let staticContext = await query(request);
+        let staticContext = await query(
+          request,
+          skipRevalidation
+            ? {
+                filterMatchesToLoad: () => false,
+              }
+            : undefined,
+        );
 
         if (isResponse(staticContext)) {
           return generateRedirectResponse(
@@ -784,6 +811,7 @@ async function generateRenderResponse(
           formState,
           staticContext,
           temporaryReferences,
+          skipRevalidation,
           ctx.redirect?.headers,
         );
       },
@@ -875,6 +903,7 @@ async function generateStaticContextResponse(
   formState: unknown | undefined,
   staticContext: StaticHandlerContext,
   temporaryReferences: unknown,
+  skipRevalidation: boolean,
   sideEffectRedirectHeaders: Headers | undefined,
 ): Promise<Response> {
   statusCode = staticContext.statusCode ?? statusCode;
@@ -949,7 +978,7 @@ async function generateStaticContextResponse(
     payload = {
       type: "action",
       actionResult,
-      rerender: renderPayloadPromise(),
+      rerender: skipRevalidation ? undefined : renderPayloadPromise(),
     };
   } else if (isSubmission && isDataRequest) {
     // Short circuit without matches on non server-action submissions since

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-router": patch
 +---
++
 +server action revalidation opt out via $SKIP_REVALIDATION field