什么是同构渲染

首先写一个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(`
        
        
            
            
            
        
    `);
    res.write("
");

    const stream = renderToNodeStream(<App />);
    stream.pipe(res, { end: false }); 
    stream.on('end', () => {
        res.write("
");
        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时间是服务器响应首字节的时间，采用流的渐进式渲染可以最大限度的缩短服务器响应时间，从而使浏览器更快的接受到信息。