MENU


.renderToNodeStream()

Switching to streams means that the webpage is displayed simultaneously as it is being loaded. This improves the performance, which is especially important when the download size is big.


RESETRUNFULL
// MyProject/server.jsimport express from "express";import React from "react";import ReactDOMServer from "react-dom/server";import App from "./public/components/App.js";var app = express();app.use(express.static("./dist/public"));app.get('/', (req,res)=>{
   const componentStream = ReactDOMServer.renderToNodeStream(<App msg="hi" />);
   const htmlStart = `
   <!DOCTYPE html><html>
     <head></head>
     <body>
        <div id="root">`;
   res.write(htmlStart);
   componentStream.pipe(res, { end: false });
   const htmlEnd = `</div>
        <script src="/home.js" type="module"></script>
      </body>
   </html>`;
   componentStream.on("end", ()=>{
      res.write(htmlEnd);
      res.end();
   })}); app.listen(4000);console.log('Running an Express server at http://localhost:4000/');

Likewise, if you don't want to render the React-related attributes such as 'data-reactroot', use ReactDOMServer.renderToStaticNodeStream() instead.