使用React / Express开发SSR应用程序时,我试图掌握一般的renderToNodeStream和流。
我有一个很大的页面(未压缩的400kb),使用renderToNodeStream提供了一个非常好的TTFB(到第一个字节的时间),我只想进行一些压缩以使HTML响应变小,但发送回去却很小,但是我无法使其工作renderToNodeStream。
我错过了什么吗?
是否可以流式传输新渲染的响应并压缩它们?
const stream = renderToNodeStream(<MyApp/>)
// this doesn't work
stream.pipe(zlib.createGzip())
stream._flush = zlib.Z_SYNC_FLUSH
stream.pipe(
res,
{ end: "false" }
)
// stream.on("data", data => {
// console.log(data)
// })
stream.on("end", () => {
res.end(pageEnd())
})
答案 0 :(得分:1)
如果您使用express和compression中间件,则可能需要编写
res.setHeader('Content-Type', 'text/html');
在流式传输到客户端之前。
如compression middleware code所示,如果Content-Type
不存在,则中间件将不会压缩内容。
最终代码为:
res.setHeader('Content-Type', 'text/html');
const stream = renderToNodeStream(<MyApp/>)
stream.pipe(
res,
{ end: "false" }
)
stream.on("end", () => {
res.end(pageEnd())
})
答案 1 :(得分:0)
https://reactjs.org/docs/react-dom-server.html#rendertonodestream
renderToNodeStream()返回可读的流。使用此功能,您将汇编一段HTML并将其发送到用户的浏览器,然后重复该过程。
您可能想采用这种方法的原因是为了提高性能,但我不太确定压缩是否是该过程的一部分。