Fix prefetched data being downloaded twice

server.ts

@@ -10,6 +10,7 @@ import { compression } from "@remix-run/compression-middleware";
 import { createRequestHandler } from "react-router";
 
 import { withClientAddress } from "./server/client-address.ts";
+import { ignoreAcceptOnDataRequests } from "./server/data-request.ts";
 import { rateLimit } from "./server/rate-limit.ts";
 
 const PORT = Number.parseInt(process.env.PORT || "3000", 10);
@@ -76,9 +77,11 @@ middleware.push(
     cacheControl: "public, max-age=3600, s-maxage=31536000",
   }),
 );
+middleware.push(ignoreAcceptOnDataRequests());
 
 const router = createRouter({
-  defaultHandler: ({ request }) => handleAppRequest(request),
+  defaultHandler: ({ request, headers }) =>
+    handleAppRequest(new Request(request, { headers })),
   middleware,
 });
 

server/data-request.test.ts

@@ -0,0 +1,65 @@
+import { RequestContext } from "@remix-run/fetch-router";
+import { vi } from "vitest";
+
+import { ignoreAcceptOnDataRequests } from "./data-request.ts";
+
+function createContext(pathname: string, method = "GET") {
+  return new RequestContext(
+    new Request(`http://localhost${pathname}`, {
+      method,
+      headers: { Accept: "text/markdown", "X-Test": "kept" },
+    }),
+  );
+}
+
+function createNext(vary: string) {
+  return vi.fn(() =>
+    Promise.resolve(new Response("OK", { headers: { Vary: vary } })),
+  );
+}
+
+async function invoke(context: RequestContext, next: () => Promise<Response>) {
+  let response = await ignoreAcceptOnDataRequests()(context, next);
+  if (!(response instanceof Response)) {
+    throw new Error("Expected middleware to return a response");
+  }
+
+  return response;
+}
+
+describe("ignoreAcceptOnDataRequests", () => {
+  it.each(["/start/framework/routing.data", "/start/framework/routing.rsc"])(
+    "ignores Accept for %s",
+    async (pathname) => {
+      let context = createContext(pathname);
+
+      let response = await invoke(context, createNext("Cookie, Accept"));
+
+      expect(context.headers.has("Accept")).toBe(false);
+      expect(context.headers.get("X-Test")).toBe("kept");
+      expect(response.headers.get("Vary")).toBe("Cookie");
+    },
+  );
+
+  it("removes Vary entirely when Accept was the only value", async () => {
+    let response = await invoke(
+      createContext("/home.data"),
+      createNext("Accept"),
+    );
+
+    expect(response.headers.has("Vary")).toBe(false);
+  });
+
+  it.each([
+    ["document requests", "GET", "/start/framework/routing"],
+    ["Markdown requests", "GET", "/start/framework/routing.md"],
+    ["data mutations", "POST", "/start/framework/routing.data"],
+  ])("leaves %s alone", async (_label, method, pathname) => {
+    let context = createContext(pathname, method);
+
+    let response = await invoke(context, createNext("Cookie, Accept"));
+
+    expect(context.headers.get("Accept")).toBe("text/markdown");
+    expect(response.headers.get("Vary")).toBe("Cookie, Accept");
+  });
+});

server/data-request.ts

@@ -0,0 +1,38 @@
+import type { Middleware } from "@remix-run/fetch-router";
+
+// Data URLs (`.data`, and `.rsc` in RSC mode) are never content-negotiated, so
+// ignore `Accept` and drop it from `Vary`. Otherwise a `<link rel="prefetch">`,
+// which sends a browser `Accept`, can't be reused by the router's `fetch()`,
+// which sends `*/*`, and every prefetched page downloads twice.
+export function ignoreAcceptOnDataRequests(): Middleware {
+  return async (context, next) => {
+    let { pathname } = context.url;
+    let isDataRequest =
+      (context.method === "GET" || context.method === "HEAD") &&
+      (pathname.endsWith(".data") || pathname.endsWith(".rsc"));
+
+    if (!isDataRequest) {
+      return next();
+    }
+
+    context.headers.delete("Accept");
+    let response = await next();
+
+    let headers = new Headers(response.headers);
+    let vary = (headers.get("Vary") ?? "")
+      .split(",")
+      .map((value) => value.trim())
+      .filter((value) => value && value.toLowerCase() !== "accept");
+    if (vary.length > 0) {
+      headers.set("Vary", vary.join(", "));
+    } else {
+      headers.delete("Vary");
+    }
+
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers,
+    });
+  };
+}