介紹
Nuxt.js是一個基于Vue.js的通用應(yīng)用框架妈倔。
Nuxt.js是使用Webpack和Node.js進(jìn)行封裝的基于Vue的SSR框架，使用它厉碟，你可以不需要自己搭建一套SSR程序匪凡，而是通過其約定好的文件結(jié)構(gòu)和API就可以實(shí)現(xiàn)一個首屏渲染的Web應(yīng)用严衬。
首先巡李，Nuxt.js是一個Node程序抚笔，就像上面說的，我們是要把Vue跑在服務(wù)端侨拦，所以必須使用Node環(huán)境殊橙。我們對Nuxt.js應(yīng)用的訪問，實(shí)際上是在訪問這個Node.js程序的路由狱从，程序輸出首屏渲染內(nèi)容+用以重新渲染的SPA的腳本代碼膨蛮，而路由是由Nuxt.js約定好的pages文件夾生成的。所以整體上季研，Nuxt.js通過各個文件夾和配置文件的約束管理我們的程序敞葛，而不失擴(kuò)展性，其有自己的插件機(jī)制训貌。
作為框架制肮，Nuxt.js為客戶端/服務(wù)端這種典型的應(yīng)用架構(gòu)模式提供了許多有用的特性，例如異步數(shù)據(jù)加載递沪、中間件支持豺鼻、布局支持等。
Nuxt.js框架是如何運(yùn)作的款慨？
Nuxt.js集成了以下組件/框架儒飒，用于開發(fā)完整而強(qiáng)大的Web應(yīng)用：Vue2、Vue-Router檩奠、Vuex桩了、Vue-Meta，另外Nuxt.js使用Webpack和vue-loader埠戳、babel-loader來處理代碼的自動化構(gòu)建工作(如打包井誉、代碼分層、壓縮等等)整胃。
特性
- 基于Vue.js
- 自動代碼分層
- 服務(wù)端渲染
- 強(qiáng)大的路由功能颗圣，支持異步數(shù)據(jù)
- 靜態(tài)文件服務(wù)
- ES6/ES7語法支持
- 打包和壓縮JS和CSS
- HTML頭部標(biāo)簽管理
- 本地開發(fā)支持熱加載
- 集成ESLint
- 支持各種樣式預(yù)處理器：SASS、LESS屁使、Stylus等等
- 支持HTTP/2推送
靜態(tài)化(預(yù)渲染)
支持Vue.js應(yīng)用的靜態(tài)化算是Nuxt.js的一個創(chuàng)新點(diǎn)在岂，通過nuxt generate命令實(shí)現(xiàn)。
該命令依據(jù)應(yīng)用的路由配置將每一個路由靜態(tài)化成為對應(yīng)的HTML文件蛮寂。
靜態(tài)化可以讓你在任何一個靜態(tài)站點(diǎn)服務(wù)商托管你的Web應(yīng)用蔽午。
我們不希望每次更新部署docs倉庫的時(shí)候都要手工執(zhí)行nuxt generate命令生成靜態(tài)文件，它會觸發(fā)Netlify的鉤子應(yīng)用：
1.克隆nuxtjs.org repository
2.使用npm install命令安裝依賴
3.運(yùn)行npm run generate
4.生成dist目錄
我們現(xiàn)在就有了一個無服務(wù)端的自動靜態(tài)化的Web應(yīng)用酬蹋。
我們進(jìn)一步考慮下電商應(yīng)用的場景及老，利用nuxt generate抽莱，是不是可以將應(yīng)用靜態(tài)化后部署在CDN服務(wù)器上，每當(dāng)一個商品的庫存發(fā)生變化時(shí)骄恶，就重新靜態(tài)化岸蜗，更新下商品的庫存。但是如果用戶訪問的時(shí)候恰巧更新了呢叠蝇？我們可以通過調(diào)用電商的API，保證用戶訪問的是最新的數(shù)據(jù)年缎。這樣相對于傳統(tǒng)的電商應(yīng)用來說悔捶，這種靜態(tài)化的方案可以大大節(jié)省服務(wù)器的資源。
Nuxt.js主要是用來解決首屏問題和瀏覽器seo問題
問題：哪一些配置屬于服務(wù)端渲染
注釋(1)Vue-Meta：
在Vue SPA(單頁面應(yīng)用)中单芜，如果想要修改HTML頭部標(biāo)簽蜕该，比如修改頁面標(biāo)題、在頭部中引入外部js文件或許會在代碼中這么寫：
// 修改title
document.title = '褐摒康電商'
// 引入外部js
let s = document.createElement('script')
s.setAttribute('src', './vConsole.js')
document.head.appendChild('s')
....
上面的代碼都是用來修改HTML頭部堂淡，我們感覺代碼會有點(diǎn)麻煩，所以引入Vue-Meta來管理頭部代碼會更加方便扒腕。
參考文章：https://segmentfault.com/a/1190000012849210
注釋(2)SSR(服務(wù)端渲染)：
簡單理解是將組件或頁面通過服務(wù)器生成html字符串绢淀，再發(fā)送到瀏覽器結(jié)合css顯示頁面，最后將靜態(tài)標(biāo)記"混合"為客戶端上完全交互的應(yīng)用程序瘾腰。
SSR的優(yōu)勢和劣勢：
優(yōu)勢
1.更利于首屏渲染
首屏的渲染是node發(fā)送過來的html字符串皆的，并不依賴于js文件，這就會使用戶更快的看到頁面的內(nèi)容蹋盆。
2.時(shí)間耗時(shí)更少
由于是服務(wù)端請求首屏數(shù)據(jù)费薄，而不是客戶端請求首屏數(shù)據(jù)，這是快的一個主要原因栖雾±懵眨客戶端渲染是等瀏覽器加載js代碼、css析藕、圖片等文件召廷，解析完成后再請求數(shù)據(jù)渲染，等待的時(shí)間比較長噪径，用戶體驗(yàn)不好柱恤。服務(wù)端渲染是先向后端服務(wù)器請求數(shù)據(jù)，將數(shù)據(jù)和 HTML 融合后返回給瀏覽器找爱，之后結(jié)合css顯示頁面梗顺，不需要等待js代碼下載完成并請求數(shù)據(jù)，就可以返回一個已有完整數(shù)據(jù)的首屏頁面车摄。
3.更利于SEO（搜索引擎優(yōu)化）
SEO：搜索引擎優(yōu)化寺谤，它是指通過各種技術(shù)(手段)來確保你的Web內(nèi)容被搜索引擎最大化被爬取仑鸥，最大化提高權(quán)重，帶來更多流量变屁。流量是變現(xiàn)的快車道眼俊，SEO是低成本獲取流量的最佳方法。目前大部分的搜索引擎僅能抓取URI直接輸出的數(shù)據(jù)資源粟关，對于Ajax類的異步請求的數(shù)據(jù)無法爬取疮胖，Google除外，它有自己的技術(shù)支持闷板。
使用MVVM框架之后澎灸，頁面大多數(shù)DOM元素都是在客戶端根據(jù)js動態(tài)生成，可供爬蟲抓取分析的內(nèi)容大大減少遮晚，另外瀏覽器爬蟲不會等到我們的數(shù)據(jù)完成之后再去抓取我們的頁面數(shù)據(jù)性昭。服務(wù)端渲染返回給客戶端的是已經(jīng)獲取了異步數(shù)據(jù)并執(zhí)行js腳本的最終HTML，網(wǎng)絡(luò)爬蟲就可以抓取到完整頁面的信息县遣。
劣勢
1.服務(wù)端壓力較大
本來是通過客戶端完成渲染糜颠，現(xiàn)在統(tǒng)一到服務(wù)端node服務(wù)去做。尤其是高并發(fā)訪問的情況萧求，會大量占用服務(wù)端CPU資源其兴。
2.開發(fā)條件受限
在服務(wù)端渲染中，只會執(zhí)行到componentDidMount之前的生命周期鉤子饭聚，因此項(xiàng)目引用的第三方的庫也不可用其它生命周期鉤子忌警，這對引用庫的選擇產(chǎn)生了很大的限制。
3.學(xué)習(xí)成本相對較高
除了對webpack秒梳、React要熟悉法绵，還需要掌握node、Koa2等相關(guān)技術(shù)酪碘。相對于客戶端渲染朋譬，項(xiàng)目構(gòu)建、部署過程更加復(fù)雜兴垦。
注意：上面提到只有首屏用了服務(wù)器端渲染徙赢，后面的頁面還是異步數(shù)據(jù)渲染邏輯。
參考文章：http://www.reibang.com/p/10b6074d772c
注釋(3)熱刷新和熱加載：
熱刷新：文件內(nèi)部改動后探越，整個頁面刷新狡赐，不保留任何狀態(tài)(比如輸入過內(nèi)容的input表單)，相當(dāng)于webpack幫你摁了F5刷新钦幔。
熱加載：文件內(nèi)部改動后枕屉，以最小的代價(jià)改變被改變的區(qū)域。盡可能保留改動文件前的狀態(tài)鲤氢。
注釋(4)自動代碼分層：
分層思想是應(yīng)用系統(tǒng)最常見的一種架構(gòu)模式搀擂，我們會將系統(tǒng)橫向切割西潘，根據(jù)業(yè)務(wù)職責(zé)劃分，比如MVC分成模型層哨颂、視圖層喷市、控制層。將頁面和業(yè)務(wù)邏輯分離威恼，提高應(yīng)用的可擴(kuò)展性以及可維護(hù)性品姓。
注釋(5)搜索引擎：
注釋(6)搜索引擎和SPA、SSR：
搜索引擎的基礎(chǔ)爬蟲的原理就是抓取你的url箫措，然后獲取你的html源代碼并解析缭黔。而你的頁面通常用了vue等js的數(shù)據(jù)綁定機(jī)制來展示頁面數(shù)據(jù)，爬蟲獲取到的html是你的模型頁面而不是最終數(shù)據(jù)的渲染頁面蒂破，所以說用js來渲染數(shù)據(jù)對seo并不友好。https://segmentfault.com/q/1010000009369779
參考文章：https://juejin.im/post/58ff960ba22b9d0065b722cd
http://www.reibang.com/p/6516f2a3ce36
