diff options
| -rw-r--r-- | vnext/server/middleware/renderer.js | 26 |
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); }); }; |