Nuxt.js(二、解決首屏速度與SEO)

1.普通的Vue SPA初始化加載速度很慢

在傳統的web應用中，當用戶請求一個頁面時，服務器直接返回一個html文件，瀏覽器直接渲染出來。但是，在vue應用中，這個過程則可能比您所希望的要慢，特別是在網速較慢的情況下。它的步驟如下：

1. 當用戶初始請求任何的頁面時，服務端都會返回引索頁index.html
2. 第二步瀏覽器需要下載vue相關的Javascript文件
3. vue引擎初始化並運行
4. vue路由到相應的頁面並加載相關的組件
5. 執行組件內的javascript,獲取api數據
6. 瀏覽器渲染模板到用戶端，用戶看到首屏
7. 之后用戶在切換到應用的其他頁面中時，瀏覽器只會下載該頁面相關的javascript,然后直接渲染

一旦vue初始化之后，web應用后續的運行就會非常快，但是初始化加載可能會很慢

2.nuxt的解決方案：universal mode

讓我們來看看nuxt的universal mode是怎么初始化的，它的步驟如下：

1. 當用戶初始請求某個頁面時，服務端會在服務端直接渲染好這個頁面，然后直接返回page.html
2. 瀏覽器渲染page.html模板到用戶端,用戶可以很快的看到首屏進入應用
3. 然后瀏覽器需要下載vue相關的Javascript文件
4. vue引擎初始化並運行
5. vue將接管初始化的page.html，並與之耦合，使得應用接下來的運行回到正常的步驟上
6. 之后用戶在切換到應用的其他頁面中時，瀏覽器只會下載該頁面相關的javascript,然后直接渲染，這樣就回到了原始的應用中

如您所見，在初始化任何JavaScript之前都會先渲染新頁面（首屏）。一旦下載JavaScript並運行Vue，頁面就會“耦合”，這基本上意味着它會變成一個普通的SPA（單頁應用程序）。

3.nuxt的智能預讀取

Nuxt 2.4中發布了Nuxt.js的一個新特性，稱為智能預讀取，它與universal mode相結合，提供了更好的用戶體驗。

使用此功能（默認情況下已啟用），當nuxt-link路由在視口中可見時（即頁面滾動到路由入口元素時），Nuxt.js將自動下載 鏈接目標頁面所需要的javascript。當單擊路由調整時，JavaScript已經將目標組件准備好了，目標頁幾乎立刻渲染呈現，而不是等待組件下載。

4.vue-meta

vue SPA應用對SEO不友好，我們都知道，vue構建的頁面依賴於加載要呈現的JavaScript。因此我們的SPA應用會有以下的一些問題：

1. 搜索爬蟲程序可能不支持抓取JavaScript的功能。
2. Google是唯一一個嘗試渲染JavaScript的引擎。
3. 一個JavaScript錯誤可能導致整個站點沒有被索引。
4. 如果你的頁面太慢，可能根本就沒有索引。
5. 客戶端渲染的JS網站歷史排名並不高。

一張網頁相對於搜索引擎最重要的兩個標簽

1<title> the Title </title>
2<meta name='description' content='the description'>
3//當你搜索某一關鍵詞時，頁面顯示方式如下圖

為了管理頁面的這些頭部信息，nuxt引入了vue-meta來完成這一功能，這個是一個獨立的插件，它也可以在nuxt外使用,而且vue meta支持ssr，在nuxt universal mode中可以直接在服務端渲染中完成header信息的更新，你的頁面組件上vue-meta配置看起來將會是這樣：

 1head() {
 2    return {
 3        title: 'the about page',
 4        meta: [
 5            {
 6                hid: 'description',
 7                name: 'description',
 8                content: 'the about description'
 9            }
10        ]
11    }
12}

---