React 服务端渲染

[guoekzhibu]

简要介绍：为了SEO和加快首屏加载速度，React提供了服务端渲染（Server Side Render）。
一、为什么要SSR

单页应用将UI层和内容都由javascript来渲染，搜索引擎或网页爬虫需要完成的HTML结构，因此单页应用如果只在客户端渲染，不利于SEO，此外尽管我们可以通过按需加载的形式来减少首页加载的js，但是通过js来渲染DOM的时候还是会有一定的时间延迟。

因此SSR解决的问题有两个：

SEO

加速首屏加载

在React和Vue等前端框架中，SSR的本质就是由服务端执行渲染，直接将渲染结果以HTML结构的形式返回给客户端。也就是将Virtual DOM转化成字符串的形式返回给客户端。

二、React15.x中的SSR

在React15.x中，有两个方法来处理SSR：

renderToString

renderToStaticMarkup

这两个方法都是在react-dom/server中提供的，用来在服务端将virtual dom渲染成字符串。

（1）相同点

renderToString和renderToStaticMarkup都接受一个参数，这个参数是react的组件，返回一段HTML字符串。

renderToString(react element):string

renderToStaticMarkup(react element):string

此外react-dom中给浏览器端提供了一个render方法，render方法将react组件，添加到真实的DOM节点中。render实现的就是浏览器端渲染。

归类一下：

服务端渲染：renderToString、renderToStaticMarkup——>string
客户端渲染：render——>HTML结构

客户端渲染路线：1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于可以运行，由js代码向后端请求数据( ajax/fetch ) -> 7. 等待后端数据返回 -> 8. react-dom( 客户端 )从无到完整地，把数据渲染为响应页面

服务端渲染路线：2. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染（服务端性能好，较快） -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )

说明：对同一个组件，服务端渲染“可视的”一部分( render/componentWillMount部分代码 )，为确保组件有完善的生命周期及事件处理，客户端需要再次渲染。即：服务端渲染，实际上也是需要客户端进行 再次地、但开销很小的二次渲染。

时间耗时比较：

1. 数据请求：由服务端请求数据而不是客户端请求数据，这是“快”的一个主要原因。服务端在内网进行请求，数据响应速度快。客户端在不同网络环境进行数据请求，且外网http请求开销大，导致时间差（主要原因）。

2. 步骤：服务端是先请求数据然后渲染“可视”部分，而客户端是等待js代码下载、加载完成再请求数据、渲染。即：服务端渲染不用等待js代码下载完成再请求数据，并会返回一个已经有内容的页面。

3. 渲染性能：服务端性能比客户端高，渲染速度快( 猜测，该项数据不详 )。

4. 渲染内容：服务端渲染会把”可视“部分先渲染，然后交给客户端再作部分渲染。而客户端渲染，则是从无到有，需要经历完整的渲染步骤。