名词解释
客户端渲染(client-side rendering ,CSR)
服务端渲染(server-side rendering, SSR)
同构渲染（morphic /'mɔ:fik/ rendering) 客户端渲染和服务端渲染结合
服务端渲染流程
服务端渲染的工作流程
- 用户通过浏览器请求站点
- 服务器请求API获取数据
- 接口返回数据给服务器
- 服务器根据模版和获取的数据凭借出最终的HTML字符串
- 服务器将HTML字符串发送给浏览器，浏览器解析HTML内容并渲染
传统的服务端渲染的用户体验非常差，任何一个微小的操作都可能导致页面刷新
客户端渲染
与SSR在服务端完成模版与数据的融合不同，CSR是在浏览器中完成模版与数据的融合，并渲染出最终的页面。
客户端向服务器或者CDN发送请求，获取静态的HTML页面。注意，此时获取的HTML通常是空白页面。浏览器在得到该页面后，不会渲染出任何内容，所以从用户的视角看，此时页面处于“白屏”阶段。
虽然HTML页面是空的，但浏览器任然会解析HTML内容。由于HTML页面中存在<link rel=”stylesheet”> 和<script> 等标签，所以浏览器会加载HTML中引用的资源，例如app.css和app.js。接着，服务器或者CDN会将相应的资源返回给浏览器，浏览器对CSS和JavaScript代码进行解释和执行。因为页面的渲染任务是由Javascript被解释和执行后，才会渲染出页面内容，即“白屏”结束。但初始渲染出来的内容通常是页面“骨架”, 因为没有请求API获取数据。
当用户再次通过点击“跳转”到其他页面时，浏览器并不会真正的进行跳转动作，即不会进行刷新，而是通过前端路由的方式动态地渲染页面，这对用户的交互体验会非常友好。但很明显的是，与SSR相比，CSR会产生所谓的“白屏”问题。实际上，CSR不仅仅会产生白屏问题，它对SEO(搜索引擎优化)也不友好。
同构渲染
同构渲染即将SSR和CSR两者相融合。
同构渲染分为首次渲染(即首次访问或刷新页面) 以及非首次渲染。
同构渲染的首次渲染与SSR的工作流程是一致的。也就是说，当首次访问或者刷新页面时，整个页面的内容是在服务端完成渲染的。浏览器最终得到的是渲染好的HTML页面。
假设浏览器已经接收到除此渲染的静态HTML页面，接下来浏览器会解析并渲染该页面。在解析过程中，浏览器会发现HTML代码中存在<link> 和<script>标签，于是会从CDN或者服务器中获取相应的资源，这一步与CSR一致。当JavaScript资源加载完毕后，会进行激活操作，这里的激活在Vue.js中的术语是”hydration” 。 激活包含两部分工作内容。
- Vue.js在当前页面已经渲染的DOM元素以及Vue.js组件所渲染的虚拟DOM之间建立联系
- Vue.js 从HTML页面中提取由服务端序列化后发送过来的数据，用一初始化整个Vue.js应用程序。
激活完成后，整个应用程序已经完全被Vue.js接管为CSR应用程序了，后续操作都会按照CSR应用程序的流程来执行。当然，如果刷新页面，仍然会进行服务端渲染，然后再进行激活，如此往复。
同构渲染的“同构”一词的含义是，同样的一套代码既可以在服务端运行，也可以在客户端运行。
注意： Vue 中的 beforeUpdate、updated、beforeMount、mounted、beforeUnmount、unmounted等生命周期钩子函数不会在服务端执行。
优缺点对比
| SSR | CSR | 同构渲染 | |
|---|---|---|---|
| SEO | 友好 | 不友好 | 友好 |
| 白屏问题 | 无 | 有 | 无 |
| 占用服务器资源 | 多 | 少 | 中 |
| 用户体验 | 差 | 好 | 好 |
