頁(yè)面渲染方式

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

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

Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架。默認(rèn)情況下，可以在瀏覽器中輸出 Vue 組件，進(jìn)行生成 DOM 和操作 DOM。然而，也可以將同一個(gè)組件渲染為服務(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è)應(yīng)用程序 (Single-Page Application)) 相比，服務(wù)器端渲染 (SSR) 的優(yōu)勢(shì)主要在于：

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

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

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

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

• 開(kāi)發(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表盤(pán)，初始加載時(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 寫(xiě)在 build/webpack.prod.conf.js）

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports={
 // 因?yàn)楦甙姹綱ue將配置文件整合到了vue.config.js,所以原先寫(xiě)在webpack配置里的都需要寫(xiě)在configureWebpack里
 configureWebpack: {
   // plugins插件里書(shū)寫(xiě)
   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è)描述'
     }
   ]
 }

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

最新評(píng)論