Vue SSR 指南

::: tip 注意 本指南需要最低為如下版本的 Vue，以及以下 library 支持：

• vue & vue-server-renderer 2.3.0+
• vue-router 2.5.0+
• vue-loader 12.0.0+ & vue-style-loader 3.0.0+

如果先前已經(jīng)使用過 Vue 2.2 的服務(wù)器端渲染 (SSR)，你應(yīng)該注意到，推薦的代碼結(jié)構(gòu)現(xiàn)在略有不同（使用新的 runInNewContext 選項(xiàng)，并設(shè)置為 false）。現(xiàn)有的應(yīng)用程序可以繼續(xù)運(yùn)行，但建議你遷移到新的推薦規(guī)范。 :::

什么是服務(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īng)用程序 (Single-Page Application)) 相比，服務(wù)器端渲染 (SSR) 的優(yōu)勢主要在于：

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

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

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

使用服務(wù)器端渲染 (SSR) 時(shí)還需要有一些權(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)用程序，顯然會(huì)比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集)，因此如果你預(yù)料在高流量環(huán)境 (high traffic) 下使用，請準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載，并明智地采用緩存策略。

在對你的應(yīng)用程序使用服務(wù)器端渲染 (SSR) 之前，你應(yīng)該問的第一個(gè)問題是，是否真的需要它。這主要取決于內(nèi)容到達(dá)時(shí)間 (time-to-content) 對應(yīng)用程序的重要程度。例如，如果你正在構(gòu)建一個(gè)內(nèi)部儀表盤，初始加載時(shí)的額外幾百毫秒并不重要，這種情況下去使用服務(wù)器端渲染 (SSR) 將是一個(gè)小題大作之舉。然而，內(nèi)容到達(dá)時(shí)間 (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í)時(shí)動(dòng)態(tài)編譯 HTML，而是使用預(yù)渲染方式，在構(gòu)建時(shí) (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件。優(yōu)點(diǎn)是設(shè)置預(yù)渲染更簡單，并可以將你的前端作為一個(gè)完全靜態(tài)的站點(diǎn)。

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

關(guān)于此指南

本指南專注于，使用 Node.js server 的服務(wù)器端單頁面應(yīng)用程序渲染。將 Vue 服務(wù)器端渲染 (SSR) 與其他后端設(shè)置進(jìn)行混合使用，是后端自身集成 SSR 的話題，我們會(huì)在 專門章節(jié) 中進(jìn)行簡要討論。

本指南將會(huì)非常深入，并且假設(shè)你已經(jīng)熟悉 Vue.js 本身，并且具有 Node.js 和 webpack 的相當(dāng)不錯(cuò)的應(yīng)用經(jīng)驗(yàn)。如果你傾向于使用提供了平滑開箱即用體驗(yàn)的更高層次解決方案，你應(yīng)該去嘗試使用 Nuxt.js 。它建立在同等的 Vue 技術(shù)棧之上，但抽象出很多模板，并提供了一些額外的功能，例如靜態(tài)站點(diǎn)生成。但是，如果你需要更直接地控制應(yīng)用程序的結(jié)構(gòu)，Nuxt.js 并不適合這種使用場景。無論如何，閱讀本指南將更有助于更好地了解一切如何運(yùn)行。

當(dāng)你閱讀時(shí)，參考官方 HackerNews Demo 將會(huì)有所幫助，此示例使用了本指南涵蓋的大部分技術(shù)。

最后，請注意，本指南中的解決方案不是限定的 - 我們發(fā)現(xiàn)它們對我們來說很好，但這并不意味著無法繼續(xù)改進(jìn)?？赡軙?huì)在未來持續(xù)改進(jìn)，歡迎通過隨意提交 pull request 作出貢獻(xiàn)！