Use renderToReadableStream vs renderToPipeableStream to support Bun/Deno

[ngmaibulat]

Overview

React SSR API provides:

• renderToPipeableStream
• renderToReadableStream
• renderToStaticMarkup
• renderToString

For streaming/SSR - the first 2 are suitable:

• renderToPipeableStream (NodeJS specific streams)
• renderToReadableStream (Web Standards streams)

See:

• https://react.dev/reference/react-dom/server/renderToPipeableStream
• https://react.dev/reference/react-dom/server/renderToReadableStream

Problem

• react router framework v7 uses nodejs-specific (renderToPipeableStream)
• the server build contains: import { renderToPipeableStream } from "react-dom/server";
• which would not work at bun/deno

Question

• can we switch to using renderToReadableStream ?
• and ditch nodejs-specific renderToPipeableStream ?

[jrestall]

You can already run react-router reveal and customize the entry.server.tsx file to use any SSR API you want.

E.g. renderToReadableStream is used in the Cloudflare template at https://github.com/remix-run/react-router-templates/blob/main/cloudflare/app/entry.server.tsx

[ngmaibulat]

Thank you!

Yes, this works:

import { renderToReadableStream } from "react-dom/server.bun";

But does not work for:

import { renderToReadableStream } from "react-dom/server.node";

• React does not actually export renderToReadableStream!
• React still uses CommonJS
• React docs are not 100% clear on that renderToReadableStream is absent when using NodeJS. As NodeJS does have WebStreams support...

React Docs

This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [renderToPipeableStream](https://react.dev/reference/react-dom/server/renderToPipeableStream) instead.

While the React docs say "renderToReadableStream depends on Web Streams" and that Node.js users should use renderToPipeableStream, they don't explicitly state that renderToReadableStream is completely absent from the server.node entry point.
This can mislead developers who know that Node.js does support Web Streams, starting from NodeJS-18 (experimental, from 16.5)

react-dom/server.node.js

'use strict';

var l, s;
if (process.env.NODE_ENV === 'production') {
  l = require('./cjs/react-dom-server-legacy.node.production.js');
  s = require('./cjs/react-dom-server.node.production.js');
} else {
  l = require('./cjs/react-dom-server-legacy.node.development.js');
  s = require('./cjs/react-dom-server.node.development.js');
}

exports.version = l.version;
exports.renderToString = l.renderToString;
exports.renderToStaticMarkup = l.renderToStaticMarkup;
exports.renderToPipeableStream = s.renderToPipeableStream;
if (s.resumeToPipeableStream) {
  exports.resumeToPipeableStream = s.resumeToPipeableStream;
}

Verdict

• So, to sum up - it is absense of renderToReadableStream in NodeJS which does not allow to make universal code that would support all server-side runtimes without any customizations...
• Can we say above statement is correct?