要了解Nuxtjs之前,需先從Vuejs說起。Vuejs是一個專注於視圖層的 Javascript框架,用於建立單頁應用程式(SPA,Single Page Application)。
在SPA架構中,使用者首次訪問網站時會下載一個HTML文件和所有的JavaScript 資源,之後的頁面切換和更新都是透過JavaScript動態完成,這樣的設計可以減少頁面重新載入的次數,進而提升使用者體驗。
不過,SPA架構也存在一個主要缺點:搜尋引擎爬蟲只會讀取HTML,不會執 行JavaScript。因此,可能會導致動態產生的內容無法被正確索引,影響網站在搜尋引擎上的表現。
Nuxtjs是基於Vuejs的框架,預設使用通用渲染模式(UniversalRendering), 結合了伺服器端渲染(SSR,Server-SideRendering)和客戶端渲染(CSR, Client-SideRendering)的優點。透過在伺服器端生成完整的HTML內容並回傳給瀏覽器,讓搜尋引擎爬蟲可以取得較完整的HTML內容,以改善SPA架構下SEO成效不佳的問題。
一言以蔽之,這框架旨在解決 Web SPA 開發中的以下挑戰:
1) 改善初始頁面載入時間
2) 加強搜尋引擎優化 (SEO)
3) 簡化 SSR 應用程式的開發流程
4) 提供伺服器端和客戶端渲染之間的平順過渡