关于Vue SSR不可不知的问题
本文主要介紹Vue SSR(vue服務端渲染)的應用場景，開發中容易遇到的一些問題，提升ssr性能的方法，以及ssr的安全性問題。
SSR的應用場景
1.SEO需求
SEO（Search Engine Optimization，搜索引擎優化），是一種利用搜索引擎規則，提高網站在搜索引擎內自然排名的技術。通常這需要頁面內容在頁面加載完成時便已經存在。SEO需求的存在與互聯網技術的發展歷程密不可分。在互聯網產生之初，網頁使用超文本鏈接協議，將服務器的信息傳遞給客戶端。而后出現了專門為人們檢索信息的搜索引擎。隨著前端技術的不斷發展，出現了前后端分離的純前端項目，由于這類項目需要頁面加載完成后再異步獲取數據渲染，因此大部分搜索引擎無法獲取到這類項目的內容。Vue SSR正是基于此類需求而給出的一種技術方案。利用nodejs搭建頁面渲染服務，在服務端完成之前需要在客戶端完成的頁面渲染工作，輸出給SEO更友好的頁面。
除Vue SSR方案外，也可以選擇Prerender（https://github.com/prerender/prerender）作為替代方案。Prerender和Vue SSR的相同點是都需要在服務端完成頁面的渲染，不同點在于Prerender采用無界面虛擬瀏覽器Phantomjs去渲染輸出頁面，而Vue SSR是基于vue組件的渲染。相比來說Prerender的通用性更強，任何頁面都適用，而Vue SSR則只適用于vue項目，但由于Vue SSR是基于代碼層面的直接渲染，不需要像Prerender那樣再去拉取靜態資源，因此速度更快。
至于應該使用哪一種技術方案，就要視需求和實際情況取舍了。
2.首屏渲染速度
如在上面SEO需求中提到的，目前前后端的分離的前端項目需要先加載靜態資源，再異步獲取數據，最后渲染頁面，在這個過程中的前兩部頁面都是沒有數據的，影響了首屏的渲染速度，也就影響了用戶的體驗。 目前對于首屏渲染速度的提升有許多方案，在ssr之外還有龍骨，墓碑，數據直出。相比于這些方案ssr方案實現是最復雜的，但效果也是最好的。
下圖是項目使用服務端渲染前后的首屏加載時間對比，可以明顯看出服務端渲染將白屏時間和首屏完成渲染的時間都減少了50%左右。
3.Vue SSR方案的選擇
目前Vue SSR的實現有兩種實現，一種是基于官方Vue SSR指南文檔的官方方案，一種是vue.js通用應用框架--NUXT。 官方方案具有更直接的控制應用程序的結構，更深入底層，更加靈活，同時在使用官方方案的過程中，也會對Vue SSR有更加深入的了解。 而NUXT提供了平滑的開箱即用的體驗，它建立在同等的Vue技術棧之上，但抽象出很多模板，并提供了一些額外的功能，例如靜態站點生成。通過NUXT可以根據約定的規則，快速的實現Vue SSR。
開發中容易遇到的一些問題
1.一套代碼兩套執行環境
vue的生命周期鉤子函數中， 只有?beforeCreate和?created?會在服務器端渲染(SSR)過程中被調用，這就是說在這兩個鉤子函數中的代碼以及除了vue生命周期鉤子函數的全局代碼，都將會在服務端和客戶端兩套環境下執行。如果在兩套環境的代碼中加入具有副作用的代碼或訪問特定平臺的API，將出現各種問題。比如服務端沒有window、document對象， 如果加了對這個對象的引用和操作，將在服務端引起報錯中斷。
因此，總結起來，最容易犯的錯誤就是不判斷環境就去使用window、document對象。
解決方案：
（1）在beforeCreate，created生命周期以及全局的執行環境中調用特定的api前需要判斷執行環境；
（2）使用adapter模式，寫一套adapter兼容不同環境的api。
2.服務端數據的預獲取
官方方案使用Vuex在服務端預獲取數據。 在服務端添加vue鉤子函數，獲取數據后，將數據保存在vuex的store結構中，同時渲染頁面。
?
在數據預獲取階段注冊的鉤子函數中，最好只進行數據的獲取和保存，不進行其他任何涉及this的操作。因為此時的this是服務端的this，是所有用戶共享的this，進行操作將發生一些不可預知的錯誤。
?
舉個例子，比如想在數據預獲取的鉤子函數中操作data數據。 首先，數據預獲取的鉤子函數在運行時還沒有vue的實例，因此根本拿不到關于vue實例的任何東西；其次，進行的存取操作都是在所有用戶的公共變量下進行的，一旦成功進行了存取操作，必然是所有用戶的存取操作。
?
同時需要注意的是，vuex在Vue SSR方案下，應使用惰性注冊的方案。如果不使用惰性注冊方案，而是在一開始vuex初始化實例的時候就把所有的模塊統一注冊，將會出現多個頁面共用許多模塊的問題。
如我們有store模塊如下：
?
則在路由組件內，需要按如下代碼惰性注冊vuex模塊
?
?
總結起來就是，在服務端預獲取數據的鉤子函數中，不要進行額外的操作，任何對于數據的額外操作都要在vuex的體系下進行，vuex在Vue SSR方案下，應使用惰性注冊的方案。
3.接口代理的問題
由于前端平時開發時的接口很多都是線下的，因此需要對于接口的地址進行代理切換。我們平時用的最多的是fiddler和charles等端口代理軟件。但是ssr在數據預獲取時走的是服務端，不是瀏覽器，因此不能通過這兩個工具進行代理。
?
辦法有兩個，一個是修改服務器的host地址，這個方法在開發階段只需要更改本機的host就好，但是在提測階段需要修改服務器的host，如果兩個項目在同一個機器上測試，將不可避免的造成沖突。 第二個方法是使用axios的代理功能，因為axios對于ssr有天然的適配性，因此99%的項目都會用它。而它自帶的proxy功能，可以幫助我們方便的做接口代理。
?
代理配置文件如下：
?
?
代理設置代碼如下：
?
4.cookie穿透
由于客戶端的http請求首先達到SSR服務器，再由SSR服務器去后端服務器獲取相應的接口數據。在客戶端到SSR服務器的請求中，客戶端是攜帶有cookie數據的。但是在SSR服務器請求后端接口的過程中，卻是沒有相應的cookie數據的。因此在SSR服務器進行接口請求的時候，我們需要手動拿到客戶端的cookie傳給后端服務器。這里如果使用是axios，就可以手動設置axios請求的headers字段，達到cookie穿透的目的。
?
5.路由模式
vue有兩種路由模式，一種是hash模式，就是我們經常用的#/hasha/hashb這種，還有一種是history模式，就是/historya/historyb這種。因為hash模式的路由提交不到服務器上，因此ssr的路由需要采用history的方式。
異常處理問題
1.異常來自哪里？
（1）服務端數據預獲取過程中的異常，如接口請求的各種異常，獲取到數據后對數據進行操作的過程中出現的錯誤異常。
（2）在服務端數據預獲取的生命周期結束后的渲染頁面過程中出現的異常，包括各種操作數據的語法錯誤等，如對undefined取屬性。
2.怎么處理異常
（1）官方處理方法
拋出500錯誤頁面，體驗不友好，產品不接受。
（2）目前采用的方法
a.服務端數據預獲取過程中出現的異常，讓頁面繼續渲染，不拋出500異常頁面，打錯誤日志，接入監控。同時，在頁面加入標志，讓前端頁面再次進行一次數據獲取頁面渲染的嘗試。
b.頁面渲染過程的異常。由于目前渲染過程是vue提供的一個插件進行的，異常不好捕獲，同時出現問題的概率不是很大，因此還沒有做專門的處理。
代碼如下：
entry-server.js服務端部分：
?
index.template.html頁面模板部分增加如下js代碼：
entry-client.js客戶端部分：
總結：總結起來一句話，為了更好的體驗，不要出現500。
性能
ssr可以提高首屏加載的速度，減少白屏時間，通過以下設置可以提高性能，減少服務器資源的占用，加快訪問速度。
（1）頁面級別的緩存 將渲染完成的頁面緩存到內存中，同時設置最大緩存數量和緩存時間。 優勢：大幅度提高頁面的訪問速度 代價：增加服務器內存的使用
?
（2）組件級別的緩存 適用：純靜態組件，v-for中循環的子組件
（3）接口級別的緩存
安全
因為做了node服務，因此安全方面也需要考慮。
(1)DDOS攻擊
最基本的DDOS攻擊就是利用合理的服務請求來占用過多的服務資源，從而使合法用戶無法得到服務的響應
應對：
1.提升硬件設備
硬件性能越好，提供的服務并發能力越強，這樣即使有小量的DDOS攻擊也可以不影響正常用戶的訪問。
2.在服務端只做最基本的處理
在服務端不做過多復雜的數據處理，可以有效的提高ssr的性能。
3.日志只打印關鍵部位的關鍵信息
打印日志過多將耗費服務器資源，影響服務器的性能。
4.DDOS流量清洗
部署流量清洗相關設備，可以對網絡中的DDoS攻擊流量進行清除，同時保證正常流量的通過。
5.DDOS軟硬件防火墻
軟件防火墻解決方案為將軟件防火墻部署到被保護的服務器上，優點是成本低、方便、靈活，缺點是作用有限、占用資源。
硬件防火墻解決方案為安裝防火墻硬件，優點是效果好，缺點是成本高。
(2)sql注入
就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令 例如： 游戲pc詳情頁的代碼為http://game.zhuanzhuan.com/detail/1001306437923405830?metric=e32aeb1b742c27af0ec80cef4b51b654
而攻擊者將url替換為http://game.zhuanzhuan.com/detail/select%20*%20from%20user?metric=e32aeb1b742c27af0ec80cef4b51b654
應對：
1.對參數進行校驗
在服務端的entry文件中添加校驗代碼，執行組件的校驗規則
(3)數據泄露
使用vuex的情況下，如果不使用惰性加載，容易造成數據泄露的情況發生。
關于任何需要登錄獲取數據的情況，建議不在服務端進行，只在客戶端進行
?
編輯：千鋒HTML5
作者：ChokCoco
原文：www.cnblogs.com/coco1s/p/8882542.html
總結
以上是生活随笔為你收集整理的关于Vue SSR不可不知的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 谈谈CLOSE_WAIT
- 下一篇： vue遍历Map集合