React16.x中的服务端渲染（SSR）

简要介绍：为了SEO和加快首屏加载速度，React提供了服务端渲染（Server Side Render）。本文结合express，来介绍一下React16.x中的SSR。

本例代码：https://github.com/forthealllight/react16.0-ssr

一、为什么要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结构

（2）SSR实现

下面我们以renderToString为例，通过express来实现一个服务端渲染的例子。

首先node最新版本为8.9.3，还不支持es6语法，同时为了使node支持jsx,我们需要安装babel，本文为了方便，采用了babel-cli。

首先安装babel-cli:

npm install -d babel-cli

接着安装presets:

npm install -d babel-preset-latest babel-preset-stage-0 babel-preset-react

接着我们在script中：

"start":"babel