Streaming in cloudflare workers

[teal mortar]

Yo, im having some problems getting streaming working while using cloudflare workers/wrangler, basically the whole page loads at the same time when the last of the data arrives, my testing route looks like this:

import { defer } from "@remix-run/cloudflare";
import { Await, useLoaderData } from "@remix-run/react";
import { Suspense } from "react";

export const loader = async () => {
  const slowData = new Promise((resolve) =>
    setTimeout(() => resolve("This data loaded after 5 seconds"), 5000)
  );

  const slowerData = new Promise((resolve) =>
    setTimeout(() => resolve("This data loaded after 8 seconds"), 8000)
  );

  return defer({
    fast: "This loaded immediately",
    slow: slowData,
    slower: slowerData,
  });
};

export default function StreamingPage() {
  const { fast, slow, slower } = useLoaderData<typeof loader>();

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Streaming Test</h1>

      <div className="mb-4 p-2 border">
        <h2>Fast Data (Immediate):</h2>
        <p>{fast}</p>
      </div>

      <Suspense fallback={<div className="p-2 border">Loading slow data...</div>}>
        <Await resolve={slow}>
          {(resolvedData) => (
            <div className="mb-4 p-2 border ">
              <h2>Slow Data (5s):</h2>
              <p>{resolvedData}</p>
            </div>
          )}
        </Await>
      </Suspense>

      <Suspense fallback={<div className="p-2 border">Loading slower data...</div>}>
        <Await resolve={slower}>
          {(resolvedData) => (
            <div className="mb-4 p-2 border">
              <h2>Slower Data (8s):</h2>
              <p>{resolvedData}</p>
            </div>
          )}
        </Await>
      </Suspense>
    </div>
  );
}

my wrangler.toml is:

compatibility_flags = [ "nodejs_compat" ]
name = "name"
compatibility_date = "2025-01-01"
main = "./server.ts"
assets = { directory = "./build/client" }

[observability]
enabled = true

1/2

Im building using vite, my vite config is:

export default defineConfig({
  plugins: [
    cloudflareDevProxyVitePlugin({
      getLoadContext,
    }),
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
    process.env.HOST_VITE === 'true' && mkcert(),
  ],
  ssr: {
    resolve: {
      conditions: ["workerd", "worker", "browser"],
    },
  },
  resolve: {
    mainFields: ["browser", "module", "main"],
  },
  build: {
    minify: true,
  },
});

and im using same entry.server file as https://github.com/remix-run/remix/discussions/5363