Use `renderToPipeableStream`

1 files changed, 15 insertions, 11 deletions

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);
     });
 };