摘要：本文只是對官方文檔和對官方的個人學習總結，說得不夠完整的請見諒本文主要對以下幾方面內容對的內容進行分析總結出現的原因的總體原理當中的數據預取在編寫代碼時候的限制的構建原理出現的原因單頁應用有一個很大的缺點就是問題，搜索引擎目前只能對同步的進

本文只是對Vue.js官方SSR文檔和對官方hackernews demo的個人學習總結，說得不夠完整的請見諒

本文主要對以下幾方面內容對Vue.js SSR的內容進行分析總結

SSR出現的原因

Vue.js SSR的總體原理

SSR當中的數據預取

SSR在編寫代碼時候的限制

SSR的webpack構建原理

單頁應用有一個很大的缺點就是SEO問題，搜索引擎目前只能對同步的javascript進行索引，但對于需要異步獲取數據的單頁應用來說，搜索引擎并不會抓取到它們的內容

更快的首屏內容展示速度，單頁應用需要等待JS文件加載完成，然后再進行頁面渲染，而SSR是將渲染完畢的html傳輸給客戶端

如果用一句話概括Vue.js SSR的運作過程，那就是在服務端將Vue.js實例轉換成html字符串傳輸到客戶端，然后進行客戶端激活，使網頁內容能在Vue實例的控制之下

這一句話包含兩步內容

Vue.js實例轉換成html字符串

客戶端激活

先來看第一步

一個最簡單的Vue.js單頁應用是這樣的：

new Vue({
    render: h => h("div", "123")
}).$mount("#app")

這里也包含兩步

新建Vue實例

掛在到DOM上面

在服務端當中我們不進行上面第二步操作，取而代之的是將這個實例直接渲染成字符串，做這個工作的就是我們的vue-server-renderer

const renderer = require("vue-server-renderer").createRenderer()
const Vue = require("vue")

renderer.renderToString(new Vue({
  render: h => h("div", 123)
})).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})
// 輸出
123

到現在一個最簡單的vue ssr應用在服務端的工作已經完成了，下面我們轉向下一步客戶端激活

客戶端激活跟我們單頁應用所做的工作相比，最大的不同點就是它并不會構建DOM元素，只會對現有的DOM元素進行激活，使它們能被Vue實例進行控制，而判斷激活的關鍵就是上面的data-server-rendered屬性

至此，最簡單的一個SSR應用已經構建完成了，下面是對這個應用的功能進行進一步的補充

數據預取包含著兩個方面，客戶端的數據預取和服務端的數據預取

我們渲染一個內容完整頁面的時候往往需要向服務器請求數據，所以現在服務端的邏輯變成等待數據獲取完畢，然后將頁面轉換成html字符串

其中數據獲取有以下幾個問題：

獲取哪些數據？

如何得到獲取數據的方法？

應在何時預取數據？

預取的數據應保存在哪里？

預取的數據應該怎么樣跟客戶端進行同步？

問題1：
我們的數據用來渲染頁面，那么我們就需要組成當前頁面的所有組件各自所需要的數據

問題2：
每個需要進行服務端數據預取的組件定義一個asyncData方法，此方法用于數據預取

問題3：
我們需要先得到當前頁面所有需要渲染的組件，然后再進行數據預取

問題4：
由于還需要進行數據同步，所以很難將數據保存在組件的私有data上面，放在vuex上面是個普遍的選擇

問題5：
服務端在返回html字符串的時候，store數據將被序列化以后以window.__INITIAL_STATE__=/* store state */的形式插入到腳本當中被客戶端獲取，客戶端的store使用store.replaceState方法同步state

簡單復述一下上面的流程就是：
在渲染當前頁面的所有組件加載完畢以后，執行這些組件的asyncData方法，這些方法將獲取到的數據將由vuex托管，獲取數據完畢以后即可將應用渲染成html字符串，vuex store的state將會被序列化以后一并傳輸到客戶端，被客戶端進行同步

下面是實現的一些細節：

判斷組件加載完畢的方法是vue-router的onReady方法

獲取當前頁面的所有組件為vue-router的getMatchedComponents方法

由于源碼太長所以沒貼出來，具體可以到官網瀏覽

服務端數據預取的關鍵點算是總結的差不多了，下面簡單說一下客戶端的數據預取

客戶端的數據預取方法可分為兩種：

等待數據獲取完畢后再進行視圖切換

先進行視圖切換然后在進行數據獲取

兩種方法區別在于讓用戶在什么時候產生等待的感覺，第一種是在頁面切換時，而第二種是在頁面切換完畢等待內容的出現時

第一種方法的實現使用了vue-router實例的beforeResolve方法，這個方法執行在異步組件加載完畢后，導航被確認之前，當完成數據預取以后router才會進行DOM更新等步驟

第二種方法的實現跟我們一般進行數據獲取一致，在beforeMount鉤子當中執行

由于瀏覽器特定的API將會在服務端報錯，如"document"、"window"等，盡量避免使用此類API或者在非服務端運行的聲明周期函數中調用如"mounted"等等

指令由于能直接操作DOM會受到很大的限制

以官方的hackernews demo為例，webpack有兩個入口entry-client和entry-server分別負責構建客戶端和服務端的文件

服務端方面webpack會輸出一個名叫vue-ssr-server-bundle的json文件，此文件由官方提供的VueSSRServerPlugin插件所構建而成，是服務端的構建清單，傳入createBundleRenderer生成服務端渲染所需要的renderer

客戶端方面webpack輸出的是由代碼分割而成的chunk和公用bundle，與一般單頁應用的構建相似，不同的是會生成一個vue-ssr-client-manifest，此文件是客戶端方面的構建清單，包含所有chunk的信息，將其傳入上面的renderer當中能自動將chunk嵌入到html當中，當然用戶也能夠取消，自行選擇手動嵌入的內容