Vue 服務端渲染 & 預渲染

NeverYu發表於2019-04-01
Vue服務端

寫在前面

專案程式碼：github.com/NeverYu

演示地址：git.io/fjkDg

本文著重講解預渲染以及使用方法，並提供相關技術說明、原始碼以及演示地址；服務端渲染 內容較多，將在下一次整理髮出！

導讀

關於 Vue 的 SPA 說的已經太多了（在我之前的多個專案中，已經多次使用到了，包括 sell，music，vue-cms 等多個專案），它為我們帶來了極速的開發體驗，極強的開發效率。可能唯一有些許不足的就是：當我們對 SEO 很在乎的時候，我們如何去處理 SEO 的需求？

關於 SEO，Vue 也有現成的解決方案：Vue 服務端渲染

那麼

什麼是服務端渲染

服務端將完整的頁面 html 輸出到客戶端顯示，與 SPA （Single-Page-Application）使用 js 來渲染頁面有明顯區別。

為什麼使用服務端渲染

  • 更好的 SEO
  • 更快的內容到達時間

服務端渲染 or 預渲染

就像官網所說的，如果你調研伺服器端渲染(SSR)只是用來改善少數營銷頁面（例如 /, /about, /contact 等）的 SEO，那麼你可能需要預渲染，一個典型的預渲染使用場景可能類似這個網站。

服務端渲染與預渲染的區別

服務端渲染和預渲染的使用場景還是有較明顯的區別的。預渲染的使用場景更多是我們所說的靜態頁面的形式，比如說這個網站。服務端渲染適用於大型的、動態的、頁面資料處理較多且較為複雜的、與服務端有資料互動的功能型網站，一個明顯的使用場景就是電商網站。

如何使用預渲染

預渲染的核心是使用 prerender-spa-plugin，如何使用它呢？我們需要用 npm 安裝它，然後在 webpack 中輕輕的引入它即可。

我們還是以本文示例中的這個網站的原始碼中的 webpack 配置為例：

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, 'dist'),
  routes: [ '/', '/home', '/information', '/ticket', '/scenery', '/about' ],
  renderer: new Renderer({
    headless: false,
    renderAfterDocumentEvent: 'render-event'
  })
})
複製程式碼

PrerenderSPAPlugin 的配置是極其簡單的，我們需要簡單的配置一下，專案所有的路由，最終生成後有幾個頁面，都是以這個配置為依據，而不是你在 vue-router 中配置的路由。

然後再配置一下 renderAfterDocumentEvent；整個預渲染過程會在這個事件觸發後開始，事件的觸發是在 main.js 中做的：

// main.js
mounted () {
    // You'll need this for renderAfterDocumentEvent.
    document.dispatchEvent(new Event('render-event'))
}
複製程式碼

main.js 中觸發這個事件，PrerenderSPAPlugin 知道 renderAfterDocumentEvent 觸發後，就會開始執行預渲染了，這個過程思路是很簡單的。

headless 設定為 false 即可，在 npm run build 的時候，會啟動一個 Chromium 來進行簡單的測試。

細心的人可能會發現：為什麼你原始碼中 headless 配置的是 true？ 你知道為什麼嗎？

最基礎也最核心的配置項也就這幾行程式碼，當然，如果你有更多的需求配置項，你可以去 github 上檢視文件，文件中有更多的配置說明。

這些程式碼方面的內容，只要你下載專案原始碼，或者自己動手嘗試，將會非常簡單易懂

增強 SEO

有了預渲染以後，整個頁面的 SEO 已經很好了。但有時候我們也會需要 meta 資訊的動態變化（不同頁面有不同的 meta），比如 title、meta keywords 或者是 link，那麼這裡我們可以使用 vue-meta-info 這個外掛。

vue-meta-info 是一個基於 Vue 2.0 的外掛，它會讓你更好的管理你的 app 裡的 meta 資訊。你可以直接在元件內設定 metaInfo 便可以自動掛載到你的頁面中。如果你需要隨著頁面的變化，自動更新你的 Title、meta 等資訊，那麼用此外掛非常合適。

具體的使用，這裡就不貼程式碼了，看原始碼就可以了，在 src/util/meta-info.js 中。

如何搭建一個預渲染開發環境

如果你也想要使用預渲染來開發你的網站的話，最簡單的方法就是克隆這個專案，然後根據你的需求，簡單刪減以後進行二次開發，整個的開發流程和 Vue 是一模一樣的。

總結

1、相較於 Vue 的模板中大而全的 webpack 配置項，預渲染中的 webpack 配置簡單小巧，如果你有一些額外的 webpack 的配置需求的話，你可能需要自己動手。

2、我的這個專案使用的是 stylus 來作為 css 預編譯語言，如果你想使用其他的 css 預編譯語言的話，需要額外安裝一些外掛以及做一些簡單配置。當然了，預設的 css 肯定是支援的。

3、在寫這個專案的過程中，也有做一些簡單的知識點記錄，vue-prerender 筆記

4、最後專案打包釋出到生產環境，使用 npm run build 一鍵操作即可。如果你想要部署到子目錄下的話，那麼，你可能需要做一些簡單的修改，具體在 vue-prerender 筆記 有提到。後續如果有需要增加補充的說明，也會在 vue-prerender 筆記中補充。

寫在最後

我的主頁： neveryu.github.io/index.html

QQ群：685486827

Vue 服務端渲染 & 預渲染

相關文章