ssr的意思是服務端渲染,前端還沒有流行的時候,之前的網站是在服務端拼接HTML字符串,將其返回呈現在頁面
vue ssr主要是解決以下兩個問題:
1.seo
SEO和爬蟲都是根據url返回的數據來進行的,所以我們需要用戶請求url的時候,返回的是有數據填充的的頁面,spa應用查看網頁源代碼,也就是爬蟲seo獲取的數據,是一個沒有數據的殼子
2.首屏渲染
像vue這樣的單頁面應用,首屏渲染是單頁面spa的通病,打包出來的dist過大,會導致首屏加載緩慢
vue ssr優點:
vue ssr做的是在頁面中請求url的時候,會從服務端渲染返回一個渲染好的html字符串,將首屏所需要的數據異步請求,填充發到前端展示,而不是發一個殼子,ssr是一份代碼運行在兩個環境里面(服務端、客戶端),服務端先運行好之后,把模板渲染成html頁面,然后返回給前端,前端再載入js文件,完成激活,后續的操作就是spa了,這樣第一個頁面是服務端渲染的帶數據的,seo爬蟲就能獲取到數據,同時因為首屏只渲染一個頁面,后續激活spa是發生在瀏覽器端,首屏渲染問題也得到解決。
vue ssr缺點:
在配置過程中比較復雜,需要配置兩個入口文件,一個是服務端首屏渲染所需要的,第二個是前端激活所需要的,有nuxt.js可以更容易實現ssr
相比於單純的spa,服務端渲染加重了服務器的負擔,當用戶量多的時候,因為需要在后端創建全新的vue實例,所以比單純請求數據浪費性能。
雖然 Vue 的服務器端渲染(SSR)相當快速,但是由於創建組件實例和虛擬 DOM 節點的開銷,無法與純基於字符串拼接的模板的性能相當。在 SSR 性能至關重要的情況下,明智地利用緩存策略,可以極大改善響應時間並減少服務器負載,對組件頁面接口進行緩存。
前后端同構,在后端就需要寫前端vue的代碼,與前后端分離相違背,這個可以通過webpack打包實現,只需要配置入口文件以及相應的邏輯就可以。
緩存和運維的問題。
應用場景:
並不是所有的網站都需要SEO,比如企業內部網站,后天管理系統等。
一些vue老項目,重構成本太大,首屏渲染可以通過路由懶加載,按需加載的方式,修改對應的問題,不全盤扳倒重寫。
在服務器返回結果之前,可以做處理判斷是否是爬蟲,來決定進行預渲染