Vue.js既支持服务端渲染（Server side rendering） SSR，也支持客户端渲染（Client side rendering）CSR
接下来学习：CSR和SSR的区别，Vue.js的同构渲染
1、CSR和SSR、同构渲染
服务端渲染流程：
1、用户通过浏览器请求站点
2、服务器请求API获取数据
3、接口返回数据给服务器
4、服务器根据获取的模板和数据拼接出最终的HTML字符串
5、服务器把最后的HTML内容发送给浏览器，浏览器解析内容并渲染
客户端渲染流程：
1、客户端向服务器发送请求，获取包含基本标签的静态页面、和等
2、浏览器解析HTML内容，通过JS渲染基本骨架，结束白屏
3、客户端再通过AJAX技术请求API获取数据，一旦接口返回数据，客户端就会完成动态内容的渲染，呈现完整页面。
同构渲染
同构渲染：同构渲染可以同时兼顾CSR和SSR的优点
Vue.js的同构渲染就是同时使用了这两种渲染模式，在初次渲染时采用SSR，接下来进行激活操作，激活操作完成后，便进入了CSR的渲染方式。
激活操作主要包含以下两部分内容：
Vue.js在当前页面已经渲染的DOM元素以及Vue.js组件所渲染的虚拟DOM之间建立联系
Vue.js从HTML页面中提取由服务端序列化后发送过来的数据用以初始化整个Vue.js应用程序。
激活之后，整个应用程序已经完全被Vue.js接管为CSR应用程序了，后续操作都会按照CSR的流程执行，如果刷新页面，则仍然会进行服务端渲染。
2、将虚拟DOM渲染为HTML字符串
将一个普通标签类型的虚拟节点渲染为HTML字符串，本质上是字符串的拼接。
普通内容拼接时需要注意边界问题：
将字符&转义为实体&
将字符<转义为实体<
将字符>转义为实体>
如果包含属性则还应该添加下面两个转义字符
将字符"转义为实体"
将字符'转义为实体'
3、客户端激活原理
客户端激活：
1、DOM对象与虚拟节点对象之间建立正确的联系
2、将事件正确的绑定到元素上
当组件进行纯客户端渲染时，使用render函数渲染，同构应用则使用hydrate函数进行渲染
hydrate函数的关键点：
1、因为服务端渲染是忽略事件的，浏览器只是渲染了静态的html，所以激活DOM元素的操作之一就是为其添加事件处理程序
2、递归的激活当前元素的子节点，从第一个子节点el.firstChild开始，递归调用hydrateNode函数完成激活
4、编写同构代码
注意：当组件代码在服务端运行时，由于不会对组件进行真正的挂载操作，即不会把虚拟DOM渲染为真实DOM元素，所以，组件的生命周期函数beforeMount与mounted两个钩子不会执行。
定时器在服务端的内存泄露
解决方案：
1.将创建定时器的代码移动到mounted钩子中，即只在客户端执行定时器
2.使用环境变量包裹这段代码，让其不在服务端运行
避免交叉请求引起的状态污染
注意：在服务端渲染时会为每个请求创建一个全新的应用实例
在编写组件代码时，要额外注意组件中出现的全局变量
总结
1、学习了CSR、SSR和同构渲染的工作机制，以及它们各自的优缺点，见上表
2、把虚拟节点渲染为字符串，注意闭合标签的处理
3、客户端激活的原理，激活操作可以总结为两个步骤
4、如何编写同构的组件代码，定时器的处理，生命周期钩子函数的执行，状态污染
