aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2022-10-29 21:14:52 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:58 +0300
commitd76d9ed280b7f73cdcc943e1fce3d2b600e5fdde (patch)
treeff11bc736075eec2066585b6ea59dc035d68418f
parent1d6708b0f034d3e9fbddc20247a281856350fc6c (diff)
Use `renderToPipeableStream`
-rw-r--r--vnext/server/middleware/renderer.js26
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);
});
};