feat: rsc prefetch (#14902)

Author: jacob-ebey

.changeset/slimy-tips-explode.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+rsc Link prefetch

packages/react-router/lib/dom/ssr/components.tsx

@@ -343,6 +343,7 @@ export function Links({ nonce, crossOrigin }: LinksProps): React.JSX.Element {
  * tags
  */
 export function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor) {
+  let rsc = useIsRSCRouterContext();
   let { router } = useDataRouterContext();
   let matches = React.useMemo(
     () => matchRoutes(router.routes, page, router.basename),
@@ -353,6 +354,12 @@ export function PrefetchPageLinks({ page, ...linkProps }: PageLinkDescriptor) {
     return null;
   }
 
+  if (rsc) {
+    return (
+      <RSCPrefetchPageLinksImpl page={page} matches={matches} {...linkProps} />
+    );
+  }
+
   return <PrefetchPageLinksImpl page={page} matches={matches} {...linkProps} />;
 }
 
@@ -382,6 +389,62 @@ function useKeyedPrefetchLinks(matches: DataRouteMatch[]) {
   return keyedPrefetchLinks;
 }
 
+function RSCPrefetchPageLinksImpl({
+  page,
+  matches: nextMatches,
+  ...linkProps
+}: PageLinkDescriptor & {
+  matches: DataRouteMatch[];
+}) {
+  let location = useLocation();
+  let { future } = useFrameworkContext();
+  let { basename } = useDataRouterContext();
+
+  let dataHrefs = React.useMemo(() => {
+    if (page === location.pathname + location.search + location.hash) {
+      // Because we opt-into revalidation, don't compute this for the current page
+      // since it would always trigger a prefetch of the existing loaders
+      return [];
+    }
+    let url = singleFetchUrl(
+      page,
+      basename,
+      future.unstable_trailingSlashAwareDataRequests,
+      "rsc",
+    );
+
+    let hasSomeRoutesWithShouldRevalidate = false;
+    let targetRoutes: string[] = [];
+    for (let match of nextMatches) {
+      if (typeof match.route.shouldRevalidate === "function") {
+        hasSomeRoutesWithShouldRevalidate = true;
+      } else {
+        targetRoutes.push(match.route.id);
+      }
+    }
+
+    if (hasSomeRoutesWithShouldRevalidate && targetRoutes.length > 0) {
+      url.searchParams.set("_routes", targetRoutes.join(","));
+    }
+
+    return [url.pathname + url.search];
+  }, [
+    basename,
+    future.unstable_trailingSlashAwareDataRequests,
+    page,
+    location,
+    nextMatches,
+  ]);
+
+  return (
+    <>
+      {dataHrefs.map((href) => (
+        <link key={href} rel="prefetch" as="fetch" href={href} {...linkProps} />
+      ))}
+    </>
+  );
+}
+
 function PrefetchPageLinksImpl({
   page,
   matches: nextMatches,

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

@@ -559,7 +559,6 @@ async function generateManifestResponse(
       statusCode: 200,
       headers: new Headers({
         "Content-Type": "text/x-component",
-        Vary: "Content-Type",
       }),
       payload,
     },
@@ -977,7 +976,6 @@ function generateRedirectResponse(
   // https://nodejs.org/api/http.html#class-httpclientrequest
   headers.delete("Content-Length");
   headers.set("Content-Type", "text/x-component");
-  headers.set("Vary", "Content-Type");
 
   return generateResponse(
     {

playground/rsc-vite-framework/app/root.tsx

@@ -1,10 +1,31 @@
 import type { Route } from "./+types/root";
 
-import { Meta, Link, Outlet, isRouteErrorResponse } from "react-router";
+import { Meta, Link, Outlet, isRouteErrorResponse, type MiddlewareFunction } from "react-router";
 import "./root.css";
 
+export const middleware: MiddlewareFunction[] = [
+  async ({ request }, next) => {
+    let response = await next();
+
+    if (
+      request.method === "GET" &&
+      response instanceof Response &&
+      response.status === 200 &&
+      request.headers.get("sec-purpose") === "prefetch" &&
+      !response.headers.has("Cache-Control")
+    ) {
+      let cachedResponse = new Response(response.body, response);
+      cachedResponse.headers.set("Cache-Control", "max-age=5");
+      return cachedResponse;
+    }
+    return response;
+  }
+];
+
 export const meta = () => [{ title: "React Router Vite" }];
 
+export const shouldRevalidate = () => false;
+
 export function Layout({ children }: { children: React.ReactNode }) {
   console.log("Layout");
   return (
@@ -23,7 +44,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
                 <Link to="/">Home</Link>
               </li>
               <li>
-                <Link to="/server-loader">Server loader</Link>
+                <Link to="/server-loader" prefetch="intent">Server loader</Link>
               </li>
               <li>
                 <Link to="/client-loader">Client loader</Link>