React 19 added new static server APIs, prerenderToNodeStream
Is there any functional difference in using prerenderToNodeStream
instead of renderToPipeableStream
with onAllReady
?
I understand that the following code is the same functionally:
const { Suspense, createElement, use } = require('react');
const { renderToPipeableStream } = require('react-dom/server');
const { prerenderToNodeStream } = require('react-dom/static');
const express = require('express');
const app = express();
const H1 = ({ children }) => {
const text = use(children);
return createElement('h1', null, text);
};
const App = ({ title, size = 10 }) => {
const promise = new Promise((resolve) => {
setTimeout(resolve, 1000, 'Hello!');
});
return createElement(
'html',
null,
createElement('head', null, createElement('title', null, title)),
createElement(
'body',
null,
Array.from({ length: size }, (_, i) =>
createElement(Suspense, { key: i }, createElement(H1, null, promise)),
),
),
);
};
app.use('/prerender', async (req, res) => {
const { prelude } = await prerenderToNodeStream(
createElement(App, {
title: 'prerenderToNodeStream',
size: req.query.size,
}),
{
bootstrapScripts: ['/main.js'],
},
);
res.setHeader('Content-Type', 'text/html');
prelude.pipe(res);
});
app.use('/render', async (req, res) => {
let pipe;
await new Promise((resolve, reject) => {
({ pipe } = renderToPipeableStream(
createElement(App, {
title: 'renderToPipeableStream',
size: req.query.size,
}),
{
bootstrapScripts: ['/main.js'],
onAllReady: resolve,
onShellError: reject,
},
));
});
res.setHeader('Content-Type', 'text/html');
pipe(res);
});
app.listen(3000, () => {
console.log('App listening on http://localhost:3000/');
});
New contributor
AHCE is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.