首先写一个React 16的 remderToNodeStream方法的使用。
// An highlighted block
var foo = 'bar';import express from 'experss';
import React from 'react';
import { renderToNodeStream } from 'react-dom/server';
import App from '../shanred/App';
const app = express();
app.use(express.static("public"));
app.get("*", (req,res) => {
res.write(`
<!DOCTYPE HTML>
<head>
<title>Reacl</title>
<link rel="stylesheet" href"/css/main.css" />
<script src="bundle.js" defer></script>
</head>
`);
res.write("<div id='root'>");
const stream = renderToNodeStream(<App />);
stream.pipe(res, { end: false });
stream.on('end', () => {
res.write("</div></bady></html>");
res.end();
});
});
app.listen(process.env.PORT || 3000, () => {
console.log("Server is listening");
})
上述代码体现了Node.js中流的概念。流的精髓.pipe()方法中有很好的体现，其提供了桥接能力，对数据流的两端进行桥接。
返回流的基础在于React的renderToNodeStream方法返回了一个Readable stream，因此完成了渐进式渲染。为了配合返回一个流，使用res.write方法代替先前的res.send方法来返送响应内容。渐进式渲染对于首屏信息的输入用户体验的提升具有重要意义。
对比常用的renderToString方法，在使用renderToNodeStream的场景下，页面的TTFB时间可以明显缩短。这是因为ttfb时间是服务器响应首字节的时间，采用流的渐进式渲染可以最大限度的缩短服务器响应时间，从而使浏览器更快的接受到信息。
