Vue.js SSR 客戶端激活 (client-side hydration)

所謂客戶端激活，指的是 Vue 在瀏覽器端接管由服務(wù)端發(fā)送的靜態(tài) HTML，使其變?yōu)橛?Vue 管理的動(dòng)態(tài) DOM 的過程。

在 entry-client.js 中，我們用下面這行掛載(mount)應(yīng)用程序：

// 這里假定 App.vue template 根元素的 `id="app"`
app.$mount('#app')

由于服務(wù)器已經(jīng)渲染好了 HTML，我們顯然無需將其丟棄再重新創(chuàng)建所有的 DOM 元素。相反，我們需要"激活"這些靜態(tài)的 HTML，然后使他們成為動(dòng)態(tài)的（能夠響應(yīng)后續(xù)的數(shù)據(jù)變化）。

如果你檢查服務(wù)器渲染的輸出結(jié)果，你會(huì)注意到應(yīng)用程序的根元素上添加了一個(gè)特殊的屬性：

<div id="app" data-server-rendered="true">

data-server-rendered 特殊屬性，讓客戶端 Vue 知道這部分 HTML 是由 Vue 在服務(wù)端渲染的，并且應(yīng)該以激活模式進(jìn)行掛載。注意，這里并沒有添加 id="app"，而是添加 data-server-rendered 屬性：你需要自行添加 ID 或其他能夠選取到應(yīng)用程序根元素的選擇器，否則應(yīng)用程序?qū)o法正常激活。

注意，在沒有 data-server-rendered 屬性的元素上，還可以向 $mount 函數(shù)的 hydrating 參數(shù)位置傳入 true，來強(qiáng)制使用激活模式(hydration)：

// 強(qiáng)制使用應(yīng)用程序的激活模式
app.$mount('#app', true)

在開發(fā)模式下，Vue 將推斷客戶端生成的虛擬 DOM 樹 (virtual DOM tree)，是否與從服務(wù)器渲染的 DOM 結(jié)構(gòu) (DOM structure) 匹配。如果無法匹配，它將退出混合模式，丟棄現(xiàn)有的 DOM 并從頭開始渲染。在生產(chǎn)模式下，此檢測會(huì)被跳過，以避免性能損耗。

一些需要注意的坑

使用「SSR + 客戶端混合」時(shí)，需要了解的一件事是，瀏覽器可能會(huì)更改的一些特殊的 HTML 結(jié)構(gòu)。例如，當(dāng)你在 Vue 模板中寫入：

<table>
  <tr><td>hi</td></tr>
</table>

瀏覽器會(huì)在 <table> 內(nèi)部自動(dòng)注入 <tbody>，然而，由于 Vue 生成的虛擬 DOM (virtual DOM) 不包含 <tbody>，所以會(huì)導(dǎo)致無法匹配。為能夠正確匹配，請(qǐng)確保在模板中寫入有效的 HTML。