Nuxt.js是一個(gè)基于Vue.js、Node.js、Webpack和Babel.js的免費(fèi)且開放源碼的web應(yīng)用架構(gòu),該框架被宣傳為“通用應(yīng)用程序的元框架”。這里使用術(shù)語“通用”,其含義是該框架的目標(biāo)是使用戶能夠利用熟悉的Vue.js單文件組件系統(tǒng)在JavaScript中創(chuàng)建Web視圖,該系統(tǒng)既可以作為瀏覽器內(nèi)單頁面應(yīng)用程序(SPA)視圖,以及服務(wù)器呈現(xiàn)的Web視圖,然后(在服務(wù)器呈現(xiàn)之后“rehydrated”到完整的SPA功能。
此外,該框架使用戶能夠在服務(wù)器上完全預(yù)呈現(xiàn)內(nèi)容或部分內(nèi)容,并以靜態(tài)站點(diǎn)生成器的方式提供服務(wù)。
除了其他原因之外,與SPA相比,這種方法的好處是減少了交互時(shí)間和改進(jìn)了SEO,因?yàn)樵趫?zhí)行任何客戶端JavaScript之前,Web服務(wù)器正在讓每個(gè)頁面的內(nèi)容完整顯示出來。另外,可以保持傳統(tǒng)服務(wù)器端呈現(xiàn)的HTML頁面的優(yōu)點(diǎn),以及改進(jìn)的SPA的交互性和高級(jí)用戶界面。
Nuxt.js框架本身的核心優(yōu)勢(shì)在于它使這些應(yīng)用程序的配置和設(shè)置簡(jiǎn)化并且無縫地應(yīng)用于程序開發(fā)人員,后者可以簡(jiǎn)單地開發(fā)應(yīng)用程序的UI部分,就像它是一個(gè)更常見的Vue.js單個(gè)文件一樣使用。
為什么要用Nuxt.js
Nuxt.js 是一個(gè)基于Vue.js的通用應(yīng)用框架,預(yù)設(shè)了利用Vue.js開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置。可以將html在服務(wù)端渲染,合成完整的html文件再輸出到瀏覽器。
原因其實(shí)不用多說,就是利用Nuxt.js的服務(wù)端渲染能力來解決Vue項(xiàng)目的SEO問題。
vue單頁面應(yīng)用渲染是從服務(wù)器獲取所需js,在客戶端將其解析生成html掛載于id為app的DOM元素上,這樣會(huì)存在兩大問題。
-
由于資源請(qǐng)求量大,造成網(wǎng)站首屏加載緩慢,不利于用戶體驗(yàn)。
-
由于頁面內(nèi)容通過js插入,對(duì)于內(nèi)容性網(wǎng)站來說,搜索引擎無法抓取網(wǎng)站內(nèi)容,不利于SEO。
Nuxt.js 官網(wǎng)
-
GitHub上的Nuxt.js