Node.js
js
import { renderToPipeableStream } from "react-dom/server.node";
import React from "react";
import http from "http";
const App = () => (
<html>
<body>
<h1>Hello World</h1>
<p>This is an example.</p>
</body>
</html>
);
var didError = false;
http
.createServer(function (req, res) {
const stream = renderToPipeableStream(<App />, {
onShellReady() {
res.statusCode = didError ? 500 : 200;
res.setHeader("Content-type", "text/html");
res.setHeader("Cache-Control", "no-transform");
stream.pipe(res);
},
onShellError(error) {
res.statusCode = 500;
res.send(
'<!doctype html><p>Loading...</p><script src="clientrender.js"></script>',
);
},
onAllReady() {
},
onError(err) {
didError = true;
console.error(err);
},
});
})
.listen(3000);
Deno
```js
import { renderToReadableStream } from "https://esm.run/react-dom/server";
import * as React from "https://esm.run/react";
const App = () => (
<html>
<body>
Hello World
This is an example.
</body>
</html>
);
const headers = {
headers: {
"Content-Type": "text/html",
"Cache-Control": "no-transform",
},
};
Deno.serve(
async (req) => {
return new Response(await renderToReadableStream(<App />), headers);
},
{ port: 3000 },
);
```
Bun
```js
import { renderToReadableStream } from "react-dom/server";
const headers = {
headers: {
"Content-Type": "text/html",
},
};
const App = () => (
<html>
<body>
Hello World
This is an example.
</body>
</html>
);
Bun.serve({
port: 3000,
async fetch(req) {
return new Response(await renderToReadableStream(<App />), headers);
},
});
```
