Nuxt.js小試牛刀

為什麼要用Nuxt？

• SEO

我們需要搜索引擎更多地抓取到我們的內容，更詳細地認識到我們的網頁結構，而不是僅對首頁或特定靜態頁進行索引。

題外話：第三方的解決方案

可以建立HTTP一個中間層，在判斷到訪問來源是蜘蛛時，輸出已緩存好的html數據，此數據若不存在，則調用第三方服務對html進行緩存，往複進行。

另一方法是自行構建蜘蛛渲染邏輯，當識別UA為搜索引擎時，拿服務端已準備好的模板和數據進行渲染輸出html數據，反之，則輸出SPA應用代碼。

弊端：需要針對蜘蛛編寫一套獨立的渲染模板，因為大部分情況下SPA的代碼是沒法直接在服務端使用的，搜索引擎若檢測到蜘蛛抓取數據和真實訪問數據不一致，會做降權懲罰，也就意味著渲染模板還必須和SPA預期輸出一模一樣。

• 用戶體驗

當用戶網路比較慢、或者帶寬比較差的時候，通過減少頁面請求數量，來保證儘快看到基本的內容。但是避免強制用戶下載整個單頁面應用，也遠沒有下載個單獨的預先渲染過的HTML文件性能高。

Nuxt是什麼？

• pages：各頁面組件，用於生成對應路由，支持嵌套，支持動態路由
• components：各組件，用於你自己管理公共組件或非公共組件
• layouts：宿主布局頁面模板組件，用於你可以把不同的頁面指定使用不同的布局
• assets：用於webpack編譯的各類資源，通常是一些小的資源，如代替雪碧圖之類的圖片等東西
• middleware：中間件，首屏渲染和路由跳轉前均執行對應中間件（登錄態校驗等），可以返回promise或直接next（很實用！）
• plugins：插件，SPA中用的各類第三方組件和一些node模塊都可以在這引入，甚至可以引入自己編寫的第三方庫
• store：內置了vuex，可以直接返回數據模塊或返回一個自建vuex根對象，具體要翻文檔

路由（Routing）

常用的有這幾種：Basic Dynamic Nested

Nuxt封裝了路由的生成，你不需要額外編寫路由，pages文件夾下的結構，會自動生成對應的路由。

從源碼可以看到，路由的生成主要是在lib/build.js裡面處理的，大致步驟如下：

1. 通過glob獲取pages下所有文件，得到數組
2. 過濾掉pages和.vue等不相關的字元串
3. 對帶有_符號進行處理
4. 處理動態路由和嵌套路由
5. 對子路由排序

非同步數據（Async Data）

支持Promise async/await callback

在組件結構中，其屬於宿主layout下的子組件，不屬於頁面組件，無法使用頁面組件中的fetch方法，官方的解釋是子組件無法使用阻塞非同步請求，即：子組件得到的非同步數據無法用於服務端渲染，這對於程序是合理的，避免異常阻塞，簡化業務模型。

如果需要這些非同步數據增強站內內鏈SEO，我們可以巧妙地使用內置vuex中的nuxtServerInit這個API，這個API實在nuxt程序實例化之後第一次執行的方法，其內部返回一個promise，我們可以在這裡完成我們站內的所有子組件非同步請求，隨後將數據映射至對應子組件即可。

另外的方法是在mounted 方法去調用非同步數據。

註：在這個data方法裡面，我們獲取不到 this指針，因為data方法在組件初始化之前就已經被調用了。

指令（Commands）

這裡有一篇文章講的很不錯 深入NUXT，看看一條命令行的背後到底發生了什麼

下面主要來看下nuxt generate這個指令，大致步驟如下：

1. 遍歷路由
2. 調用renderRoute函數，得到html字元串
3. 處理壓縮
4. 寫入文件

踩到的坑

Nuxt版本：0.9.6

• 沒有一個CDN配置入口
• build的主css和js使用hash後，引用的時候直接把[hash]當成字元串，如下所示：
• 把Nuxt當做中間件使用的時候，沒有了req.session，用戶數據只能從cookie獲取，但是在服務端渲染時還沒有window
• 每個組件加上name，對路由跳轉有好處

NUXT 能為我們做什麼

• 就是我們無需為了路由劃分而煩惱，你只需要按照對應的文件夾層級創建 .vue 文件就行
• 無需考慮數據傳輸問題，nuxt 會在模板輸出之前非同步請求數據（需要引入 axios 庫），而且對 vuex 有進一步的封裝
• 內置了 webpack，省去了配置 webpack 的步驟，nuxt 會根據配置打包對應的文件

SSR on Vue

Vue 基於 NUXT 的 SSR

SSR on React

React 提供了兩個方法 renderToString 和 renderToStaticMarkup 用來將組件（Virtual DOM）輸出成 HTML 字元串，這是 React 伺服器端渲染的基礎，它移除了伺服器端對於瀏覽器環境的依賴，所以讓伺服器端渲染變成了一件有吸引力的事情。

SUMMARY

使用Nuxt框架的時候還是0.9.6的版本，框架本身還有很多地方需要優化，網上的文檔資源基本沒有，所以也只能踩一個坑補一個坑，大部分時間都是看在看源碼，改源碼。

在這個過程中也發現自身對於原生JS還是沒吃透，一直在跟著業務走，需求又很趕，很多時候都是拿來主義，追求能解決問題，而很少花時間去深究問題的本質，這給我們一定的警示。

Nuxt目前來講還沒看到大型項目在使用，感覺這個框架也只是比較適用於輕量級的，偏展示型的網站。

以上~