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的过程示例步骤
- 创建一个Vue实例
- 创建一个renderer
- 将Vue实例渲染为HTML(如果没有传入回调函数,那么会返回Promise对象)
注意:在渲染 Vue 应用程序时,renderer 只从应用程序生成 HTML 标记 (markup),最后还必须用一个额外的 HTML 页面包裹容器,来包裹生成的 HTML 标记。
(7)代码说明
- 将数据进行响应式的过程在服务器上是多余的,所以默认情况下禁用。禁用响应式数据,还可以避免将「数据」转换为「响应式对象」的性能开销。
- 由于没有动态更新,所有的生命周期钩子函数中,只有
beforeCreate
和created
会在服务器端渲染 (SSR) 过程中被调用。 - 对于共享于服务器和客户端,但用于不同平台 API 的任务(task),建议将平台特定实现包含在通用 API 中,或者使用为你执行此操作的 library。
- 大多数自定义指令直接操作 DOM,而在服务器端渲染过程需要特殊处理:使用组件作为抽象机制或者使用directives选项提供“服务器端版本”。
相关文章
- axios和vue-axios的关系
- Vue+Electron开发跨平台桌面应用实践
- 基于vue-cli项目添加服务端渲染
- vue.js $refs和$emit 父子组件交互
- vue.js3:使用clipboard.js实现复制到剪贴板(vue@3.2.37 / clipboard@2.0.11)
- vue-cli4脚手架搭建实战教程
- Atitit mvc之道 attilax著 以vue为例 1. Atitti vue的几大概念1 1.1. 声明式渲染1 1.2. 条件与循环2 1.3. 处理用户输入 click事件2 1
- vue 使用 websocket
- [@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
- Vue服务端渲染Nuxt.js实例
- 毕业设计 40个SSM+VUE毕设项目分享【源码+论文】(一)
- Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)
- Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
- 212:vue+openlayers 点击拖动地图播放mp3音频
- 117:vue+openlayers: 实时显示zoom,并显示左下、左上、右上、右下的坐标 ( 示例代码 )
- Vue 页面渲染的流程
- 【三十天精通Vue 3】第八天 Vue 3 生命周期钩子详解
- vue中动态渲染组件