頁面渲染方式

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

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

Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架。默認(rèn)情況下，可以在瀏覽器中輸出 Vue 組件，進(jìn)行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染為服務(wù)器端的 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標(biāo)記” 激活” 為客戶端上完全可交互的應(yīng)用程序。

服務(wù)器渲染的 Vue.js 應(yīng)用程序也可以被認(rèn)為是” 同構(gòu)” 或” 通用”，因?yàn)閼?yīng)用程序的大部分代碼都可以在服務(wù)器和客戶端上運(yùn)行。

為什么使用服務(wù)器端渲染 (SSR)？

與傳統(tǒng) SPA (單頁應(yīng)用程序 (Single-Page Application)) 相比，服務(wù)器端渲染 (SSR) 的優(yōu)勢主要在于：

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

請注意，截至目前，Google 和 Bing 可以很好對同步 JavaScript 應(yīng)用程序進(jìn)行索引。在這里，同步是關(guān)鍵。如果你的應(yīng)用程序初始展示 loading 菊花圖，然后通過 Ajax 獲取內(nèi)容，抓取工具并不會等待異步完成后再行抓取頁面內(nèi)容。也就是說，如果 SEO 對你的站點(diǎn)至關(guān)重要，而你的頁面又是異步獲取內(nèi)容，則你可能需要服務(wù)器端渲染 (SSR) 解決此問題。

更快的內(nèi)容到達(dá)時間 (time-to-content)，特別是對于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備。無需等待所有的 JavaScript 都完成下載并執(zhí)行，才顯示服務(wù)器渲染的標(biāo)記，所以你的用戶將會更快速地看到完整渲染的頁面。通常可以產(chǎn)生更好的用戶體驗(yàn)，并且對于那些「內(nèi)容到達(dá)時間 (time-to-content) 與轉(zhuǎn)化率直接相關(guān)」的應(yīng)用程序而言，服務(wù)器端渲染 (SSR) 至關(guān)重要。

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

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

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

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

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

如果你使用 webpack，你可以使用 prerender-spa-plugin 輕松地添加預(yù)渲染。它已經(jīng)被 Vue 應(yīng)用程序廣泛測試 - 事實(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({
      // 生成文件的路徑，這個目錄只能有一級。若目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預(yù)渲染的時候只會卡著不動
      staticDir: path.join(__dirname, './dist'),
      // 對應(yīng)自己的路由文件
      routes: [ '/', '/article'],
      // 若沒有這段則不會進(jìn)行預(yù)編譯
      renderer: new Renderer({
       inject: {
        foo: 'bar'
       },
       headless: false,
       // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應(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)目，看到自己的頁面被提前生成就 OK 了

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

yarn 安裝

yarn add vue-meta-info

在 mian.js 配置

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

在 XXOO.vue 文件中配置

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

到此這篇關(guān)于Vue使用預(yù)渲染代替SSR的方法 的文章就介紹到這了,更多相關(guān)Vue預(yù)渲染代替SSR內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評論