From d76d9ed280b7f73cdcc943e1fce3d2b600e5fdde Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Sat, 29 Oct 2022 21:14:52 +0300
Subject: Use `renderToPipeableStream`

---
 vnext/server/middleware/renderer.js | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

(limited to 'vnext')

diff --git a/vnext/server/middleware/renderer.js b/vnext/server/middleware/renderer.js
index 11272f8b..e7ed3337 100644
--- a/vnext/server/middleware/renderer.js
+++ b/vnext/server/middleware/renderer.js
@@ -31,20 +31,24 @@ const serverRenderer = async (req, res, next) => {
             footer: links.join(' ')
         };
 
-        // render the app as a string
-        const html = ReactDOMServer.renderToString(
+        const marker = '<div id="app">';
+        const data = htmlData.split(marker);
+        const propsData = `<script>window.__PROPS__="${Buffer.from(JSON.stringify(props)).toString('base64')}";</script>${marker}`;
+        const { pipe } = ReactDOMServer.renderToPipeableStream(
             <StaticRouter location={req.baseUrl} context={routerContext}>
                 <App {...props} />
             </StaticRouter>
-        );
-
-        // inject the rendered app into our html and send it
-        return res.send(
-            htmlData.replace(
-                '<div id="app"></div>',
-                `<script>window.__PROPS__="${Buffer.from(JSON.stringify(props)).toString('base64')}";</script><div id="app">${html}</div>`
-            )
-        );
+        , {
+            onShellReady() {
+                pipe(res, { end: false });
+            },
+            onAllReady() {
+                res.write(data[1]);
+                res.end();
+            }
+        });
+        res.write(data[0]);
+        res.write(propsData);
     });
 };
 
-- 
cgit v1.2.3