名词解释

客户端渲染(client-side rendering ,CSR)

服务端渲染(server-side rendering, SSR)

同构渲染（morphic /'mɔ:fik/ rendering) 客户端渲染和服务端渲染结合

服务端渲染流程

服务端渲染流程图.png

服务端渲染的工作流程

1. 用户通过浏览器请求站点
2. 服务器请求API获取数据
3. 接口返回数据给服务器
4. 服务器根据模版和获取的数据凭借出最终的HTML字符串
5. 服务器将HTML字符串发送给浏览器，浏览器解析HTML内容并渲染

传统的服务端渲染的用户体验非常差，任何一个微小的操作都可能导致页面刷新

客户端渲染

与SSR在服务端完成模版与数据的融合不同，CSR是在浏览器中完成模版与数据的融合，并渲染出最终的页面。

客户端渲染的工作流程.png

客户端向服务器或者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等生命周期钩子函数不会在服务端执行。

优缺点对比