Vue 服務器端渲染（一）

什麼是服務器端渲染(SSR)？

Vue.js 是構建客戶端應用程序的框架。默認狀況下，能夠在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操做 DOM。然而，也能夠將同一個組件渲染爲服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最後將靜態標記"混合"爲客戶端上徹底交互的應用程序。

服務器渲染的 Vue.js 應用程序也能夠被認爲是"同構"或"通用"，由於應用程序的大部分代碼均可以在服務器和客戶端上運行。

爲何使用服務器端渲染(SSR)？

與傳統 SPA（Single-Page Application - 單頁應用程序）相比，服務器端渲染(SSR)的優點主要在於：

• 更好的 SEO，因爲搜索引擎爬蟲抓取工具能夠直接查看徹底渲染的頁面。

請注意，截至目前，Google 和 Bing 能夠很好對同步 JavaScript 應用程序進行索引。在這裏，同步是關鍵。若是你的應用程序初始展現 loading 菊花圖，而後經過 Ajax 獲取內容，抓取工具並不會等待異步完成後再行抓取頁面內容。也就是說，若是 SEO 對你的站點相當重要，而你的頁面又是異步獲取內容，則你可能須要服務器端渲染(SSR)解決此問題。

• 更快的內容到達時間(time-to-content)，特別是對於緩慢的網絡狀況或運行緩慢的設備。無需等待全部的 JavaScript 都完成下載並執行，才顯示服務器渲染的標記，因此你的用戶將會更快速地看到完整渲染的頁面。一般能夠產生更好的用戶體驗，而且對於那些「內容到達時間(time-to-content)與轉化率直接相關」的應用程序而言，服務器端渲染(SSR)相當重要。

使用服務器端渲染(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 核心團隊的成員。