Enable React 18 Streaming in Cloudflare Workers (Or edge runtimes)

[pmbanugo]

Hello 👋

I've been exploring the react streaming and defer feature for a bit, and I got it working but with a different code than what's shown in the documentation. I use the Cloudflare Workers template, which means I had to configure things differently in entry.server.tsx because Workers provide Web Stream API different from what's in Node runtime.

The docs has no mention of using renderToReadableStream when using Edge runtimes but instead, it used comments that tell you to swap out the package name to cloudflare or deno specific ones. For example:

import { Response } from "@remix-run/node"; // or cloudflare/deno

There's no exported type named Response in @remix-run/cloudflare . In the case of import type { EntryContext, Headers } from "@remix-run/cloudflare", there's no exported type named Headers.

I got it working with this code:

import type { EntryContext } from "@remix-run/cloudflare";
import { RemixServer } from "@remix-run/react";
import isbot from "isbot";
import { renderToReadableStream } from "react-dom/server";

const ABORT_DELAY = 5000;

const handleRequest = async (
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) => {
  let didError = false;

  const stream = await renderToReadableStream(
    <RemixServer
      context={remixContext}
      url={request.url}
      abortDelay={ABORT_DELAY}
    />,
    {
      onError: (error: unknown) => {
        didError = true;
        console.error(error);

        // You can also log crash/error report
      },
      signal: AbortSignal.timeout(ABORT_DELAY),
    }
  );

  if (isbot(request.headers.get("user-agent"))) {
    await stream.allReady;
  }

  responseHeaders.set("Content-Type", "text/html");
  return new Response(stream, {
    headers: responseHeaders,
    status: didError ? 500 : responseStatusCode,
  });
};

export default handleRequest;

The slight difference here is the use of renderToReadableStream and using the Headers, Request, and Response types from Workers runtime. Every other code path works the same as what's in the doc.

I want to send a PR to make adjustments to the doc but I was hoping to get a review/discussion here before doing a PR.

Also, I get a weird error when I specify an abort signal/timeout. The error says:

TypeError: Invalid state: Controller is already closed
    at new NodeError (node:internal/errors:393:5)
    at ReadableByteStreamController.close (node:internal/webstreams/readablestream:1098:13)
    at close (/Users/pmbanugo/Documents/code/oss/remix-movies/build/index.js:10013:21)
    at flushCompletedQueues (/Users/pmbanugo/Documents/code/oss/remix-movies/build/index.js:13324:334)
    at abort (/Users/pmbanugo/Documents/code/oss/remix-movies/build/index.js:13351:71)
    at AbortSignal.listener (/Users/pmbanugo/Documents/code/oss/remix-movies/build/index.js:13385:15)
    at AbortSignal.[nodejs.internal.kHybridDispatch] (node:internal/event_target:731:20)
    at AbortSignal.dispatchEvent (node:internal/event_target:673:26)
    at abortSignal (node:internal/abort_controller:292:10)
    at AbortController.abort (node:internal/abort_controller:322:5) {
  code: 'ERR_INVALID_STATE'

It doesn't affect the code execution but logs that error that the framework seems to handle well. It doesn't happen if I remove signal value given to renderToReadableStream (i.e signal: AbortSignal.timeout(ABORT_DELAY) ).

For any page, whether using the defer API or not, this error is thrown even if the response was served in a few milliseconds. However, if I delay the response and it takes more than the AbortSignal's timeout duration, the error seems to be thrown 3 times. By that, I mean that the onError callback gets called 3 times. The first two is the DOMException [AbortError], which I guess is normal. The third one is the TypeError: Invalid state: Controller is already closed error that I mentioned before.

Did anyone encounter such errors or is there something I'm missing in my setup? If this error is normal, I can submit a PR for the docs, if necessary.

You can find a public repo for reproduction at https://github.com/foobaragency/bench-remix-movie-app

Thank you.

[morphsteve]

Note for anyone else trying this out - a compatibility_date of or greater than "2022-11-30" is required in wrangler.toml.

Or add: compatibility_flags = ["streams_enable_constructors"]

[pmbanugo]

That doesn't work either. Here's a public repo of what I'm doing https://github.com/foobaragency/bench-remix-movie-app

[kael]

Thanks for the server setup code.

I had to tweak it to make the server returns a 304 because the Response constructor throws an error if the Response contains a non-null body with a 304 (also added some more headers):

  responseHeaders.set("Content-Type", "text/html");
+ responseHeaders.set("Transfer-Encoding", "chunked");
+ responseHeaders.set("Connection", "keep-alive");
+ if (responseStatusCode === 304)
+   return new Response(null, { status: responseStatusCode })
  return new Response(stream, {
    headers: responseHeaders,
    status: didError ? 500 : responseStatusCode,
  });

[Mr-Ples]

can anyone share their repo with defer working? i cannot get it working and am going insane and desperately need to see a proof of concept

[predaytor]

Everything seems to work fine in my case.

entry.client.tsx:

import { startTransition, StrictMode } from 'react';
import { hydrateRoot } from 'react-dom/client';
import { HydratedRouter } from 'react-router/dom';

startTransition(() => {
	hydrateRoot(
		document,
		<StrictMode>
			<HydratedRouter />
		</StrictMode>,
	);
});

entry.server.tsx:

import { isbot } from 'isbot';
import { renderToReadableStream } from 'react-dom/server';
import type { AppLoadContext, EntryContext } from 'react-router';
import { ServerRouter } from 'react-router';

export default async function handleRequest(
	request: Request,
	status: number,
	headers: Headers,
	routerContext: EntryContext,
	context: AppLoadContext,
) {
	const userAgent = request.headers.get('user-agent');

	const stream = await renderToReadableStream(
		<ServerRouter
			context={routerContext}
			url={request.url}
		/>,
		{
			signal: request.signal,
			onError(error) {
				console.error(error);
				status = 500;
			},
		},
	);

	if (userAgent && isbot(userAgent)) {
		await stream.allReady;
	} else {
		headers.set('Transfer-Encoding', 'chunked');
		headers.set('Connection', 'keep-alive');
	}

	headers.set('Content-Type', 'text/html; charset=utf-8');

	if (status === 304) {
		return new Response(null, { status });
	}

	return new Response(stream, { status, headers });
}