导语： 本文面向没用过服务端渲染以及没了解过的同学。主要介绍了服务端渲染的历史，以及React.js兴起以后的同构渲染，并分别给出了React.js和Vue.js 的SSR(Server Side Render)的同构例子。所有代码在github中给出，可以直接运行。
服务端渲染其实在10多年前Asp, Java就流行了，那个时候都是通过一个后端的模版实现。后来出现了jQuery等库和框架之后，各种动态页面又由后端渲染变成了客户端渲染。2013年React.js的出现后，同构渲染页面的思想慢慢的流行起来。 所谓同构渲染就是相同的组件既可以在服务端中渲染也可以在前端渲染。能满足这个条件的服务端只有node.js。本文主要是讲同构渲染，也叫做node直出。
虽然同构的思想出现了三年多，但前段时间在面试过程中问了不了社招和校招的同学，对这个概念很多同学都不太清楚，或者是实践非常少。原因可能是大家所在公司使用node服务的比较少。没有很好的实践平台。 下面就把这个问题讲清楚吧。
先说几个同构渲染的好处：
1. 首屏性能相比提升非常多。
2. node服务和前端公用一套代码
3. SEO, 对搜索引擎友好
4. 互联网公司面试题常出
没有同构渲染，页面的首屏时间，
用了同构渲染，
对比上面两个图， 可以发现SSR最少省了两次从客户端请求到服务端的时间，一次请求的来回我们叫做RTT时间(Round-Trip Time)，特别是在移动端在3G请求一次RTT时间需要500ms，4G和wifi是100ms。 所以从这里可以看出服务端渲染在首屏时间上有很大的优化。如果在返回的html中内联首屏的Css样式，那么用户发起html的一次请求就可以看到首屏的页面。 是的，只要一个请求。本文并不是专门讲性能优化，所以这里简单总结，通常SSR可以让首屏时间节省大概1.5s到2s。像React.js这种150kb左右（React 16大约106kb）, 也不会影响首屏时间。
这里的dom string就是React.js或者Vue.js提供的方法, 根据数据生成的类似于<div></div>的字符串。 实践起来非常简单，只需要在node服务调用一个方法就可以生成。当然这里需要使用node服务作为中间层，node服务的好处就不在这里说了。
下面就挑React.js和Vue.js作为例子，大家可以直接跳到自己常用的框架看对应的例子即可，
以React为例，node服务中路由收到请求时，利用React提供的renderToString方法对组件IndexPage输出字符串body,
router.use('/index.html', function (req, res, next) {
let body = ReactDOMServer.renderToString(<IndexPage />);
console.log(body);
res.render("page", {
body: body
});
});
indexPage组件如下，
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
hello React SSR!
</div>
);
}
}
export default App;
domString的输出结果是
<div data-reactroot="" data-reactid="1" data-react-
checksum="-1619127114">hello React SSR!</div>
再把domString插入到模版中返回给浏览器就完成node直出了。
完整的代码在这里： https://github.com/blogExample2010/blog/tree/master/ReactSSR
参考Readme.md就可以一步步跑起来。
同样以Vue.js为例， 官方文档 https://ssr.vuejs.org/zh/basic.html，利用vue-server-renderer的renderToString方法生成字符串插入到模版中。
const renderer = require('vue-server-renderer').createRenderer()
router.use('/index.html', function (req, res, next) {
renderer.renderToString(IndexPage, (err, body) => {
if (err) throw err
console.log(body)
res.render("page", {
body: body
});
})
});
body在控制台输出：
<div data-server-rendered="true">Hello Vue SSR!</div>
完整的代码在这里： https://github.com/blogExample2010/blog/tree/master/VueSSR
总结，其实同构渲染一点也不复杂，参考上面的代码相信完全可以把这部分掌握起来。 node直出对提升首屏性能还是非常明显的变化。
网友评论