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 相关文章推荐
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
js tab 选项卡
2009/04/26 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
python实现简单ftp客户端的方法
2015/06/28 Python
python列表的增删改查实例代码
2018/01/30 Python
Python控制Firefox方法总结
2019/06/03 Python
int在python中的含义以及用法
2019/06/27 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
金融专业个人求职信
2013/09/22 职场文书
财务主管自我鉴定
2014/01/17 职场文书
体育教师求职信
2014/06/30 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
党风廉正建设责任书
2015/01/29 职场文书
大足石刻导游词
2015/02/02 职场文书
入党积极分子群众意见
2015/06/01 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书