zl程序教程

您现在的位置是:首页 >  前端

当前栏目

Vue——服务器端渲染SSR

Vue 渲染 服务器端 SSR
2023-09-14 09:08:23 时间

  简单了解一下Vue的服务器端渲染(server side render): 

  (1)什么是服务器端渲染?

  简单来说就是将组件渲染为服务器端的HTML字符串,然后将它们直接发送到客户端,在浏览器中能够进行正常交互的应用程序。

  • 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"。
  • 应用程序的大部分代码都可以在服务器和客户端上运行。

  (2)服务器端渲染的优势

  • 更好的 SEO,可以被索引;而客户端渲染CSR不能够被搜索引擎爬取到。
  • 更快的内容到达时间,可以产生更好的用户体验。
  • 不需要占用客户端(浏览器)资源。
  • 有利于首屏加载,不需要加载大量的JS文件。
  • 服务端生成的静态化文件,有利于浏览器缓存。
  • 适合新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。

  (3)服务器端渲染的弊端

  • 开发条件所限。
  • 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同,服务器渲染应用程序,需要处于 Node.js server 运行环境
  • 更多的服务器端负载。

  (4)是否启用服务器端渲染的指标

  主要取决于内容到达时间 (time-to-content) 对应用程序的重要程度。若内容到达时间 (time-to-content) 要求是绝对关键的指标,在这种情况下,服务器端渲染 (SSR) 可以帮助你实现最佳的初始加载性能。

  (5)版本匹配

  vue-server-renderer 和 vue 必须匹配版本;vue-server-renderer 依赖一些 Node.js 原生模块,因此只能在 Node.js 中使用。

  (6)SSR的过程示例步骤

  1. 创建一个Vue实例
  2. 创建一个renderer
  3. 将Vue实例渲染为HTML(如果没有传入回调函数,那么会返回Promise对象)

  注意:在渲染 Vue 应用程序时,renderer 只从应用程序生成 HTML 标记 (markup),最后还必须用一个额外的 HTML 页面包裹容器,来包裹生成的 HTML 标记。

  (7)代码说明

  • 将数据进行响应式的过程在服务器上是多余的,所以默认情况下禁用。禁用响应式数据,还可以避免将「数据」转换为「响应式对象」的性能开销。
  • 由于没有动态更新,所有的生命周期钩子函数中,只有 beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用。
  • 对于共享于服务器和客户端,但用于不同平台 API 的任务(task),建议将平台特定实现包含在通用 API 中,或者使用为你执行此操作的 library。
  • 大多数自定义指令直接操作 DOM,而在服务器端渲染过程需要特殊处理:使用组件作为抽象机制或者使用directives选项提供“服务器端版本”。