服務(wù)器端渲染的使用方法

今天就跟大家聊聊有關(guān)服務(wù)器端渲染的使用方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

頁(yè)面渲染方式

前段時(shí)間了解到頁(yè)面有幾種渲染方式：SPA SSR，以前寫的一個(gè)網(wǎng)站但是用的渲染方式是 SPA，導(dǎo)致搜索引擎爬蟲抓不到任何信息，對(duì) SEO 優(yōu)化不很好，本想改成 SSR，但是改動(dòng)配置很多，弄來(lái)弄去怕影響開發(fā)，今天在 Vue 官網(wǎng)看到預(yù)渲染，今天試了下，感覺(jué)是一個(gè)折中的方法，而且配置改動(dòng)不大，大家可以試試

什么是服務(wù)器端渲染 (SSR)？

簡(jiǎn)單理解是將組件或頁(yè)面通過(guò)服務(wù)器生成html字符串，再發(fā)送到瀏覽器，最后將靜態(tài)標(biāo)記"混合"為客戶端上完全交互的應(yīng)用程序

使用服務(wù)器端渲染 (SSR) 時(shí)還需要有一些權(quán)衡之處：

• 開發(fā)條件所限。瀏覽器特定的代碼，只能在某些生命周期鉤子函數(shù) (lifecycle hook) 中使用；一些外部擴(kuò)展庫(kù) (external library) 可能需要特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行。
• 涉及構(gòu)建設(shè)置和部署的更多要求。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁(yè)面應(yīng)用程序 (SPA) 不同，服務(wù)器渲染應(yīng)用程序，需要處于 Node.js server 運(yùn)行環(huán)境。
• 更多的服務(wù)器端負(fù)載。在 Node.js 中渲染完整的應(yīng)用程序，顯然會(huì)比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集)，因此如果你預(yù)料在高流量環(huán)境 (high traffic) 下使用，請(qǐng)準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載，并明智地采用緩存策略。

在對(duì)你的應(yīng)用程序使用服務(wù)器端渲染 (SSR) 之前，你應(yīng)該問(wèn)的第一個(gè)問(wèn)題是，是否真的需要它。這主要取決于內(nèi)容到達(dá)時(shí)間 (time-to-content) 對(duì)應(yīng)用程序的重要程度。例如，如果你正在構(gòu)建一個(gè)內(nèi)部?jī)x表盤，初始加載時(shí)的額外幾百毫秒并不重要，這種情況下去使用服務(wù)器端渲染 (SSR) 將是一個(gè)小題大作之舉。然而，內(nèi)容到達(dá)時(shí)間 (time-to-content) 要求是絕對(duì)關(guān)鍵的指標(biāo)，在這種情況下，服務(wù)器端渲染 (SSR) 可以幫助你實(shí)現(xiàn)最佳的初始加載性能。

服務(wù)器端渲染 vs 預(yù)渲染 (SSR vs Prerendering)

如果你調(diào)研服務(wù)器端渲染 (SSR) 只是用來(lái)改善少數(shù)營(yíng)銷頁(yè)面（例如 /, /about, /contact 等）的 SEO，那么你可能需要預(yù)渲染。無(wú)需使用 web 服務(wù)器實(shí)時(shí)動(dòng)態(tài)編譯 HTML，而是使用預(yù)渲染方式，在構(gòu)建時(shí) (build time) 簡(jiǎn)單地生成針對(duì)特定路由的靜態(tài) HTML 文件。優(yōu)點(diǎn)是設(shè)置預(yù)渲染更簡(jiǎn)單，并可以將你的前端作為一個(gè)完全靜態(tài)的站點(diǎn)。

如果你使用 webpack，你可以使用 prerender-spa-plugin 輕松地添加預(yù)渲染。它已經(jīng)被 Vue 應(yīng)用程序廣泛測(cè)試 - 事實(shí)上，作者是 Vue 核心團(tuán)隊(duì)的成員。

使用方法

vue-router 必須是 history 模式

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

安裝預(yù)渲染核心：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={
 // 因?yàn)楦甙姹綱ue將配置文件整合到了vue.config.js,所以原先寫在webpack配置里的都需要寫在configureWebpack里
 configureWebpack: {
   // plugins插件里書寫
   plugins: [
     new PrerenderSPAPlugin({
      // 生成文件的路徑，這個(gè)目錄只能有一級(jí)。若目錄層次大于一級(jí)，在生成的時(shí)候不會(huì)有任何錯(cuò)誤提示，在預(yù)渲染的時(shí)候只會(huì)卡著不動(dòng)
      staticDir: path.join(__dirname, './dist'),
      // 對(duì)應(yīng)自己的路由文件
      routes: [ '/', '/article'],
      // 若沒(méi)有這段則不會(huì)進(jìn)行預(yù)編譯
      renderer: new Renderer({
       inject: {
        foo: 'bar'
       },
       headless: false,
       // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對(duì)應(yīng)上。
       renderAfterDocumentEvent: 'render-event'
      })
     }),
   ]
 }
}

在 mian.js 配置，在 mounted 函數(shù)里增加 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 打包項(xiàng)目，看到自己的頁(yè)面被提前生成就 OK 了

安裝 vue-meta-info 插件，網(wǎng)頁(yè) meta 標(biāo)簽

yarn 安裝

yarn add vue-meta-info

在 mian.js 配置

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

在 XXOO.vue 文件中配置

export default {
 // 這些代碼會(huì)轉(zhuǎn)成網(wǎng)頁(yè)的meta標(biāo)簽里的內(nèi)容
 metaInfo: {
   title: '標(biāo)題',
   meta: [
     {
       name: 'keywords',
       content: '關(guān)鍵字'
     },
     {
       name: 'description',
       content: '網(wǎng)頁(yè)描述'
     }
   ]
 }

看完上述內(nèi)容，你們對(duì)服務(wù)器端渲染的使用方法有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。