chaney学习React服务端渲染同构系列。

公司项目还是推荐使用next.js，经过多年迭代，打造出React服务端渲染的最佳实践方案。本教程主要是通过从零搭建一个React服务端渲染同构项目，学习React服务端渲染应用需要注意的方方面面。

以下步骤均已分支形式实现

创建最简单的服务端渲染应用，要求

• 创建webpack.server.js配置文件，使webpack能正确打包js模块，对ES6语法，React语法能够识别。
• 编写react组件。
• 通过react-dom/server的renderToString方法将react组件，返回输出字符串给客户端。

第一步输出的服务端渲染demo是静态的，click事件等是没有的。
使用同构来解决这个问题
同构：一套React代码，在服务端执行一次，在客户端再执行一次。
其实就是在浏览器端执行js代码（React组件打包后）。
创建webpack.client.js配置文件，打包输出一份客户端index.js文件。

• 因为在React组件代码已经在服务端运行过一次，所以客户端ReactDOM.render的时候会报以下错：

解决方法：改用ReactDOM.hydtate 即可

• 服务端渲染的节点存在空格会报错，具体如下：

解决方法：去掉渲染模板与输出内容中的空格即可。

使用 react-router4 版本进行路由控制。

客户端和服务端都使用同一份路由配置。

使用StaticRouter 组件，配置location属性。

使用BrowserRouter 组件。

客户端入口和服务端入口都引用redux。

componentDidMount 在服务端是不执行的。

所以需要做异步数据服务端渲染：loadData方法以及路由重构。

在服务端入口通过react-router-config的matchRoutes匹配到相关路由（也就表示能拿到组件的loadData方法），在返回渲染的html前，先获取数据。

通过在返回给前端的渲染模板中的window注入相关数据，同时前端初始store时根据window相关数据给默认值。

使用express-http-proxy 进行proxy代理项目前端的请求转发到真正接口服务器。

更改路由配置，使用react-router-config 的renderRoutes进行多级路由渲染。

对于react-router V4版本：

• react-router  React Router 核心
• react-router-dom  用于 DOM 绑定的 React Router
• react-router-native  用于 React Native 的 React Router
• react-router-redux  React Router 和 Redux 的集成
• react-router-config  用于配置静态路由

处理Node中间层中转项目前端与接口服务器（如java服务器）cookie 。
可在服务端创建axios实例时，根据请求体在headers中写入cookie 。

由于style-loader处理时会使用window全局对象进行一些处理，但在服务端渲染的时候事实上是没有window对象的。
故针对服务端渲染的webpack配置中，使用isomorphic-style-loader来代替style-loader 。

服务端渲染输出时，也需要对style进行处理，可在组件上利用this.props.staticContext 写入css，在服务端中context中获取并写入待返回的渲染模板中。

使用react-helmet 进行搜索引擎优化
搜索引擎展示的标题就是页面的title 
搜索引擎展示的描述就是页面的meta标签的description。

客户端渲染的项目想要提高seo，但又不想采用服务端渲染的流程，就可以尝试使用“预渲染技术”来达到目的
prerender帮助你实现。

预渲染的架构流程如图：