github:https://github.com/Luffyying/SSR-
    参考链接：https://juejin.im/post/5d1fe6be51882579db031a6d#heading-10

    1.what 什么是SSR?
    **

    • Server side render 服务端渲染 （php/jsp）
    • Client side render 客户端渲染
    • Isomorphic render 同构渲染 (next.js/nust.js)

    过往的模板语言和现在前后端分离之间到底发生了什么，请大家自行总结吧，新事物打败了旧事物，拥抱变化。
    下面是基于express构建的一个丑陋的同构框架。记录一下学习心得😼。

    exp1.png

    启动程序后访问localhost:3001就展示了我们写的这个静态页面了，因为res.send直接作为response返回了html，和我们平时接触到的客户端渲染不同点在于，直接由服务器返回一堆html，二者的大致流程如下：
    （此时可以想象一下，从输入url到渲染出页面都发生了什么，😈）

    SSR:浏览器下载HTML文档（页面内容）->生成页面的内容
    CSR:浏览器下载HTML文档（一般就是一个空html,加上js,css）->遇到js下载解析、执行（react,vue代码）->生成页面的内容

    2.why 为什么有SSR?

    • 释放浏览器的压力，解析代码都放在server端，可以改善首屏效果，对恶劣的网络环境和低端机型更加友好，提升用户体验
    • 有利于SEO(爬虫只能爬取html)

    劣势：增加了服务器的TTFB(Time To First Byte)，指的是从浏览器发起请求到接受到第一个字节的时间，且增加了服务器的压力，或者需要占用更多的服务器资源。
    (局部改动也要重新渲染整个页面，故当需要显示大量静态数据的时候，SSR可以考虑的呀)

    3.how 怎么使用？

    前面实现了一个纯静态页面，那如何实现react组件的服务端渲染呢？首先实现一个简单的react组件，且改造下之前的文件：

    reactDom.jsx
    exp2.png

    server/index.js

    exp3.png

    显然这样是不行的，恰好react-dom实现了编译虚拟DOM，react-dom/server,提供了一个方法renderToString，
    （renderToString由react15.x 提供，react16.x提供了2个新的方法，这里）用于将react组件转换为静态html,这样一个简陋的SSR就实现了。

    那么renderToString的原理是什么🤔？自行研究呀！！

    exp9.png

    但是并不是所有的前端工作都可以通过返回一个html来实现的，因为有些功能需要借助浏览器环境才能实现的，renderToString并没有做事件相关的处理的能力，比如生命周期或者点击事件等，从而出现了“同构”的概念。同构的目的是让浏览器和服务器之间达到一种平衡,通过加载js的形式来执行剩下的工作。
    所以用相同的代码，还需要在客户端再次运行一遍，客户端使用ReactDOM.hydrate（）来产生js文件，功能和ReactDOM.render()类似。
    client.js打包后成为chunk.js文件。

    server/index.js

    exp5.png

    client.js

    exp6.png

    正常情况下2个页面的html内容是一样的。如果不一致，会提示警告。

    同构中的路由问题：
    再次修改一下，变成完整的react组件，且加上路由:

    server/index.js

    exp6的副本.png

    Utils.js
    exp7.png

    Client.js

    exp8.png

    至此，路由就加好了。


    同构中添加redux：

    分别在两端添加Provider,创建全局store,然后在单独组件中定义action,reducer。需要注意的是，这是2个store对象，应该保证二者的统一性。（具体参考参考链接）

    exp14.png