feat: server action revalidation opt out via $NO_REVALIDATE field.

Author: jacob-ebey

.changeset/rsc-no-revalidate.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Allow for `<input name="$NO_REVALIDATE" type="hidden" />` to be provided to <form action> and useActionState to allow progressively enhanced calls to opt out of route level revalidation.

integration/rsc/rsc-test.ts

@@ -479,6 +479,11 @@ 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;
@@ -1108,6 +1113,43 @@ 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 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="$NO_REVALIDATE" 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 +1567,23 @@ 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" },
+          );
+
+          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",
+          );
+        });
       });
 
       test.describe("Errors", () => {

packages/react-router/lib/rsc/server.rsc.ts

@@ -518,6 +518,7 @@ async function processServerAction(
       revalidationRequest: Request;
       actionResult?: Promise<unknown>;
       formState?: unknown;
+      revalidate: boolean;
     }
   | Response
   | undefined
@@ -559,9 +560,30 @@ async function processServerAction(
       // The error is propagated to the client through the result promise in the stream
       onError?.(error);
     }
+
+    // We check both the first and second args to cover both <form action> and useActionState.
+    let formData1 =
+      actionArgs &&
+      typeof actionArgs[0] === "object" &&
+      actionArgs[0] instanceof FormData
+        ? actionArgs[0]
+        : null;
+    let formData2 =
+      actionArgs &&
+      typeof actionArgs[1] === "object" &&
+      actionArgs[1] instanceof FormData
+        ? actionArgs[1]
+        : null;
+    let revalidate =
+      (formData1 && formData1.has("$NO_REVALIDATE")) ||
+      (formData2 && formData2.has("$NO_REVALIDATE"))
+        ? false
+        : true;
+
     return {
       actionResult,
       revalidationRequest: getRevalidationRequest(),
+      revalidate,
     };
   } else if (isFormRequest) {
     const formData = await request.clone().formData();
@@ -591,6 +613,7 @@ async function processServerAction(
       return {
         formState,
         revalidationRequest: getRevalidationRequest(),
+        revalidate: true,
       };
     }
   }
@@ -756,6 +779,20 @@ async function generateRenderResponse(
               undefined,
             );
           }
+
+          if (result && result.revalidate === false) {
+            return generateResponse(
+              {
+                headers: new Headers(),
+                statusCode: 200,
+                payload: {
+                  type: "action",
+                  actionResult: Promise.resolve(result.actionResult),
+                },
+              },
+              { temporaryReferences },
+            );
+          }
         }
 
         let staticContext = await query(request);