反应renderToNodeStream和gzip / br / deflate

时间:2019-03-21 08:59:57

标签: reactjs stream gzip ssr

使用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())
})

2 个答案:

答案 0 :(得分:1)

如果您使用expresscompression中间件,则可能需要编写

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并将其发送到用户的浏览器,然后重复该过程。

您可能想采用这种方法的原因是为了提高性能,但我不太确定压缩是否是该过程的一部分。