Change content type on single fetch requests

.changeset/popular-meals-hide.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/server-runtime": patch
+---
+
+Single Fetch: Change content type on `.data` requests to `text/x-script` to allow Cloudflare compression

integration/single-fetch-test.ts

@@ -172,6 +172,7 @@ test.describe("single-fetch", () => {
         data: null,
       },
     });
+    expect(res.headers.get("Content-Type")).toBe("text/x-script");
 
     res = await fixture.requestSingleFetchData("/data.data");
     expect(res.data).toEqual({

packages/remix-react/single-fetch.tsx

@@ -320,11 +320,11 @@ export function singleFetchUrl(reqUrl: URL | string) {
 
 async function fetchAndDecode(url: URL, init: RequestInit) {
   let res = await fetch(url, init);
-  // Don't do a hard check against the header here.  We'll get `text/x-turbo`
+  // Don't do a hard check against the header here.  We'll get `text/x-script`
   // when we have a running server, but if folks want to prerender `.data` files
   // and serve them from a CDN we should let them come back with whatever
   // Content-Type their CDN provides and not force them to make sure `.data`
-  // files are served as `text/x-turbo`.  We'll throw if we can't decode anyway.
+  // files are served as `text/x-script`.  We'll throw if we can't decode anyway.
   invariant(res.body, "No response body to decode");
   try {
     let decoded = await decodeViaTurboStream(res.body, window);

packages/remix-server-runtime/server.ts

@@ -226,7 +226,7 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
             };
           }
           let headers = new Headers(response.headers);
-          headers.set("Content-Type", "text/x-turbo");
+          headers.set("Content-Type", "text/x-script");
 
           return new Response(
             encodeViaTurboStream(
@@ -412,7 +412,12 @@ async function handleSingleFetchRequest(
   // network errors that are missing this header
   let resultHeaders = new Headers(headers);
   resultHeaders.set("X-Remix-Response", "yes");
-  resultHeaders.set("Content-Type", "text/x-turbo");
+
+  // We use a less-descriptive `text/x-script` here instead of something like
+  // `text/x-turbo` to enable compression when deployed via Cloudflare.  See:
+  //  - https://github.com/remix-run/remix/issues/9884
+  //  - https://developers.cloudflare.com/speed/optimization/content/brotli/content-compression/
+  resultHeaders.set("Content-Type", "text/x-script");
 
   // Note: Deferred data is already just Promises, so we don't have to mess
   // `activeDeferreds` or anything :)