Vue使用预渲染代替SSR的方法


Posted in Javascript onJuly 02, 2020

页面渲染方式

前段时间了解到页面有几种渲染方式:SPA SSR,以前写的一个网站但是用的渲染方式是 SPA,导致搜索引擎爬虫抓不到任何信息,对 SEO 优化不很好,本想改成 SSR,但是改动配置很多,弄来弄去怕影响开发,今天在 Vue 官网看到预渲染,今天试了下,感觉是一个折中的方法,而且配置改动不大,大家可以试试

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

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记” 激活” 为客户端上完全可交互的应用程序。

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

为什么使用服务器端渲染 (SSR)?

与传统 SPA (单页应用程序 (Single-Page Application)) 相比,服务器端渲染 (SSR) 的优势主要在于:

更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

请注意,截至目前,Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里,同步是关键。如果你的应用程序初始展示 loading 菊花图,然后通过 Ajax 获取内容,抓取工具并不会等待异步完成后再行抓取页面内容。也就是说,如果 SEO 对你的站点至关重要,而你的页面又是异步获取内容,则你可能需要服务器端渲染 (SSR) 解决此问题。

更快的内容到达时间 (time-to-content),特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行,才显示服务器渲染的标记,所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验,并且对于那些「内容到达时间 (time-to-content) 与转化率直接相关」的应用程序而言,服务器端渲染 (SSR) 至关重要。

使用服务器端渲染 (SSR) 时还需要有一些权衡之处:

  • 开发条件所限。浏览器特定的代码,只能在某些生命周期钩子函数 (lifecycle hook) 中使用;一些外部扩展库 (external library) 可能需要特殊处理,才能在服务器渲染应用程序中运行。
  • 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同,服务器渲染应用程序,需要处于 Node.js server 运行环境。
  • 更多的服务器端负载。在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集),因此如果你预料在高流量环境 (high traffic) 下使用,请准备相应的服务器负载,并明智地采用缓存策略。

在对你的应用程序使用服务器端渲染 (SSR) 之前,你应该问的第一个问题是,是否真的需要它。这主要取决于内容到达时间 (time-to-content) 对应用程序的重要程度。例如,如果你正在构建一个内部仪表盘,初始加载时的额外几百毫秒并不重要,这种情况下去使用服务器端渲染 (SSR) 将是一个小题大作之举。然而,内容到达时间 (time-to-content) 要求是绝对关键的指标,在这种情况下,服务器端渲染 (SSR) 可以帮助你实现最佳的初始加载性能。

服务器端渲染 vs 预渲染 (SSR vs Prerendering)

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。

如果你使用 webpack,你可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试 - 事实上,作者是 Vue 核心团队的成员。

使用方法

vue-router 必须是 history 模式

const router = new VueRouter({
mode: 'history',
routes: [...]
})

安装预渲染核心:prerender-spa-plugin

yarn add prerender-spa-plugin -D

在 vue.config.js 配置(低版本 vue 写在 build/webpack.prod.conf.js)

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports={
 // 因为高版本Vue将配置文件整合到了vue.config.js,所以原先写在webpack配置里的都需要写在configureWebpack里
 configureWebpack: {
   // plugins插件里书写
   plugins: [
     new PrerenderSPAPlugin({
      // 生成文件的路径,这个目录只能有一级。若目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动
      staticDir: path.join(__dirname, './dist'),
      // 对应自己的路由文件
      routes: [ '/', '/article'],
      // 若没有这段则不会进行预编译
      renderer: new Renderer({
       inject: {
        foo: 'bar'
       },
       headless: false,
       // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
       renderAfterDocumentEvent: 'render-event'
      })
     }),
   ]
 }
}

在 mian.js 配置,在 mounted 函数里增加 document.dispatchEvent (new Event (‘render-event'))

new Vue({
el: '#app',
router,
store,
render:h=>h(App),
mounted(){
  document.dispatchEvent(new Event('render-event'))
}
})

yarn run build 打包项目,看到自己的页面被提前生成就 OK 了

Vue使用预渲染代替SSR的方法

安装 vue-meta-info 插件,网页 meta 标签

yarn 安装

yarn add vue-meta-info

在 mian.js 配置

import MetaInfo from 'vue-meta-info' 
Vue.use(MetaInfo)

在 XXOO.vue 文件中配置

export default {
 // 这些代码会转成网页的meta标签里的内容
 metaInfo: {
   title: '标题',
   meta: [
     {
       name: 'keywords',
       content: '关键字'
     },
     {
       name: 'description',
       content: '网页描述'
     }
   ]
 }

到此这篇关于Vue使用预渲染代替SSR的方法 的文章就介绍到这了,更多相关Vue预渲染代替SSR内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 #Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 #Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 #Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 #Javascript
JS字符串和数组如何实现相互转化
Jul 02 #Javascript
Vue父子之间值传递的实例教程
Jul 02 #Javascript
JS出现404错误原理及解决方案
Jul 01 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
php使用递归计算文件夹大小
2014/12/24 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
5 cool javascript apps
2007/03/24 Javascript
Javascript浅谈之this
2013/12/17 Javascript
javascript版2048小游戏
2015/03/18 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
分析python切片原理和方法
2017/12/19 Python
深入浅析Python中的迭代器
2019/06/04 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python实现的Iou与Giou代码
2020/01/18 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
机电专业大学生求职信
2013/10/04 职场文书
给同事的道歉信
2014/01/11 职场文书
趣味运动会广播稿
2014/09/13 职场文书
计划生育责任书
2015/05/09 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫