關於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的狀況下，若是不使用惰性加載，容易形成數據泄露的狀況發生。

關於任何須要登陸獲取數據的狀況，建議不在服務端進行，只在客戶端進行

做者：ChokCoco

原文：www.cnblogs.com/coco1s/p/8882542.html