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