为什么要服务端渲染
首屏等待
在 SPA 模式下，所有的数据请求和 Dom 渲染都在浏览器端完成，所以当我们第一次访问页面的时候很可能会存在“白屏”等待，而服务端渲染所有数据请求和 html内容已在服务端处理完成，浏览器收到的是完整的 html 内容，可以更快的看到渲染内容，在服务端完成数据请求肯定是要比在浏览器端效率要高的多。
没考虑SEO的感受
有些网站的流量来源主要还是靠搜索引擎，所以网站的 SEO 还是很重要的，而 SPA 模式对搜索引擎不够友好，要想彻底解决这个问题只能采用服务端直出。
SSR + SPA 体验升级
只实现 SSR 其实没啥意义，技术上没有任何发展和进步，否则 SPA 技术就不会出现。
但是单纯的 SPA又不够完美，所以最好的方案就是这两种体验和技术的结合，第一次访问页面是服务端渲染，基于第一次访问后续的交互就是 SPA 的效果和体验，还不影响 SEO 效果，这就有点完美了。
单纯实现 ssr 很简单，毕竟这是传统技术，也不分语言，随便用 php 、jsp、asp、node 等都可以实现。
但是要实现两种技术的结合，同时可以最大限度的重用代码（同构），减少开发维护成本，那就需要采用 react 或者 vue 等前端框架相结合 node(ssr) 来实现。
核心原理
整体来说 react 服务端渲染原理不复杂，其中最核心的内容就是同构。
node server 接收客户端请求，得到当前的 req url path, 然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props 、 context或者 store 形式传入组件，然后基于 react 内置的服务端渲染API renderToString()/ renderToNodeStream() 把组件渲染为 html字符串或者 stream流, 在把最终的 html 进行输出前需要将数据注入到浏览器端(注水)，server 输出(response)后浏览器端可以得到数据(脱水)，浏览器开始进行渲染和节点对比，然后执行组件的 componentDidMount 完成组件内事件绑定和一些交互，浏览器重用了服务端输出的 html节点，整个流程结束。
技术点确实不少，但更多的是架构和工程层面的，需要把各个知识点进行链接和整合。
引出问题
在上面非常简单的就是实现了 react ssr ,把 jsx作为模板引擎，不要小看上面的一小段代码，他可以帮我们引出一系列的问题，这也是完整实现 react ssr 的基石。
- 双端路由如何维护？
首先我们会发现我在 server 端定义了路由 ’/‘，但是在 react SPA 模式下我们需要使用 react-router 来定义路由。那是不是就需要维护两套路由呢？
- 获取数据的方法和逻辑写在哪里？
发现数据获取的 fetch 写的独立的方法，和组件没有任何关联，我们更希望的是每个路由都有自己的 fetch 方法。
- 服务端 html 节点无法重用
虽然组件在服务端得到了数据，也能渲染到浏览器内，但是当浏览器端进行组件渲染的时候直出的内容会一闪而过消失。
好了，问题有了，接下来我们就一步一步的来解决这些问题。
同构才是核心
react ssr 的核心就是同构，没有同构的 ssr 是没有意义的。
所谓同构就是采用一套代码，构建双端（server 和 client）逻辑，最大限度的重用代码，不用维护两套代码。而传统的服务端渲染是无法做到的，react 的出现打破了这个瓶颈，并且现在已经得到了比较广泛的应用。
路由同构
双端使用同一套路由规则， node server 通过 req url path 进行组件的查找(这一步骤也叫路由匹配)，得到需要渲染的组件。
数据同构（预取同构）
数据预取同构，解决双端如何使用同一套数据请求方法来进行数据请求。
先说下流程，在查找到要渲染的组件后，需要预先得到此组件所需要的数据，然后将数据传递给组件后，再进行组件的渲染。
我们可以通过给组件定义静态方法来处理，组件内定义异步数据请求的方法也合情合理，同时声明为静态（static），在 server 端和组件内都也可以直接通过组件（function） 来进行访问。
渲染同构
假设我们现在基于上面已经实现的代码，同时我们也使用 webpack 进行了配置，对代码进行了转换和打包，整个服务可以跑起来。
路由能够正确匹配，数据预取正常，服务端可以直出组件的 html ，浏览器加载 js 代码正常，查看网页源代码能看到 html 内容，好像我们的整个流程已经走完。
但是当浏览器端的 js 执行完成后，发现数据重新请求了，组件的重新渲染导致页面看上去有些闪烁。
这是因为在浏览器端，双端节点对比失败，导致组件重新渲染，也就是只有当服务端和浏览器端渲染的组件具有相同的 props 和 DOM 结构的时候，组件才能只渲染一次。
刚刚我们实现了双端的数据预取同构，但是数据也仅仅是服务端有，浏览器端是没有这个数据，当客户端进行首次组件渲染的时候没有初始化的数据，渲染出的节点肯定和服务端直出的节点不同，导致组件重新渲染。
数据注水
在服务端将预取的数据注入到浏览器，使浏览器端可以访问到，客户端进行渲染前将数据传入对应的组件即可，这样就保证了 props的一致。
数据脱水
上一步数据已经注入到了浏览器端，这一步要在客户端组件渲染前先拿到数据，并且传入组件就可以了。