Question

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

Answer 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())
})

Answer 2

https://reactjs.org/docs/react-dom-server.html#rendertonodestream

renderToNodeStream（）返回可读的流。使用此功能，您将汇编一段HTML并将其发送到用户的浏览器，然后重复该过程。

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

反应renderToNodeStream和gzip / br / deflate

2 个答案: