服務器端渲染的使用方法

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

頁面渲染方式

前段時間了解到頁面有幾種渲染方式：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: '網頁描述'
     }
   ]
 }

看完上述內容，你們對服務器端渲染的使用方法有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。