CSR(客户端渲染)
CSR(客户端渲染) 是在浏览器中完成模板与数据的融合,并渲染出最终的 HTML 页面
- 客户端向服务器或 CDN 发送请求,获取静态的 HTML 页面
- 浏览器在得到该页面后,解析 HTML 内容。由于 HTML 页面中存在 link 和 script 等标签,所以浏览器会加载 HTML 中引用的资源。
- 服务器或 CDN 会将相应的资源返回给浏览器,浏览器对 CSS 和 JavaScript 代码进行解释和执行。因为页面的渲染任务是由 JavaScript 来完成的,所以当 JavaScript 被解释和执行后,才会渲染出页面内容,即“白屏”结束
SSR(服务端渲染)
SSR是在服务器中完成模板与数据的融合,并生成html字符串返回给浏览器
服务端渲染的流程如下:
- 用户通过浏览器请求站点。
- 服务器请求 API 获取数据。
- 接口返回数据给服务器。
- 服务器根据模板和获取的数据拼接出最终的 HTML 字符串。
- 服务器将 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 元素添加事件绑定