From 1b9198dc9e77ee2f37f236cb264270df0ad135e9 Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Wed, 13 Mar 2024 15:37:41 -0400
Subject: [PATCH 1/7] Update single fetch logic when clientLoaders are present

---
 integration/single-fetch-test.ts      | 413 ++++++++++++++++++++++++++
 packages/remix-react/single-fetch.tsx |  62 +++-
 2 files changed, 461 insertions(+), 14 deletions(-)
diff --git a/integration/single-fetch-test.ts b/integration/single-fetch-test.ts
index 650f721d7dd..b0f141227d1 100644
--- a/integration/single-fetch-test.ts
+++ b/integration/single-fetch-test.ts
@@ -30,6 +30,7 @@ const files = {
           <body>
             <Link to="/">Home</Link><br/>
             <Link to="/data">Data</Link><br/>
+            <Link to="/a/b/c">/a/b/c</Link><br/>
             <Form method="post" action="/data">
               <button type="submit" name="key" value="value">
                 Submit
@@ -85,6 +86,17 @@ const files = {
 };
 
 test.describe("single-fetch", () => {
+  let oldConsoleError: typeof console.error;
+
+  test.beforeEach(() => {
+    oldConsoleError = console.error;
+    console.error = () => {};
+  });
+
+  test.afterEach(() => {
+    console.error = oldConsoleError;
+  });
+
   test("loads proper data on single fetch loader requests", async () => {
     let fixture = await createFixture(
       {
@@ -463,4 +475,405 @@ test.describe("single-fetch", () => {
     expect(res.headers.get("x-action-error")).toEqual("true");
     expect(res.headers.get("x-headers-function")).toEqual(null);
   });
+
+  test.describe("client loaders", () => {
+    test("when no routes have client loaders", async ({ page }) => {
+      let fixture = await createFixture(
+        {
+          config: {
+            future: {
+              unstable_singleFetch: true,
+            },
+          },
+          files: {
+            ...files,
+            "app/routes/a.tsx": js`
+          import { Outlet, useLoaderData } from '@remix-run/react';
+
+          export function loader() {
+            return { message: "A server loader" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>A</h1>
+                <p id="a-data">{data.message}</p>
+                <Outlet/>
+              </>
+            );
+          }
+        `,
+            "app/routes/a.b.tsx": js`
+          import { Outlet, useLoaderData } from '@remix-run/react';
+
+          export function loader() {
+            return { message: "B server loader" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>B</h1>
+                <p id="b-data">{data.message}</p>
+                <Outlet/>
+              </>
+            );
+          }
+        `,
+            "app/routes/a.b.c.tsx": js`
+          import { useLoaderData } from '@remix-run/react';
+
+          export function  loader() {
+            return { message: "C server loader" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>C</h1>
+                <p id="c-data">{data.message}</p>
+              </>
+            );
+          }
+        `,
+          },
+        },
+        ServerMode.Development
+      );
+
+      let urls: string[] = [];
+      page.on("request", (req) => {
+        if (req.method() === "GET" && req.url().includes(".data")) {
+          urls.push(req.url());
+        }
+      });
+
+      let appFixture = await createAppFixture(fixture, ServerMode.Development);
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/");
+      await app.clickLink("/a/b/c");
+      await page.waitForSelector("#c-data");
+      expect(await app.getHtml("#a-data")).toContain("A server loader");
+      expect(await app.getHtml("#b-data")).toContain("B server loader");
+      expect(await app.getHtml("#c-data")).toContain("C server loader");
+      expect(urls).toEqual([expect.stringMatching(/\/a\/b\/c.data$/)]);
+    });
+
+    test("when one route has a client loader", async ({ page }) => {
+      let fixture = await createFixture(
+        {
+          config: {
+            future: {
+              unstable_singleFetch: true,
+            },
+          },
+          files: {
+            ...files,
+            "app/routes/a.tsx": js`
+          import { Outlet, useLoaderData } from '@remix-run/react';
+
+          export function loader() {
+            return { message: "A server loader" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>A</h1>
+                <p id="a-data">{data.message}</p>
+                <Outlet/>
+              </>
+            );
+          }
+        `,
+            "app/routes/a.b.tsx": js`
+          import { Outlet, useLoaderData } from '@remix-run/react';
+
+          export function loader() {
+            return { message: "B server loader" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>B</h1>
+                <p id="b-data">{data.message}</p>
+                <Outlet/>
+              </>
+            );
+          }
+        `,
+            "app/routes/a.b.c.tsx": js`
+          import { useLoaderData } from '@remix-run/react';
+
+          export function  loader() {
+            return { message: "C server loader" };
+          }
+
+          export async function clientLoader({ serverLoader }) {
+            let data = await serverLoader();
+            return { message: data.message + " (C client loader)" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>C</h1>
+                <p id="c-data">{data.message}</p>
+              </>
+            );
+          }
+        `,
+          },
+        },
+        ServerMode.Development
+      );
+
+      let urls: string[] = [];
+      page.on("request", (req) => {
+        if (req.method() === "GET" && req.url().includes(".data")) {
+          urls.push(req.url());
+        }
+      });
+
+      let appFixture = await createAppFixture(fixture, ServerMode.Development);
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/");
+      await app.clickLink("/a/b/c");
+      await page.waitForSelector("#c-data");
+      expect(await app.getHtml("#a-data")).toContain("A server loader");
+      expect(await app.getHtml("#b-data")).toContain("B server loader");
+      expect(await app.getHtml("#c-data")).toContain(
+        "C server loader (C client loader)"
+      );
+      expect(urls.sort()).toEqual([
+        expect.stringMatching(
+          /\/a\/b\/c.data\?_routes=routes%2Fa%2Croutes%2Fa.b$/
+        ),
+        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa.b.c$/),
+      ]);
+    });
+
+    test("when multiple routes have client loaders", async ({ page }) => {
+      let fixture = await createFixture(
+        {
+          config: {
+            future: {
+              unstable_singleFetch: true,
+            },
+          },
+          files: {
+            ...files,
+            "app/routes/a.tsx": js`
+          import { Outlet, useLoaderData } from '@remix-run/react';
+
+          export function loader() {
+            return { message: "A server loader" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>A</h1>
+                <p id="a-data">{data.message}</p>
+                <Outlet/>
+              </>
+            );
+          }
+        `,
+            "app/routes/a.b.tsx": js`
+          import { Outlet, useLoaderData } from '@remix-run/react';
+
+          export function loader() {
+            return { message: "B server loader" };
+          }
+
+          export async function clientLoader({ serverLoader }) {
+            let data = await serverLoader();
+            return { message: data.message + " (B client loader)" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>B</h1>
+                <p id="b-data">{data.message}</p>
+                <Outlet/>
+              </>
+            );
+          }
+        `,
+            "app/routes/a.b.c.tsx": js`
+          import { useLoaderData } from '@remix-run/react';
+
+          export function  loader() {
+            return { message: "C server loader" };
+          }
+
+          export async function clientLoader({ serverLoader }) {
+            let data = await serverLoader();
+            return { message: data.message + " (C client loader)" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>C</h1>
+                <p id="c-data">{data.message}</p>
+              </>
+            );
+          }
+        `,
+          },
+        },
+        ServerMode.Development
+      );
+
+      let urls: string[] = [];
+      page.on("request", (req) => {
+        if (req.method() === "GET" && req.url().includes(".data")) {
+          urls.push(req.url());
+        }
+      });
+
+      let appFixture = await createAppFixture(fixture, ServerMode.Development);
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/");
+      await app.clickLink("/a/b/c");
+      await page.waitForSelector("#c-data");
+      expect(await app.getHtml("#a-data")).toContain("A server loader");
+      expect(await app.getHtml("#b-data")).toContain(
+        "B server loader (B client loader)"
+      );
+      expect(await app.getHtml("#c-data")).toContain(
+        "C server loader (C client loader)"
+      );
+      expect(urls.sort()).toEqual([
+        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa$/),
+        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa.b$/),
+        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa.b.c$/),
+      ]);
+    });
+
+    test("when all routes have client loaders", async ({ page }) => {
+      let fixture = await createFixture(
+        {
+          config: {
+            future: {
+              unstable_singleFetch: true,
+            },
+          },
+          files: {
+            ...files,
+            "app/routes/a.tsx": js`
+          import { Outlet, useLoaderData } from '@remix-run/react';
+
+          export function loader() {
+            return { message: "A server loader" };
+          }
+
+          export async function clientLoader({ serverLoader }) {
+            let data = await serverLoader();
+            return { message: data.message + " (A client loader)" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>A</h1>
+                <p id="a-data">{data.message}</p>
+                <Outlet/>
+              </>
+            );
+          }
+        `,
+            "app/routes/a.b.tsx": js`
+          import { Outlet, useLoaderData } from '@remix-run/react';
+
+          export function loader() {
+            return { message: "B server loader" };
+          }
+
+          export async function clientLoader({ serverLoader }) {
+            let data = await serverLoader();
+            return { message: data.message + " (B client loader)" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>B</h1>
+                <p id="b-data">{data.message}</p>
+                <Outlet/>
+              </>
+            );
+          }
+        `,
+            "app/routes/a.b.c.tsx": js`
+          import { useLoaderData } from '@remix-run/react';
+
+          export function  loader() {
+            return { message: "C server loader" };
+          }
+
+          export async function clientLoader({ serverLoader }) {
+            let data = await serverLoader();
+            return { message: data.message + " (C client loader)" };
+          }
+
+          export default function Comp() {
+            let data = useLoaderData();
+            return (
+              <>
+                <h1>C</h1>
+                <p id="c-data">{data.message}</p>
+              </>
+            );
+          }
+        `,
+          },
+        },
+        ServerMode.Development
+      );
+
+      let urls: string[] = [];
+      page.on("request", (req) => {
+        if (req.method() === "GET" && req.url().includes(".data")) {
+          urls.push(req.url());
+        }
+      });
+
+      let appFixture = await createAppFixture(fixture, ServerMode.Development);
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/");
+      await app.clickLink("/a/b/c");
+      await page.waitForSelector("#c-data");
+      expect(await app.getHtml("#a-data")).toContain(
+        "A server loader (A client loader)"
+      );
+      expect(await app.getHtml("#b-data")).toContain(
+        "B server loader (B client loader)"
+      );
+      expect(await app.getHtml("#c-data")).toContain(
+        "C server loader (C client loader)"
+      );
+      expect(urls.sort()).toEqual([
+        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa$/),
+        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa.b$/),
+        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa.b.c$/),
+      ]);
+    });
+  });
 });
diff --git a/packages/remix-react/single-fetch.tsx b/packages/remix-react/single-fetch.tsx
index a016bf190c6..21d93d7e4af 100644
--- a/packages/remix-react/single-fetch.tsx
+++ b/packages/remix-react/single-fetch.tsx
@@ -113,6 +113,9 @@ export function getSingleFetchDataStrategy(
   manifest: AssetsManifest,
   routeModules: RouteModules
 ): DataStrategyFunction {
+  let genRouteIds = (arr: string[]) =>
+    arr.filter((id) => manifest.routes[id].hasLoader).join(",");
+
   return async ({ request, matches }: DataStrategyFunctionArgs) => {
     // This function is the way for a loader/action to "talk" to the server
     let singleFetch: (routeId: string) => Promise<unknown>;
@@ -134,26 +137,57 @@ export function getSingleFetchDataStrategy(
       // 2. if multiple call `serverLoader` only one fetch call is made
       let singleFetchPromise: Promise<SingleFetchResults>;
 
-      let makeSingleFetchCall = async () => {
-        let url = addRevalidationParam(
-          manifest,
-          routeModules,
-          matches.map((m) => m.route),
-          matches.filter((m) => m.shouldLoad).map((m) => m.route),
-          // Single fetch doesn't need/want naked index queries on action
-          // revalidation requests
-          stripIndexParam(singleFetchUrl(request.url))
-        );
-
+      let makeSingleFetchCall = async (url: URL) => {
         let { data } = await fetchAndDecode(url);
         return data as SingleFetchResults;
       };
 
+      let matchesHaveClientLoaders = matches.some(
+        (m) => m.shouldLoad && manifest.routes[m.route.id].hasClientLoader
+      );
+
+      // TODO: Need to fix prefetching to take this logic into account
+
       singleFetch = async (routeId) => {
-        if (!singleFetchPromise) {
-          singleFetchPromise = makeSingleFetchCall();
+        let results: SingleFetchResults;
+        if (manifest.routes[routeId].hasClientLoader) {
+          // When a route has a client loader, we make it's own call for just
+          // it's server loader data
+          let url = stripIndexParam(singleFetchUrl(request.url));
+          url.searchParams.set("_routes", routeId);
+          results = await makeSingleFetchCall(url);
+        } else {
+          // Otherwise we let multiple routes hook onto the same promise
+          if (!singleFetchPromise) {
+            let url = stripIndexParam(singleFetchUrl(request.url));
+            if (matchesHaveClientLoaders) {
+              // If client loaders are present for this navigation, we only want
+              // the "single fetch" call to ask for the routes without clientLoaders
+              let loadIds = genRouteIds(
+                matches
+                  .filter(
+                    (m) =>
+                      m.shouldLoad &&
+                      !manifest.routes[m.route.id].hasClientLoader
+                  )
+                  .map((m) => m.route.id)
+              );
+              url.searchParams.set("_routes", loadIds);
+            } else {
+              // Otherwise we use the "normal" approach and only add the param if
+              // using shouldRevalidate for fine-grained revalidation
+              url = addRevalidationParam(
+                manifest,
+                routeModules,
+                matches.map((m) => m.route),
+                matches.filter((m) => m.shouldLoad).map((m) => m.route),
+                url
+              );
+            }
+            singleFetchPromise = makeSingleFetchCall(url);
+          }
+          results = await singleFetchPromise;
         }
-        let results = await singleFetchPromise;
         let redirect = results[SingleFetchRedirectSymbol];
         if (redirect) {
           return unwrapSingleFetchResult(redirect, routeId);

From 0124bfdb8bb08e27efc7da1be5a6605f7b75f96b Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Mon, 18 Mar 2024 15:34:07 -0400
Subject: [PATCH 2/7] Updates to handle prefetching

---
 .changeset/single-fetch-client-loaders.md |   5 +
 packages/remix-react/components.tsx       |   2 +-
 packages/remix-react/single-fetch.tsx     | 109 +++++++++-------------
 3 files changed, 48 insertions(+), 68 deletions(-)
 create mode 100644 .changeset/single-fetch-client-loaders.md

diff --git a/.changeset/single-fetch-client-loaders.md b/.changeset/single-fetch-client-loaders.md
new file mode 100644
index 00000000000..a4933ed4f5d
--- /dev/null
+++ b/.changeset/single-fetch-client-loaders.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Update single fetch implementation to avoid over-fetching when clientLoader's exist
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 646ea39d435..071f5d33878 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -434,7 +434,7 @@ function PrefetchPageLinksImpl({
     let url = addRevalidationParam(
       manifest,
       routeModules,
-      matches.map((m) => m.route),
+      nextMatches.map((m) => m.route),
       newMatchesForData.map((m) => m.route),
       singleFetchUrl(page)
     );
diff --git a/packages/remix-react/single-fetch.tsx b/packages/remix-react/single-fetch.tsx
index 21d93d7e4af..218347298b0 100644
--- a/packages/remix-react/single-fetch.tsx
+++ b/packages/remix-react/single-fetch.tsx
@@ -137,17 +137,6 @@ export function getSingleFetchDataStrategy(
       // 2. if multiple call `serverLoader` only one fetch call is made
       let singleFetchPromise: Promise<SingleFetchResults>;
 
-      let makeSingleFetchCall = async (url: URL) => {
-        let { data } = await fetchAndDecode(url);
-        return data as SingleFetchResults;
-      };
-
-      let matchesHaveClientLoaders = matches.some(
-        (m) => m.shouldLoad && manifest.routes[m.route.id].hasClientLoader
-      );
-
-      // TODO: Need to fix prefetching to take this logic into account
-
       singleFetch = async (routeId) => {
         let results: SingleFetchResults;
         if (manifest.routes[routeId].hasClientLoader) {
@@ -155,36 +144,21 @@ export function getSingleFetchDataStrategy(
           // it's server loader data
           let url = stripIndexParam(singleFetchUrl(request.url));
           url.searchParams.set("_routes", routeId);
-          results = await makeSingleFetchCall(url);
+          let { data } = await fetchAndDecode(url);
+          results = data as SingleFetchResults;
         } else {
           // Otherwise we let multiple routes hook onto the same promise
           if (!singleFetchPromise) {
-            let url = stripIndexParam(singleFetchUrl(request.url));
-            if (matchesHaveClientLoaders) {
-              // If client loaders are present for this navigation, we only want
-              // the "single fetch" call to ask for the routes without clientLoaders
-              let loadIds = genRouteIds(
-                matches
-                  .filter(
-                    (m) =>
-                      m.shouldLoad &&
-                      !manifest.routes[m.route.id].hasClientLoader
-                  )
-                  .map((m) => m.route.id)
-              );
-              url.searchParams.set("_routes", loadIds);
-            } else {
-              // Otherwise we use the "normal" approach and only add the param if
-              // using shouldRevalidate for fine-grained revalidation
-              url = addRevalidationParam(
-                manifest,
-                routeModules,
-                matches.map((m) => m.route),
-                matches.filter((m) => m.shouldLoad).map((m) => m.route),
-                url
-              );
-            }
-            singleFetchPromise = makeSingleFetchCall(url);
+            let url = addRevalidationParam(
+              manifest,
+              routeModules,
+              matches.map((m) => m.route),
+              matches.filter((m) => m.shouldLoad).map((m) => m.route),
+              stripIndexParam(singleFetchUrl(request.url))
+            );
+            singleFetchPromise = fetchAndDecode(url).then(
+              ({ data }) => data as SingleFetchResults
+            );
           }
           results = await singleFetchPromise;
         }
@@ -232,24 +206,18 @@ function stripIndexParam(url: URL) {
 }
 
 // Determine which routes we want to load so we can add a `?_routes` search param
-// for fine-grained revalidation if necessary.  If a route has not yet been loaded
-// via `route.lazy` then we know we want to load it because it's by definition a
-// net-new route.  If it has been loaded then `shouldLoad` will have taken
-// `shouldRevalidate` into consideration.
+// for fine-grained revalidation if necessary. There's some nuance to this decision:
 //
-// There is a small edge case that _may_ result in a server loader running
-// _somewhat_ unintended, but it's unavoidable:
-// - Assume we have 2 routes, parent and child
-// - Both have `clientLoader`'s and both need to be revalidated
-// - If neither calls `serverLoader`, we won't make the single fetch call
-// - We delay the single fetch call until the **first** one calls `serverLoader`
-// - However, we cannot wait around to know if the other one calls
-//   `serverLoader`, so we include both of them in the `X-Remix-Routes`
-//   header
-// - This means it's technically possible that the second route never calls
-//   `serverLoader` and we never read the response of that route from the
-//   single fetch call, and thus executing that `loader` on the server was
-//   unnecessary.
+//  - The presence of `shouldRevalidate` and `clientLoader` functions are the only
+//    way to trigger fine-grained single fetch loader calls.  without either of
+//    these on the route matches we just always ask for the full `.data` request.
+//  - If any routes have a `shouldRevalidate` or `clientLoader` then we do a
+//    comparison of the routes we matched and the routes we're aiming to load
+//  - If they don't match up, then we add the `_routes` param or fine-grained
+//    loading
+//  - This is used by the single fetch implementation above and by the
+//    `<PrefetchPageLinksImpl>` component so we can prefetch routes using the
+//    same logic
 export function addRevalidationParam(
   manifest: AssetsManifest,
   routeModules: RouteModules,
@@ -260,22 +228,29 @@ export function addRevalidationParam(
   let genRouteIds = (arr: string[]) =>
     arr.filter((id) => manifest.routes[id].hasLoader).join(",");
 
-  // By default, we don't include this param and run all matched loaders on the
-  // server.  If _any_ of our matches include a `shouldRevalidate` function _and_
-  // we've determined that the routes we need to load and the matches are
-  // different, then we send the header since they've opted-into fine-grained
-  // caching.  We look at the `routeModules` here instead of the matches since
-  // HDR adds a wrapper for `shouldRevalidate` even if the route didn't have one
+  // Look at the `routeModules` for `shouldRevalidate` here instead of the manifest
+  // since HDR adds a wrapper for `shouldRevalidate` even if the route didn't have one
   // initially.
   // TODO: We probably can get rid of that wrapper once we're strictly on on
   // single-fetch in v3 and just leverage a needsRevalidation data structure here
   // to determine what to fetch
-  if (matchedRoutes.some((r) => routeModules[r.id]?.shouldRevalidate)) {
-    let matchedIds = genRouteIds(matchedRoutes.map((r) => r.id));
-    let loadIds = genRouteIds(loadRoutes.map((r) => r.id));
-    if (matchedIds !== loadIds) {
-      url.searchParams.set("_routes", loadIds);
-    }
+  let needsParam = matchedRoutes.some(
+    (r) =>
+      routeModules[r.id]?.shouldRevalidate ||
+      manifest.routes[r.id]?.hasClientLoader
+  );
+  if (!needsParam) {
+    return url;
+  }
+
+  let matchedIds = genRouteIds(matchedRoutes.map((r) => r.id));
+  let loadIds = genRouteIds(
+    loadRoutes
+      .filter((r) => !manifest.routes[r.id]?.hasClientLoader)
+      .map((r) => r.id)
+  );
+  if (matchedIds !== loadIds) {
+    url.searchParams.set("_routes", loadIds);
   }
   return url;
 }

From 8f89a03435f2ace3f61e707c046570479e5c3bf8 Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Mon, 18 Mar 2024 16:11:09 -0400
Subject: [PATCH 3/7] Update prefetching for client links

---
 integration/single-fetch-test.ts    | 878 ++++++++++++++++++++--------
 packages/remix-react/components.tsx |  44 +-
 2 files changed, 665 insertions(+), 257 deletions(-)

diff --git a/integration/single-fetch-test.ts b/integration/single-fetch-test.ts
index b0f141227d1..8646069c245 100644
--- a/integration/single-fetch-test.ts
+++ b/integration/single-fetch-test.ts
@@ -488,58 +488,58 @@ test.describe("single-fetch", () => {
           files: {
             ...files,
             "app/routes/a.tsx": js`
-          import { Outlet, useLoaderData } from '@remix-run/react';
-
-          export function loader() {
-            return { message: "A server loader" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>A</h1>
-                <p id="a-data">{data.message}</p>
-                <Outlet/>
-              </>
-            );
-          }
-        `,
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "A server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>A</h1>
+                    <p id="a-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
             "app/routes/a.b.tsx": js`
-          import { Outlet, useLoaderData } from '@remix-run/react';
-
-          export function loader() {
-            return { message: "B server loader" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>B</h1>
-                <p id="b-data">{data.message}</p>
-                <Outlet/>
-              </>
-            );
-          }
-        `,
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "B server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>B</h1>
+                    <p id="b-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
             "app/routes/a.b.c.tsx": js`
-          import { useLoaderData } from '@remix-run/react';
-
-          export function  loader() {
-            return { message: "C server loader" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>C</h1>
-                <p id="c-data">{data.message}</p>
-              </>
-            );
-          }
-        `,
+              import { useLoaderData } from '@remix-run/react';
+
+              export function  loader() {
+                return { message: "C server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>C</h1>
+                    <p id="c-data">{data.message}</p>
+                  </>
+                );
+              }
+            `,
           },
         },
         ServerMode.Development
@@ -560,7 +560,9 @@ test.describe("single-fetch", () => {
       expect(await app.getHtml("#a-data")).toContain("A server loader");
       expect(await app.getHtml("#b-data")).toContain("B server loader");
       expect(await app.getHtml("#c-data")).toContain("C server loader");
-      expect(urls).toEqual([expect.stringMatching(/\/a\/b\/c.data$/)]);
+
+      // No clientLoaders so we can make a single parameter-less fetch
+      expect(urls).toEqual([expect.stringMatching(/\/a\/b\/c\.data$/)]);
     });
 
     test("when one route has a client loader", async ({ page }) => {
@@ -574,63 +576,63 @@ test.describe("single-fetch", () => {
           files: {
             ...files,
             "app/routes/a.tsx": js`
-          import { Outlet, useLoaderData } from '@remix-run/react';
-
-          export function loader() {
-            return { message: "A server loader" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>A</h1>
-                <p id="a-data">{data.message}</p>
-                <Outlet/>
-              </>
-            );
-          }
-        `,
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "A server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>A</h1>
+                    <p id="a-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
             "app/routes/a.b.tsx": js`
-          import { Outlet, useLoaderData } from '@remix-run/react';
-
-          export function loader() {
-            return { message: "B server loader" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>B</h1>
-                <p id="b-data">{data.message}</p>
-                <Outlet/>
-              </>
-            );
-          }
-        `,
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "B server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>B</h1>
+                    <p id="b-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
             "app/routes/a.b.c.tsx": js`
-          import { useLoaderData } from '@remix-run/react';
-
-          export function  loader() {
-            return { message: "C server loader" };
-          }
-
-          export async function clientLoader({ serverLoader }) {
-            let data = await serverLoader();
-            return { message: data.message + " (C client loader)" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>C</h1>
-                <p id="c-data">{data.message}</p>
-              </>
-            );
-          }
-        `,
+              import { useLoaderData } from '@remix-run/react';
+
+              export function  loader() {
+                return { message: "C server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (C client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>C</h1>
+                    <p id="c-data">{data.message}</p>
+                  </>
+                );
+              }
+            `,
           },
         },
         ServerMode.Development
@@ -653,11 +655,13 @@ test.describe("single-fetch", () => {
       expect(await app.getHtml("#c-data")).toContain(
         "C server loader (C client loader)"
       );
+
+      // A/B can be loaded together, C needs it's own call due to it's clientLoader
       expect(urls.sort()).toEqual([
         expect.stringMatching(
-          /\/a\/b\/c.data\?_routes=routes%2Fa%2Croutes%2Fa.b$/
+          /\/a\/b\/c\.data\?_routes=routes%2Fa%2Croutes%2Fa\.b$/
         ),
-        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa.b.c$/),
+        expect.stringMatching(/\/a\/b\/c\.data\?_routes=routes%2Fa\.b\.c$/),
       ]);
     });
 
@@ -672,68 +676,68 @@ test.describe("single-fetch", () => {
           files: {
             ...files,
             "app/routes/a.tsx": js`
-          import { Outlet, useLoaderData } from '@remix-run/react';
-
-          export function loader() {
-            return { message: "A server loader" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>A</h1>
-                <p id="a-data">{data.message}</p>
-                <Outlet/>
-              </>
-            );
-          }
-        `,
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "A server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>A</h1>
+                    <p id="a-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
             "app/routes/a.b.tsx": js`
-          import { Outlet, useLoaderData } from '@remix-run/react';
-
-          export function loader() {
-            return { message: "B server loader" };
-          }
-
-          export async function clientLoader({ serverLoader }) {
-            let data = await serverLoader();
-            return { message: data.message + " (B client loader)" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>B</h1>
-                <p id="b-data">{data.message}</p>
-                <Outlet/>
-              </>
-            );
-          }
-        `,
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "B server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (B client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>B</h1>
+                    <p id="b-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
             "app/routes/a.b.c.tsx": js`
-          import { useLoaderData } from '@remix-run/react';
-
-          export function  loader() {
-            return { message: "C server loader" };
-          }
-
-          export async function clientLoader({ serverLoader }) {
-            let data = await serverLoader();
-            return { message: data.message + " (C client loader)" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>C</h1>
-                <p id="c-data">{data.message}</p>
-              </>
-            );
-          }
-        `,
+              import { useLoaderData } from '@remix-run/react';
+
+              export function  loader() {
+                return { message: "C server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (C client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>C</h1>
+                    <p id="c-data">{data.message}</p>
+                  </>
+                );
+              }
+            `,
           },
         },
         ServerMode.Development
@@ -758,10 +762,13 @@ test.describe("single-fetch", () => {
       expect(await app.getHtml("#c-data")).toContain(
         "C server loader (C client loader)"
       );
+
+      // B/C have client loaders so they get individual calls, which leaves A
+      // getting it's own "individual" since it's the last route standing
       expect(urls.sort()).toEqual([
-        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa$/),
-        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa.b$/),
-        expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa.b.c$/),
+        expect.stringMatching(/\/a\/b\/c\.data\?_routes=routes%2Fa$/),
+        expect.stringMatching(/\/a\/b\/c\.data\?_routes=routes%2Fa\.b$/),
+        expect.stringMatching(/\/a\/b\/c\.data\?_routes=routes%2Fa\.b\.c$/),
       ]);
     });
 
@@ -776,73 +783,73 @@ test.describe("single-fetch", () => {
           files: {
             ...files,
             "app/routes/a.tsx": js`
-          import { Outlet, useLoaderData } from '@remix-run/react';
-
-          export function loader() {
-            return { message: "A server loader" };
-          }
-
-          export async function clientLoader({ serverLoader }) {
-            let data = await serverLoader();
-            return { message: data.message + " (A client loader)" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>A</h1>
-                <p id="a-data">{data.message}</p>
-                <Outlet/>
-              </>
-            );
-          }
-        `,
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "A server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (A client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>A</h1>
+                    <p id="a-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
             "app/routes/a.b.tsx": js`
-          import { Outlet, useLoaderData } from '@remix-run/react';
-
-          export function loader() {
-            return { message: "B server loader" };
-          }
-
-          export async function clientLoader({ serverLoader }) {
-            let data = await serverLoader();
-            return { message: data.message + " (B client loader)" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>B</h1>
-                <p id="b-data">{data.message}</p>
-                <Outlet/>
-              </>
-            );
-          }
-        `,
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "B server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (B client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>B</h1>
+                    <p id="b-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
             "app/routes/a.b.c.tsx": js`
-          import { useLoaderData } from '@remix-run/react';
-
-          export function  loader() {
-            return { message: "C server loader" };
-          }
-
-          export async function clientLoader({ serverLoader }) {
-            let data = await serverLoader();
-            return { message: data.message + " (C client loader)" };
-          }
-
-          export default function Comp() {
-            let data = useLoaderData();
-            return (
-              <>
-                <h1>C</h1>
-                <p id="c-data">{data.message}</p>
-              </>
-            );
-          }
-        `,
+              import { useLoaderData } from '@remix-run/react';
+
+              export function  loader() {
+                return { message: "C server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (C client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>C</h1>
+                    <p id="c-data">{data.message}</p>
+                  </>
+                );
+              }
+            `,
           },
         },
         ServerMode.Development
@@ -869,6 +876,8 @@ test.describe("single-fetch", () => {
       expect(await app.getHtml("#c-data")).toContain(
         "C server loader (C client loader)"
       );
+
+      // A/B/C all have client loaders so they get individual calls
       expect(urls.sort()).toEqual([
         expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa$/),
         expect.stringMatching(/\/a\/b\/c.data\?_routes=routes%2Fa.b$/),
@@ -876,4 +885,401 @@ test.describe("single-fetch", () => {
       ]);
     });
   });
+
+  test.describe("prefetching", () => {
+    test("when no routes have client loaders", async ({ page }) => {
+      let fixture = await createFixture(
+        {
+          config: {
+            future: {
+              unstable_singleFetch: true,
+            },
+          },
+          files: {
+            ...files,
+            "app/routes/_index.tsx": js`
+              import {  Link } from "@remix-run/react";
+
+              export default function Index() {
+                return <Link to="/a/b/c" prefetch="render">/a/b/c</Link>
+              }
+            `,
+            "app/routes/a.tsx": js`
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "A server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>A</h1>
+                    <p id="a-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
+            "app/routes/a.b.tsx": js`
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "B server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>B</h1>
+                    <p id="b-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
+            "app/routes/a.b.c.tsx": js`
+              import { useLoaderData } from '@remix-run/react';
+
+              export function  loader() {
+                return { message: "C server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>C</h1>
+                    <p id="c-data">{data.message}</p>
+                  </>
+                );
+              }
+            `,
+          },
+        },
+        ServerMode.Development
+      );
+
+      let urls: string[] = [];
+      page.on("request", (req) => {
+        if (req.method() === "GET" && req.url().includes(".data")) {
+          urls.push(req.url());
+        }
+      });
+
+      let appFixture = await createAppFixture(fixture, ServerMode.Development);
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/", true);
+      // No clientLoaders so we can make a single parameter-less fetch
+      expect(urls).toEqual([expect.stringMatching(/\/a\/b\/c\.data$/)]);
+    });
+
+    test("when one route has a client loader", async ({ page }) => {
+      let fixture = await createFixture(
+        {
+          config: {
+            future: {
+              unstable_singleFetch: true,
+            },
+          },
+          files: {
+            ...files,
+            "app/routes/_index.tsx": js`
+              import {  Link } from "@remix-run/react";
+
+              export default function Index() {
+                return <Link to="/a/b/c" prefetch="render">/a/b/c</Link>
+              }
+            `,
+            "app/routes/a.tsx": js`
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "A server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>A</h1>
+                    <p id="a-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
+            "app/routes/a.b.tsx": js`
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "B server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>B</h1>
+                    <p id="b-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
+            "app/routes/a.b.c.tsx": js`
+              import { useLoaderData } from '@remix-run/react';
+
+              export function  loader() {
+                return { message: "C server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (C client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>C</h1>
+                    <p id="c-data">{data.message}</p>
+                  </>
+                );
+              }
+            `,
+          },
+        },
+        ServerMode.Development
+      );
+
+      let urls: string[] = [];
+      page.on("request", (req) => {
+        if (req.method() === "GET" && req.url().includes(".data")) {
+          urls.push(req.url());
+        }
+      });
+
+      let appFixture = await createAppFixture(fixture, ServerMode.Development);
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/", true);
+
+      // A/B can be prefetched, C doesn't get prefetched due to its `clientLoader`
+      expect(urls.sort()).toEqual([
+        expect.stringMatching(
+          /\/a\/b\/c\.data\?_routes=routes%2Fa%2Croutes%2Fa\.b$/
+        ),
+      ]);
+    });
+
+    test("when multiple routes have client loaders", async ({ page }) => {
+      let fixture = await createFixture(
+        {
+          config: {
+            future: {
+              unstable_singleFetch: true,
+            },
+          },
+          files: {
+            ...files,
+            "app/routes/_index.tsx": js`
+              import {  Link } from "@remix-run/react";
+
+              export default function Index() {
+                return <Link to="/a/b/c" prefetch="render">/a/b/c</Link>
+              }
+            `,
+            "app/routes/a.tsx": js`
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "A server loader" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>A</h1>
+                    <p id="a-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
+            "app/routes/a.b.tsx": js`
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "B server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (B client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>B</h1>
+                    <p id="b-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
+            "app/routes/a.b.c.tsx": js`
+              import { useLoaderData } from '@remix-run/react';
+
+              export function  loader() {
+                return { message: "C server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (C client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>C</h1>
+                    <p id="c-data">{data.message}</p>
+                  </>
+                );
+              }
+            `,
+          },
+        },
+        ServerMode.Development
+      );
+
+      let urls: string[] = [];
+      page.on("request", (req) => {
+        if (req.method() === "GET" && req.url().includes(".data")) {
+          urls.push(req.url());
+        }
+      });
+
+      let appFixture = await createAppFixture(fixture, ServerMode.Development);
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/", true);
+
+      // Only A can get prefetched, B/C can't due to `clientLoader`
+      expect(urls.sort()).toEqual([
+        expect.stringMatching(/\/a\/b\/c\.data\?_routes=routes%2Fa$/),
+      ]);
+    });
+
+    test("when all routes have client loaders", async ({ page }) => {
+      let fixture = await createFixture(
+        {
+          config: {
+            future: {
+              unstable_singleFetch: true,
+            },
+          },
+          files: {
+            ...files,
+            "app/routes/_index.tsx": js`
+              import {  Link } from "@remix-run/react";
+
+              export default function Index() {
+                return <Link to="/a/b/c" prefetch="render">/a/b/c</Link>
+              }
+            `,
+            "app/routes/a.tsx": js`
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "A server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (A client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>A</h1>
+                    <p id="a-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
+            "app/routes/a.b.tsx": js`
+              import { Outlet, useLoaderData } from '@remix-run/react';
+
+              export function loader() {
+                return { message: "B server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (B client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>B</h1>
+                    <p id="b-data">{data.message}</p>
+                    <Outlet/>
+                  </>
+                );
+              }
+            `,
+            "app/routes/a.b.c.tsx": js`
+              import { useLoaderData } from '@remix-run/react';
+
+              export function  loader() {
+                return { message: "C server loader" };
+              }
+
+              export async function clientLoader({ serverLoader }) {
+                let data = await serverLoader();
+                return { message: data.message + " (C client loader)" };
+              }
+
+              export default function Comp() {
+                let data = useLoaderData();
+                return (
+                  <>
+                    <h1>C</h1>
+                    <p id="c-data">{data.message}</p>
+                  </>
+                );
+              }
+            `,
+          },
+        },
+        ServerMode.Development
+      );
+
+      let urls: string[] = [];
+      page.on("request", (req) => {
+        if (req.method() === "GET" && req.url().includes(".data")) {
+          urls.push(req.url());
+        }
+      });
+
+      let appFixture = await createAppFixture(fixture, ServerMode.Development);
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/", true);
+
+      // No prefetching due to clientLoaders
+      expect(urls.sort()).toEqual([]);
+    });
+  });
 });
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 071f5d33878..390cab12b8d 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -429,8 +429,14 @@ function PrefetchPageLinksImpl({
   // just the manifest like the other links in here.
   let keyedPrefetchLinks = useKeyedPrefetchLinks(newMatchesForAssets);
 
-  let singleFetchHref: string | undefined;
-  if (future.unstable_singleFetch && newMatchesForData.length > 0) {
+  let linksToRender: React.ReactNode | React.ReactNode[] | null = null;
+  if (!future.unstable_singleFetch) {
+    // Non-single-fetch prefetching
+    linksToRender = dataHrefs.map((href) => (
+      <link key={href} rel="prefetch" as="fetch" href={href} {...linkProps} />
+    ));
+  } else if (newMatchesForData.length > 0) {
+    // Single-fetch with routes that require data
     let url = addRevalidationParam(
       manifest,
       routeModules,
@@ -438,30 +444,26 @@ function PrefetchPageLinksImpl({
       newMatchesForData.map((m) => m.route),
       singleFetchUrl(page)
     );
-    singleFetchHref = url.pathname + url.search;
-  }
-
-  return (
-    <>
-      {singleFetchHref ? (
+    if (url.searchParams.get("_routes") !== "") {
+      linksToRender = (
         <link
-          key={singleFetchHref}
+          key={url.pathname + url.search}
           rel="prefetch"
           as="fetch"
-          href={singleFetchHref}
+          href={url.pathname + url.search}
           {...linkProps}
         />
-      ) : (
-        dataHrefs.map((href) => (
-          <link
-            key={href}
-            rel="prefetch"
-            as="fetch"
-            href={href}
-            {...linkProps}
-          />
-        ))
-      )}
+      );
+    } else {
+      // No single-fetch prefetching if _routes param is empty due to `clientLoader`'s
+    }
+  } else {
+    // No single-fetch prefetching if there are no new matches for data
+  }
+
+  return (
+    <>
+      {linksToRender}
       {moduleHrefs.map((href) => (
         <link key={href} rel="modulepreload" href={href} {...linkProps} />
       ))}

From 360375c4d00518e7670c86a7f9f8a20b6ad53003 Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Mon, 18 Mar 2024 16:15:08 -0400
Subject: [PATCH 4/7] Fix lint issue

---
 packages/remix-react/single-fetch.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/remix-react/single-fetch.tsx b/packages/remix-react/single-fetch.tsx
index 218347298b0..756b5bd489b 100644
--- a/packages/remix-react/single-fetch.tsx
+++ b/packages/remix-react/single-fetch.tsx
@@ -113,9 +113,6 @@ export function getSingleFetchDataStrategy(
   manifest: AssetsManifest,
   routeModules: RouteModules
 ): DataStrategyFunction {
-  let genRouteIds = (arr: string[]) =>
-    arr.filter((id) => manifest.routes[id].hasLoader).join(",");
-
   return async ({ request, matches }: DataStrategyFunctionArgs) => {
     // This function is the way for a loader/action to "talk" to the server
     let singleFetch: (routeId: string) => Promise<unknown>;

From 0b4259e3182bf2a040c2b38dc60e740b4d2c7efb Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Tue, 19 Mar 2024 13:09:53 -0400
Subject: [PATCH 5/7] Invert logic to fork inside match.resolve as a POC

---
 packages/remix-react/single-fetch.tsx | 158 +++++++++++++++-----------
 1 file changed, 92 insertions(+), 66 deletions(-)

diff --git a/packages/remix-react/single-fetch.tsx b/packages/remix-react/single-fetch.tsx
index 756b5bd489b..adf8532b62b 100644
--- a/packages/remix-react/single-fetch.tsx
+++ b/packages/remix-react/single-fetch.tsx
@@ -113,77 +113,89 @@ export function getSingleFetchDataStrategy(
   manifest: AssetsManifest,
   routeModules: RouteModules
 ): DataStrategyFunction {
-  return async ({ request, matches }: DataStrategyFunctionArgs) => {
-    // This function is the way for a loader/action to "talk" to the server
-    let singleFetch: (routeId: string) => Promise<unknown>;
-    let actionStatus: number | undefined;
-    if (request.method !== "GET") {
-      // Actions are simple since they're singular - just hit the server
-      singleFetch = async (routeId) => {
-        let url = singleFetchUrl(request.url);
-        let init = await createRequestInit(request);
-        let { data, status } = await fetchAndDecode(url, init);
-        actionStatus = status;
-        return unwrapSingleFetchResult(data as SingleFetchResult, routeId);
-      };
-    } else {
-      // Loaders are trickier since we only want to hit the server once, so we
-      // create a singular promise for all routes to latch onto. This way we can
-      // kick off any existing `clientLoaders` and ensure:
-      // 1. we only call the server if at least one of them calls `serverLoader`
-      // 2. if multiple call `serverLoader` only one fetch call is made
-      let singleFetchPromise: Promise<SingleFetchResults>;
+  return async ({ request, matches }) =>
+    request.method !== "GET"
+      ? singleFetchActionStrategy(request, matches)
+      : singleFetchLoaderStrategy(manifest, routeModules, request, matches);
+}
 
-      singleFetch = async (routeId) => {
-        let results: SingleFetchResults;
-        if (manifest.routes[routeId].hasClientLoader) {
-          // When a route has a client loader, we make it's own call for just
-          // it's server loader data
-          let url = stripIndexParam(singleFetchUrl(request.url));
-          url.searchParams.set("_routes", routeId);
-          let { data } = await fetchAndDecode(url);
-          results = data as SingleFetchResults;
-        } else {
-          // Otherwise we let multiple routes hook onto the same promise
-          if (!singleFetchPromise) {
-            let url = addRevalidationParam(
-              manifest,
-              routeModules,
-              matches.map((m) => m.route),
-              matches.filter((m) => m.shouldLoad).map((m) => m.route),
-              stripIndexParam(singleFetchUrl(request.url))
-            );
-            singleFetchPromise = fetchAndDecode(url).then(
-              ({ data }) => data as SingleFetchResults
+// Actions are simple since they're singular calls to the server
+function singleFetchActionStrategy(
+  request: Request,
+  matches: DataStrategyFunctionArgs["matches"]
+) {
+  return Promise.all(
+    matches.map(async (m) =>
+      m.resolve(async (handler): Promise<HandlerResult> => {
+        let actionStatus: number | undefined;
+        let result = await handler(async () => {
+          let url = singleFetchUrl(request.url);
+          let init = await createRequestInit(request);
+          let { data, status } = await fetchAndDecode(url, init);
+          actionStatus = status;
+          return unwrapSingleFetchResult(data as SingleFetchResult, m.route.id);
+        });
+        return {
+          type: "data",
+          result,
+          status: actionStatus,
+        };
+      })
+    )
+  );
+}
+
+// Loaders are trickier since we only want to hit the server once, so we
+// create a singular promise for all server-loader routes to latch onto.
+function singleFetchLoaderStrategy(
+  manifest: AssetsManifest,
+  routeModules: RouteModules,
+  request: Request,
+  matches: DataStrategyFunctionArgs["matches"]
+) {
+  let singleFetchPromise: Promise<SingleFetchResults>;
+  return Promise.all(
+    matches.map(async (m) =>
+      m.resolve(async (handler): Promise<HandlerResult> => {
+        let result: unknown;
+        // When a route has a client loader, it calls it's singular server loader
+        if (manifest.routes[m.route.id].hasClientLoader) {
+          result = await handler(async () => {
+            let url = stripIndexParam(singleFetchUrl(request.url));
+            url.searchParams.set("_routes", m.route.id);
+            let { data } = await fetchAndDecode(url);
+            return unwrapSingleFetchResults(
+              data as SingleFetchResults,
+              m.route.id
             );
-          }
-          results = await singleFetchPromise;
-        }
-        let redirect = results[SingleFetchRedirectSymbol];
-        if (redirect) {
-          return unwrapSingleFetchResult(redirect, routeId);
+          });
         } else {
-          return results[routeId] !== undefined
-            ? unwrapSingleFetchResult(results[routeId], routeId)
-            : null;
+          result = await handler(async () => {
+            // Otherwise we let multiple routes hook onto the same promise
+            if (!singleFetchPromise) {
+              let url = addRevalidationParam(
+                manifest,
+                routeModules,
+                matches.map((m) => m.route),
+                matches.filter((m) => m.shouldLoad).map((m) => m.route),
+                stripIndexParam(singleFetchUrl(request.url))
+              );
+              singleFetchPromise = fetchAndDecode(url).then(
+                ({ data }) => data as SingleFetchResults
+              );
+            }
+            let results = await singleFetchPromise;
+            return unwrapSingleFetchResults(results, m.route.id);
+          });
         }
-      };
-    }
 
-    // Call the route handlers passing through the `singleFetch` function that will
-    // be called instead of making a server call
-    return Promise.all(
-      matches.map(async (m) =>
-        m.resolve(async (handler): Promise<HandlerResult> => {
-          return {
-            type: "data",
-            result: await handler(() => singleFetch(m.route.id)),
-            status: actionStatus,
-          };
-        })
-      )
-    );
-  };
+        return {
+          type: "data",
+          result,
+        };
+      })
+    )
+  );
 }
 
 function stripIndexParam(url: URL) {
@@ -322,6 +334,20 @@ export function decodeViaTurboStream(
   });
 }
 
+function unwrapSingleFetchResults(
+  results: SingleFetchResults,
+  routeId: string
+) {
+  let redirect = results[SingleFetchRedirectSymbol];
+  if (redirect) {
+    return unwrapSingleFetchResult(redirect, routeId);
+  }
+
+  return results[routeId] !== undefined
+    ? unwrapSingleFetchResult(results[routeId], routeId)
+    : null;
+}
+
 function unwrapSingleFetchResult(result: SingleFetchResult, routeId: string) {
   if ("error" in result) {
     throw result.error;

From 2adc5f01a45bf3b57b469b5013d85b38e48f4271 Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Tue, 19 Mar 2024 13:22:16 -0400
Subject: [PATCH 6/7] Strengthen type

---
 packages/remix-react/single-fetch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/remix-react/single-fetch.tsx b/packages/remix-react/single-fetch.tsx
index adf8532b62b..02206d9bce6 100644
--- a/packages/remix-react/single-fetch.tsx
+++ b/packages/remix-react/single-fetch.tsx
@@ -153,7 +153,7 @@ function singleFetchLoaderStrategy(
   request: Request,
   matches: DataStrategyFunctionArgs["matches"]
 ) {
-  let singleFetchPromise: Promise<SingleFetchResults>;
+  let singleFetchPromise: Promise<SingleFetchResults> | undefined;
   return Promise.all(
     matches.map(async (m) =>
       m.resolve(async (handler): Promise<HandlerResult> => {

From be617613f6c2acceee7c0b76a7ee5ef702d45c9d Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Tue, 19 Mar 2024 13:30:20 -0400
Subject: [PATCH 7/7] Lift loader base url

---
 packages/remix-react/single-fetch.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/remix-react/single-fetch.tsx b/packages/remix-react/single-fetch.tsx
index 02206d9bce6..47d76fb9e6f 100644
--- a/packages/remix-react/single-fetch.tsx
+++ b/packages/remix-react/single-fetch.tsx
@@ -158,10 +158,11 @@ function singleFetchLoaderStrategy(
     matches.map(async (m) =>
       m.resolve(async (handler): Promise<HandlerResult> => {
         let result: unknown;
+        let url = stripIndexParam(singleFetchUrl(request.url));
+
         // When a route has a client loader, it calls it's singular server loader
         if (manifest.routes[m.route.id].hasClientLoader) {
           result = await handler(async () => {
-            let url = stripIndexParam(singleFetchUrl(request.url));
             url.searchParams.set("_routes", m.route.id);
             let { data } = await fetchAndDecode(url);
             return unwrapSingleFetchResults(
@@ -173,12 +174,12 @@ function singleFetchLoaderStrategy(
           result = await handler(async () => {
             // Otherwise we let multiple routes hook onto the same promise
             if (!singleFetchPromise) {
-              let url = addRevalidationParam(
+              url = addRevalidationParam(
                 manifest,
                 routeModules,
                 matches.map((m) => m.route),
                 matches.filter((m) => m.shouldLoad).map((m) => m.route),
-                stripIndexParam(singleFetchUrl(request.url))
+                url
               );
               singleFetchPromise = fetchAndDecode(url).then(
                 ({ data }) => data as SingleFetchResults
