SSR

前後端分離後單頁面應用盛行，出現了服務端渲染的說法，其能更好的SEO

什麼是服務器端渲染 (SSR)

• 服務器將組件和獲取到的數據解析生成html字符串，發送給客戶端。過程同之前的php、java等的全棧開發，使用模板引擎，獲取數據後解析爲html字符串後，發到客戶端展現。
• 服務器渲染的 Vue.js 應用程序，可以同時在服務器和客戶端上運行。

爲什麼使用服務器端渲染 (SSR)

• 更好的 SEO
  Google 和 Bing 可以很好對同步 JavaScript 應用程序進行索引。
• 更快的內容到達時間 (time-to-content)
  無需等待所有的 JavaScript 都完成下載並執行。

服務器端渲染 vs 預渲染 (SSR vs Prerendering)

少數營銷頁面（例如 /, /about, /contact 等）的 SEO，預渲染。

Nuxt.js通用應用框架

一個基於 Vue.js 的服務端渲染應用框架

流程圖

雙模式

編譯後同時生成客戶端和服務端代碼

• url訪問地址，服務端渲染後發給客戶端
  ************************************************************************************************************
• 頁面中nuxt-link標籤跳轉，客戶端渲染。history模式，無刷新跳轉（同單頁應用路由跳轉）
  

函數	服務端	路由更新	觸發時間	其它
nuxtServerInit	觸發	不觸發		store/index.js中設置
asyncData	觸發	觸發	組件加載之前被調用	融合data返回
fetch	觸發	觸發	渲染頁面前被調用	填充（store）數據

注意事項

• 需要服務端渲染的數據使用asyncData獲取
• vue生命週期中獲取的數據會保持客戶端渲染（如下mounted中獲取）