Vue：CSR（客户端渲染）、SSR（服务端渲染）、同构渲染

CSR（客户端渲染）

CSR（客户端渲染） 是在浏览器中完成模板与数据的融合，并渲染出最终的 HTML 页面

1. 客户端向服务器或 CDN 发送请求，获取静态的 HTML 页面
2. 浏览器在得到该页面后，解析 HTML 内容。由于 HTML 页面中存在 link 和 script 等标签，所以浏览器会加载 HTML 中引用的资源。
3. 服务器或 CDN 会将相应的资源返回给浏览器，浏览器对 CSS 和 JavaScript 代码进行解释和执行。因为页面的渲染任务是由 JavaScript 来完成的，所以当 JavaScript 被解释和执行后，才会渲染出页面内容，即“白屏”结束

SSR（服务端渲染）

SSR是在服务器中完成模板与数据的融合，并生成html字符串返回给浏览器
服务端渲染的流程如下：

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

同构渲染

同构渲染是将CSR和SSR结合起来使用，弥补各自的不足加强各自的优势。

同构渲染的“同构”一词的含义是，同样一套代码既可以在服务端运行，也可以在客户端运行

同构渲染流程

同构渲染分为首次渲染（即首次访问或刷新页面）以及非首次渲染。

• 首次渲染与服务器渲染流程是一致的，当首次访问或者刷新页面时，整个页面的内容是在服务端完成渲染的，浏览器最终得到的是渲染好的 HTML 页面。

• 浏览器会解析并渲染该页面，在解析过程中，浏览器会向服务器获取对应的script和link标签中的资源，这一步与 CSR 一致。

当JavaScript 资源加载完毕后，会进行以下操作：

• Vue.js 在当前页面已经渲染的 DOM 元素以及 Vue.js 组件所渲染的虚拟 DOM 之间建立联系
• Vue.js 从 HTML 页面中提取由服务端序列化后发送过来的数据，用以初始化整个Vue.js 应用程序

同构渲染注意事项

当使用同构渲染时，编写的代码也会有所不同，需要考虑代码在不同环境的运行情况

当组件的代码在服务端运行时，由于不会对组件进行真正的挂载操作，即不会把虚拟 DOM 渲染为真实 DOM 元素，所以组件的 beforeMount 与mounted 这两个钩子函数不会执行

又因为服务端渲染的是应用的快照，所以不存在数据变化后的重新渲染，因此，组件的 beforeUpdate 与 updated 这两个钩子函数也不会执行。

所谓快照，指的是在当前数据状态下页面应该呈现的内容。

另外，在服务端渲染时，也不会发生组件被卸载的情况，所以组件的 beforeUnmount 与 unmounted 这两个钩子函数也不会执行

同构渲染实现原理

前面说了，同构渲染分为服务器渲染和客户端渲染两个部分。

服务器端渲染部分的实现与客户端渲染的逻辑基本一致，唯一的区别在于，在服务端渲染时，无须使用 reactive 函数为 data 数据创建响应式版本，并且 props 数据也无须是浅响应的。

客户端渲染时会再次执行服务器返回的JavaScript文件，但是并不会再次创建DOM，但是需要做下面这两件事：

• 在页面中的 DOM 元素与虚拟节点对象之间建立联系
• 为页面中的 DOM 元素添加事件绑定