服务器端渲染的使用方法

今天就跟大家聊聊有关服务器端渲染的使用方法，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

页面渲染方式

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

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

简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序

使用服务器端渲染 (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-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: '网页描述'
     }
   ]
 }

看完上述内容，你们对服务器端渲染的使用方法有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。