您的位置: 翼速应用 > 业内知识 > web前端 > 正文

关于Vue使用预渲染代替SSR方法

页面渲染方式

前段时间了解到页面有几种渲染方式: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 模式

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

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


  1. yarn add prerender-spa-plugin -D  

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


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

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


  1. new Vue({  
  2. el: '#app',  
  3. router,  
  4. store,  
  5. render:h=>h(App),  
  6. mounted(){  
  7.   document.dispatchEvent(new Event('render-event'))  
  8. }  
  9. })  

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

QQ截图20200712121734.png

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

yarn 安装

  1. yarn add vue-meta-info  

在 mian.js 配置

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

在 XXOO.vue 文件中配置

  1. export default {  
  2.  // 这些代码会转成网页的meta标签里的内容  
  3.  metaInfo: {  
  4.    title: '标题',  
  5.    meta: [  
  6.      {  
  7.        name: 'keywords',  
  8.        content: '关键字'  
  9.      },  
  10.      {  
  11.        name: 'description',  
  12.        content: '网页描述'  
  13.      }  
  14.    ]  
  15.  }  



翼速应用这篇关于Vue使用预渲染代替SSR方法适合参考学习 ,更多相关性Vue预渲染代替SSR内容,后续有更多相关技术软件可以参考翼速应用平台!

我来说两句

0 条评论

推荐阅读

  • 响应式布局CSS媒体查询设备像素比介绍

    构建响应式网站布局最常见的是流体网格,灵活调整大小的站点布局技术,确保用户在使用的幕上获得完整的体验。响应式设计如何展示富媒体图像,可以通过以下几种方法。

    admin
  • 微信小程序对于线下实体店具有哪些红利

    对于一些商业敏感的电子商务公司,如蘑菇街,京东等等,在看到小程序背后巨大的流量红利后,逐渐将产品从原来的公众号或应用程序转移到小程序,并在小程序的帮助下,获得更多利润。

    admin
  • 网站开发中HTTP状态码分类说明

    请求Web服务器会返回HTTP状态码,通知浏览器请求是否成功,是否有错误或需要身份验证。HTTP状态代码是服务器传输响应的重要部分,服务器会自动包含在每个HTTP响应中,如果服务器无法执行客户端请求或无法传输网站信息,会显示对应的状态码。

    admin
  • 非关系型和关系数据库管理系统有哪些

    根据数据的类型,结构,数据模型,数据存储使用,不同的系统需求,所需的架构或查询机制,用于本地存储的动态配置数据的系统,与操作关系数据库完全不同的要求,但是根据分类有非关系型和关系数据库管理系统。

    admin

精选专题