動態

詳情 返回 返回

Vue.js與Nuxt.js的區別 - 動態 詳情

Vue.js與Nuxt.js都是前端的兩個框架,Vue.js的項目屬於單頁應用,而Nuxt.js是基於Vue.js的服務端渲染通用框架。

單頁應用簡稱SPA,指的是前端代碼將會在瀏覽器端被瀏覽器渲染。這對SEO優化不利,搜索引擎爬蟲,會爬到空的網頁。在Vue項目中,Vue會將JS交給瀏覽器渲染

image.png
因此,結果是查看源代碼沒有別的東西,搜索引擎爬蟲也基本只能看到這些,於是便直接下一個了,不會等你渲染。

而服務端渲染,簡稱SSR,正是該問題的解決方案。前端代碼會先在Node.js服務端渲染,然後再交給瀏覽器進行“二次渲染”。Nuxt.js則是Vue.js的SSR通用解決方案。前端代碼經過服務端渲染後,能讓搜索引擎爬蟲看到完整的網站,同時查看源代碼也能看到完整的代碼。

服務端渲染能提高網站渲染速度,降低白屏時間。同時,因為要同時運行Node.js服務端,這增加了服務器的負載。在Nuxt.js中,可以設置部分頁面SSR,部分頁面則是SPA,這樣能降低服務器的資源耗費。對於靜態網站,可以使用預渲染替代服務端渲染。

預渲染,簡稱SSG,指提前渲染靜態的html,提高頁面響應。SSG一般適用於文檔、個人博客等場景,即數據不會經常性發生變化的場景。SSG同樣有利於SEO優化,同時不需要同時運行多一個服務端,降低了服務器的負荷。Nuxt.js中同樣可以設置SSG,你可以根據自己的需求,將不同頁面分別設置為SSR頁面、SPA頁面、SSG頁面。

user avatar wanglizhi_5dd4059a702d2 頭像 laoduan 頭像 yujiaao 頭像 kip_67231fa160bbc 頭像 xingzoudedahuoji 頭像 754582231 頭像 zjkal 頭像 yanwushu 頭像 _kysou 頭像 jkdataapi 頭像 guanguans 頭像 0xboo 頭像
點贊 17 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.