博客 / 詳情

返回

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 mozhong_5eddab49b9d32 頭像 admim 頭像 huangzhhui 頭像 windysay 頭像 gl115124 頭像 liugongzi 頭像 emtalk_qf 頭像 jacob-gube 頭像 janhuang 頭像 mrqiming 頭像 awood_605c529da06bc 頭像 sukaaa 頭像
12 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.