Generate entry.server with renderToReadableStream when in non-node environment

[kinggoesgaming]

When entry.server is not present in the app directory, react-router plugin adds a default implementation that uses renderToPipeableStream for server side rendering.

When entry.server is present, the react-router plugin instead uses that implementation.

Bun, Browser, Cloudflare Edge, Cloudflare Worker, Deno implementations of react-dom/server support renderToReadableStream. It would nice to support the spec compliant streams.

This specifically came to my attention when I tried using renderToReadableStream in one of my project and it works fine in production bun server. However as the vite dev server uses a node server behind the scenes, renderToReadableStream not being present becomes an issue.

Edit: Bun implementation does not have renderToPipeableStream. I didn't realize it was falling back to node runtime, until I checked.

Here's a sample output of entry.server using renderToReadableStream:

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

export const streamTimeout = 5_000;

export default async function handleRequest(
	request: Request,
	status: number,
	headers: Headers,
	context: EntryContext,
) {
	let shellRendered = false;
	const userAgent = request.headers.get("user-agent");
	const isBot = isbot(userAgent) || context.isSpaMode;

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

				if (shellRendered) {
					console.error(error);
				}
			},
		},
	);

	shellRendered = true;

	if (isBot) {
		await stream.allReady;
	}

	headers.set("Content-Type", "text/html");

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

Related: remix-run/react-router-website#152 (comment)

[kinggoesgaming]

Here's an implementation that checks if renderToReadableStream exists and uses it. If it does not exist, it falls back to renderToPipeableStream:

import { isbot } from "isbot";
import type { RenderToPipeableStreamOptions } from "react-dom/server";
import { ServerRouter, type EntryContext } from "react-router";

export const streamTimeout = 5_000;

export default async function handleRequest(
	request: Request,
	status: number,
	headers: Headers,
	context: EntryContext,
) {
	let shellRendered = false;
	const userAgent = request.headers.get("user-agent");
	const shouldWaitForAllContent = isbot(userAgent) || context.isSpaMode;

	if ("renderToReadableStream" in await import("react-dom/server")) {
		const { renderToReadableStream } = await import("react-dom/server");

		const stream = await renderToReadableStream(
			<ServerRouter context={context} url={request.url} />,
			{
				onError(error) {
					// biome-ignore lint/style/noParameterAssign: this is required for this server to indicate failure
					status = 500;

					if (shellRendered) {
						console.error(error);
					}
				}
			}

		);

		shellRendered = true;		

		if (shouldWaitForAllContent) {
			await stream.allReady;
		}

		headers.set("Content-Type", "text/html");

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

	const { PassThrough } = await import("node:stream");
	const { renderToPipeableStream } = await import("react-dom/server");
	const { createReadableStreamFromReadable } = await import("@react-router/node");
	const readyOption: keyof RenderToPipeableStreamOptions = (userAgent && isbot(userAgent)) || context.isSpaMode ? "onAllReady" : "onShellReady";

	return new Promise<Response>((resolve, reject) => {
		const {pipe, abort} = renderToPipeableStream(
			<ServerRouter context={context} url={request.url} />,
			{
				[readyOption]: () => {
					shellRendered = true;

					const body = new PassThrough();
					const stream = createReadableStreamFromReadable(body);

					headers.set("Content-Type", "text/html");

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

					pipe(body);
				},
				onShellError(error) {
					reject(error);
				},
				onError(error) {
					status = 500;

					if (shellRendered) {
						console.error(error);
					}
				},
			},
		);

		setTimeout(abort, streamTimeout + 1000);
	});
};

I just hacked it together in about 20 minutes, so it could be improved further but this is a good start.