個人博客之前已經(jīng)將 vue-router 的模式改為了 history逗宜，即 url 中不包含 hash雄右，再通過將所有的靜態(tài)請求轉(zhuǎn)發(fā)到 index.html剥啤，使它看上去似乎像一個靜態(tài)多頁的網(wǎng)站。
然而不脯，它其實(shí)和其他的 SPA (Single Page Application 單頁應(yīng)用)來說沒有任何的區(qū)別府怯，最終是通過前端的路由去控制頁面的顯示。單頁應(yīng)用雖然在交互體驗上比傳統(tǒng)多頁更友好防楷，但它也有一個天生的缺陷牺丙，就是對搜索引擎不友好，不利于爬蟲爬取數(shù)據(jù)复局。
正所謂成也蕭何冲簿，敗也蕭何。
講人話就是亿昏，搜索引擎搜不到我的博客啊~哭...
那什么對搜索引擎和爬蟲友好的哪峦剔？答案就是靜態(tài)頁，而非瀏覽器渲染角钩，這就需要服務(wù)器直接渲染吝沫，也就 SSR(Server Side Render)。
SSR递礼，服務(wù)器渲染存谎。簡單來說就是狮惜，服務(wù)器將每個要展示的頁面都運(yùn)行完成后，將整個相應(yīng)流傳送給瀏覽器晤愧，所有的運(yùn)算在服務(wù)器端都已經(jīng)完成凿宾，瀏覽器只需要解析 HTML 就行抠刺。
說起來簡單导匣，那到底該如何著手將項目改造成 SSR哭尝，和曾經(jīng)的多頁又有什么區(qū)別哪？既然自己在 SSR 方面是個小白依疼，自然要先從查資料看文檔入手痰腮，Vue 2.0 的文檔中有一章就是關(guān)于 SSR。
看了文檔之后涛贯，它給了我一個新思路诽嘉，可以在無須大幅修改原先代碼的情況下做到 SSR蔚出，又不失單頁良好的體驗弟翘。
聽上去很酷是不是，具體怎么做繼續(xù)看下去骄酗。
SSR Architecture
一個普通的單頁應(yīng)用通常是通過 webpack 將源代碼打包后插入到 html 中稀余，當(dāng)頁面請求時，返回 html 再加載打包后的 js 文件趋翻，也就是下圖中的 Application Code睛琳，Webpack build 和 browser 這三大塊。
剩下的那幾部分就是 SSR 需要額外新加的部分，一個個來看师骗。
Server entry & Client entry
Server entry & client entry 兩者的有共同的詞尾 entry历等，對應(yīng)的是 webpack.config 中的 entry，即打包入口文件辟癌，也就是分別代表服務(wù)器端所運(yùn)行代碼的入口和瀏覽器端所運(yùn)行代碼的入口文件寒屯。
入口文件自然不用多復(fù)雜。
- server entry: 根據(jù)路由狀態(tài)黍少，返回渲染完成后相應(yīng)的組件
- clinet entry: 將應(yīng)用直接掛載到 DOM 上
OK寡夹。它倆的事就做完啦，是不是很簡單厂置。
Webpack build
有了不同的 entry菩掏，打包的內(nèi)容也有不同，自然就要兩套配置昵济。
配置 webpack 的配置文件的確很麻煩智绸，但有個好消息就是原先的打包文件不需要修改，只需加一個 server 端的配置文件就可以了访忿。server 端的配置文件也相當(dāng)簡單传于，基本可以沿用客戶端的配置，改改 entry 和 output 基本就差不多了醉顽。
不過沼溜，有一點(diǎn)要注意，一定要將 target 屬性設(shè)置成 node游添，不然打包完了也沒法在 node 環(huán)境下跑系草。還可以將所有依賴都設(shè)置成 externals（跑在服務(wù)器本地嘛，依賴自然都拿得到）唆涝，這只是個優(yōu)化點(diǎn)找都，不加也沒有任何問題。
有了配置文件廊酣，也就能生成 Server Bundle 了能耻，只剩下最后一塊 Bundle Renderer 了。
Bundle Renderer
到這里才要用上 vue 為支持 ssr 所依賴的庫 vue-server-renderer亡驰。
通過 vue-server-renderer 提供的 API 就能容易地根據(jù) url 生成對應(yīng)的組件樹晓猛，然后將它返回給客戶端。
這里要注意凡辱，因為用的是 webpack 打包后的文件戒职，所以只能用 createBundleRenderer 而不能用 createRenderer 來創(chuàng)建 renderer。
創(chuàng)建 renderer 的時候還可以為它配置 cache透乾，方法在 README 中也寫得很清楚了洪燥，由于我個人博客的場景不適合添加 cache 就沒有添加磕秤。
這樣從 SPA 到 SSR 的變更就完成了，通過瀏覽器訪問看看是不是已經(jīng)將頁面整個返回了捧韵。
Tips
- 遇到控制臺 ??
The client-side rendered virtual DOM tree is not matching server-rendered content.
當(dāng)然市咆，可能是你的標(biāo)簽不對應(yīng)，也有可能是 text node 中的空格字符長度不對應(yīng)再来，我個人遇到的都是空格不對應(yīng)造成的問題床绪，很是尷尬（可能是使用 template 語法造成的）...
- Memory-fs
在開發(fā)環(huán)境下，由于使用服務(wù)器渲染其弊，自然不能使用 webpack-dev-server癞己，而是要用 webpack-dev-middleware。然而梭伐，webpack-dev-middleware 所創(chuàng)建的文件都是在內(nèi)存里的痹雅，server 就無法讀到 server bundle 文件，這里就要用到 memory-fs 來從內(nèi)存中讀文件糊识。
- KOA 2
用 koa 2 作為服務(wù)器時绩社，在 renderToString 或 renderToStream 時，記得外面要加 await赂苗，否則愉耙，程序就不等組件渲染好，就直接跑下個 middleware 去了拌滋。
(奉勸大家不要用 koa 作 SSR 服務(wù)器朴沿，koa 和 webpack-dev-middleware 天生水土不服，不要問我為什么~??)
- document
在 Server 端渲染時败砂，node 環(huán)境下是沒有 document 對象的赌渣。當(dāng)一個界面的顯示依賴于 document 對象（比如，頁面滾動監(jiān)聽事件）昌犹，那么坚芜，在 node 端運(yùn)行時就會報錯。這時斜姥，有兩個解決的辦法鸿竖。
- 根據(jù)運(yùn)行時的環(huán)境變量，通過添加邏輯來判斷是否依賴 document
- 使用 jsdom mock document 對象（個人偷懶的做法）
當(dāng)然铸敏，從設(shè)計的角度移除對 document 的依賴就最好啦缚忧。
- $root._isMounted：組件中可以用這個參數(shù)來判斷應(yīng)用是否為第一次掛載
完成
這樣當(dāng)瀏覽器請求時，返回的頁面是服務(wù)器渲染之后的搞坝，瀏覽器解析后搔谴，頁面仍就是一個單頁應(yīng)用。
最后桩撮，看效果的戳這里敦第，看代碼的戳這里，原先 SPA 的代碼依舊保留在了 SPA 分支店量。
對 Vue SSR 有興趣的童鞋芜果，一定要看看 vue hackernews 2.0，大神的水準(zhǔn)比我可是高多了融师。
最后的最后右钾，吐槽下 Daocloud，最近老掛我服務(wù)器旱爆，枉我一直為它說好話舀射。
自己寫完，看看感覺好簡單怀伦，為什么還搞了那么久...
常言道：飯不能一日不吃脆烟，博客不能一月不發(fā)...差點(diǎn)就破例了（??
