一、Nuxt 作用
1、Nuxt 其一目的是為了解決單頁面應用的SEO問題，相比於我們平常的 SPA 頁面。在搜索引擎中由於無法從網頁中被抓取內容信息(SPA頁面的信息都是被打包到JS文件中,動態加載到頁面中)，從而無法被用戶所搜索到。
2、其二是服務端渲染相比於SPA頁面渲染，在網絡環境較差或者客戶端運行在沒有JavaScript的引擎上，這時基於 SSR渲染的頁面能更好的展現原有的頁面的內容，而單頁面應用可能就會有很長的空白時間，從而影響到用戶的體驗。
二、Nuxt 應用架構
1、第一步：客戶端先向服務端請求數據
2、第二步：服務端再從API服務器獲取數據
3、第三步：服務端返回完整HTML頁面給客戶端
4、第四步：客戶端頁面渲染（使用SPA）
5、第五步：此后客戶端就直接請求API服務器獲取數據，然后使用 SPA 渲染頁面
三、模式選擇 - SPA/Universal
通過命令行創建項目時，必須在生成 Universal 模式或 SPA 模式應用程序之間進行選擇。
模式切換：
// Universal
nuxt -u // SPA
nuxt -s
如build命令：nuxt build -s 或 nuxt build -u
1、SPA 模式介紹
在普通的Web應用程序中，當用戶請求 http://myapp.com/about-us 時，服務器正常返回 about-us.html
如圖，在單頁應用程序中，任何路由請求將會執行如下操作：
- 下載index.html
- 下載Vue應用程序JavaScript
- 初始化Vue應用
- 初始化
Vue Router並路由到適當的組件 - 進行API調用以獲取要呈現的數據
- 渲染頁面
SPA應用初始加載速度可能很慢，一旦加載完成后，速度很快
2、Universal(SSR/SSG)模式
對於 Vue/React 來說，對於它們的 SSR/SSG 框架出現的原因就是主要就是 SEO 和首屏加載速度
（1）SSR(服務端渲染)
如上圖，使用Universal模式，任何路由請求(未啟動Vue)將會執行如下操作：
- 瀏覽器請求服務端頁面
- 服務端在服務端渲染請求的頁面，如果此時有需求請求的數據，則向 API 服務器請求數據，然后再利用數據渲染成請求的頁面，返回給瀏覽器端
- 瀏覽器得到新頁面，並顯示新頁面
- 瀏覽器新頁面再請求所需的JavaScript文件、CSS文件等資源
- 最后啟動Vue，頁面基本變成了常規的SPA，此后路由交互就跟 SPA 一樣了，需要渲染數據就直接從 API 服務器獲取數據了。
SSR 之后的路由切換 （SPA流程）
如上圖，在瀏覽器中啟動Vue之后，路由操作如下：
- 發出了一個JavaScript請求，以僅繼承呈現
/about-us頁面組件所需的JavaScript - 進行API調用以獲取要呈現的數據
- 渲染頁面
（2）SSG(靜態網站渲染)
靜態網站渲染是在構建時執行的，當發出請求時，直接將html發送回客戶端
（3）SSR 與 SSG 對比
通常來說，靜態網站渲染在運行時會更快，因為不需要服務端做處理，但缺點是對數據的任何更改都需要在服務端進行完全重建；