基於VUE的伺服器端渲染（SSR）

Wrightlt發表於2018-05-09
Vue伺服器

什麼是伺服器端渲染（SSR）

伺服器端渲染(以下稱為SSR)：網頁通常是通過後端路由直接給客戶端的。也就是說網頁的html一般是後端伺服器裡通過模板引擎渲染好後再交給前端的。

對於其他的效果，則是由預先寫在頁面裡的jq，bootstrap等常見的前端框架去完成的。

什麼是前端渲染

以VUE為例，我們檢視生產環境的頁面的html原始碼，會得到如下的樣子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="xxxx.xxx.js"></script>
  <script type="text/javascript" src="yyyy.yyy.js"></script>
  <script type="text/javascript" src="zzzz.zzz.js"></script>
</body>
</html>
複製程式碼

其實，這個就是瀏覽器從伺服器端拿到的html。這裡只有空的 <div id="app"></div> 入口，以及一系列的js。其實，我們看到的頁面就是由這些js渲染出來的，這就是 前端渲染

SSR VS 前端渲染

名稱 SSR 前端渲染
優點 有利於SEO
對安全性要求高的頁面採用SSR更保險
 很大程度上緩解了伺服器端的壓力
可以做到無縫的頁面切換體驗
缺點 耦合性太強
jq時代的頁面不好維護
切換頁面出現白屏等		 SEO不友好

為什麼要用SSR

  • 更好的 SEO, 由於搜尋引擎爬蟲抓取工具可以直接檢視完全渲染的頁面。
  • 更快的內容到達時間（time-to-content）,特別是對於緩慢的網咯情況或執行緩慢的裝置。無需等待所有的JavaScript

使用SSR需要權衡之處

  • 開發條件限制。一些瀏覽器特定的程式碼，只有在生命週期的某些鉤子函式中使用；一些外部擴充套件庫，可能需要特殊處理，才能在伺服器端渲染程式中執行。
  • 涉及構建和部署的更多要求。SSR需要處於Node.js Server執行環境。
  • 更多的伺服器端負載。

什麼時候使用SSR

  • 主要取決於內容到達時間（time-to-content）對應用的重要程度。當內容到達時間（time-to-content）要求是絕對關鍵的指標時，就可以用SSR來實現最佳的初始載入效能。

SSR VS 預渲染

  • 預渲染： 無需使用web伺服器動態編譯HTML，在構建事簡單的生成針對特定的路由的靜態HTML檔案
  • 何時使用預渲染：只是用於改善少數營銷頁面的SEO。
  • 優點：設定簡單，並可以將前端作為完全靜態的站點。

參考連結：

相關文章