Vue.js服務端渲染方案概述

針對Vue-SPA架構的技術棧，目前方案大概分爲四種：

1.前端爬蟲模版

在div#app內製定爬蟲檢索內容，將站點想要暴露的關鍵內容都整理在div#app內，爬蟲軟件不論檢索任意路由，獲取的都是此容器內內容，待前端渲染結束後再覆蓋此div#app內容便可。

優勢：簡單，改動小

缺點：

①模版內容與實際站點內容可能無關，模版內容需單獨整理，且展現內容有限；

②模版爲靜態內容，異步數據沒法抓取；

③會出現頁面抖動的狀況，需代碼處理抖動狀況。

此法是我查閱泰嶽語義工廠（http://www.nlpai.cn/）線上站點時發現

2.網關轉發

此法，將用戶瀏覽頁面和爬蟲抓取頁面進行區分對待，經過網關獲取http user-agent字段，判斷是實際用戶仍是爬蟲軟件，若是是實際用戶則返回實際前端頁面，若是是爬蟲軟件，則進行轉發，轉發的目的地能夠是普通的靜態文件服務器（靜態頁面），也能夠是應用服務器（後端渲染頁面）。

優勢：可任意定製爬蟲抓取內容；

缺點：

①改動較大，需先後端支持；

②存在「詐騙」嫌疑，可能會受到搜索引擎懲罰；

3.預渲染（Prenrending）prerender-spa-plugin+vue-meta

爲若干頁面輸出靜態內容，可供爬蟲軟件抓取，其他頁面仍採用SPA方案；

優勢：改動工做量適中；

缺點：

①預渲染頁面必須是靜態頁面，數據沒法異步加載；

②爬蟲抓取內容較第一種方案增多，但仍是有限；

4.服務端渲染（SSR）

這兩種方案整體思路是差很少的，在某些技術細節上實現思路不太同樣，都是使用Vue+Vuex+webpack+node.js+Express（也可以使用其餘框架）+webpack，具體原理及技術各自官網都有詳盡描述，這裏再也不贅述。

（1）vue-server-renderer vue官網插件

https://ssr.vuejs.org/zh/

（2）Nuxt.js vue-ssr總體解決方案

https://zh.nuxtjs.org/

優勢：能完全解決SEO問題，是最佳方案；

缺點：改動都很大，vue-server-renderer適用於SPA改造，可是改造工做量也很大，如若採用nuxt，最好一開始技術選型就要使用，否則改動太大；

我的這段時間使用體驗來講，nuxt開發體驗更佳，更成熟，是一套總體解決方案，推薦新項目採用此技術方案，使用此方案可搭配node+express，簡單的後臺需求也可以使用此技術棧實現。