對 Vue-SSR的了解和使用場景

定義

SSR解決方案，後端渲染出完整的dom結構傳回，前端拿到的内容包括首屏和spa結構，應用激活後按照spa方式運作，這種頁面渲染方式被稱為服務端渲染（server side render）

官網上對此ssr的定義

Vue.js 是建構用戶端應用程式的架構。預設情況下，可以在浏覽器中輸出 Vue 元件，進行生成 DOM 和操作 DOM。然而，也可以将同一個元件渲染為伺服器端的 HTML 字元串，将它們直接發送到浏覽器，最後将這些靜态标記"激活"為用戶端上完全可互動的應用程式。

伺服器渲染的 Vue.js 應用程式也可以被認為是"同構"或"通用"，因為應用程式的大部分代碼都可以在服務端和用戶端運作。

通俗解釋

vue的元件是基于vnode的，整個html結構用js的vnode對象樹來表達，那麼服務端可以通過解析js對象樹，在服務端提前生成具有實際表達作用的html字元串，在用戶端(浏覽器中)每次資料變化的時候通過新舊vnode對象樹的對比用diff算法(vue diff算法不了解的可以去搜尋一下)去尋找更新最小最優的變化集合，然後再去更新實際的dom。

關鍵點

代碼可以在用戶端運作，也可以在服務端運作，服務端渲染通俗來說就是先在服務端運作，在服務端生成html結構并傳回給用戶端，接下裡繼續由用戶端代碼去完成互動。

解決的問題

• seo：搜尋引擎優先爬取頁面HTML結構，使用ssr時，服務端已經生成了和業務想關聯的HTML，有利于seo
• 首屏呈現：使用者無需等待頁面所有js加載完成就可以看到頁面視圖（壓力來到了伺服器，是以需要權衡哪些用服務端渲染，哪些交給用戶端）

缺點

• 複雜度
• 庫的支援性，代碼相容
• 性能問題，每個請求都是n個執行個體的建立，不然會污染，消耗會變得很大
  • 緩存 node serve 、 nginx判斷目前使用者有沒有過期，如果沒過期的話就緩存，用剛剛的結果。
  • 降級：監控cpu、記憶體占用過多，就spa，傳回單個的殼
• 伺服器負載變大，相對于前後端分離務器隻需要提供靜态資源來說，伺服器負載更大，是以要慎重使用（比如一整套圖表頁面，相對于服務端渲染，可能使用者不會在乎初始加載的前幾秒，可以交由用戶端使用類似于骨架屏，或者懶加載之類的提升使用者體驗。）

使用場景（什麼時候用）

• seo、首屏速度
  • 如果沒有必要性的話，可以用預渲染插件（例如：pre-renderer）
• 已經存在的項目，改造起來工程量比較大
  • 1.考慮用爬蟲工具，比如puppeteer，讓它直接從spa項目中爬出結果
  • 2.判斷目前的請求是不是爬蟲，浏覽器引擎；如果是内部使用者的花直接把spa給它
• 全新項目 。用架構級别的例如： nuxt.js