Nuxt vs Vue

Vue 是一個用於構建客戶端應用程式的框架，預設情況下 Vue 組件將以客戶端渲染 （Client Side Rendering，簡稱 CSR） 方式在瀏覽器中生成 DOM。

Nuxt 是一個基於 Vue 的服務端渲染（Server-Side Rendering，簡稱 SSR） 和靜態網站生成 （Static Site Generation，簡稱 SSG） 框架，目的是解決 Vue 以 CSR 產生頁面不利於 搜尋引擎最佳化（Search Engine Optimization，簡稱 SEO） 的問題。

如果你只是要開發內部系統或是簡單的小型專案等不需要考慮 SEO 的情況那用 Vue 就夠了，反之，如果是要開發企業形象網站、活動網頁或是部落格等非常需要 SEO 的網站那 Nuxt 就是非常好的選擇。

關於 CSR、SSR、SSG 的詳細運作原理已經有很多人介紹過了，這邊就不再贅述，有興趣可以參考以下文章：

• CSR、SSR、SSG:你需要知道的三種網頁渲染方式
• Day03 - 深入淺出 CSR、SSR 與 SSG

根據 Vue 官方文件介紹，SSR 有三個好處：

1. 更快的速度：SSR 的內容不需要等待所有 JavaScript 下載並執行完畢才能顯示，因此使用者可以更早看到完全呈現的頁面。此外，對於，初始資料是在 server 端產生的，通常 server 與 database 之間的連接速度較快，能有效改善 Core Web Vitals 指標、提供更好的使用者體驗。
2. 統一心智模型：使用相同的語言和基於元件的思維模式來開發整個網站，而不需要在後端和前端框架之間來回切換。
3. 更好的 SEO：搜尋引擎爬蟲可以直接看到完全呈現的頁面，有助於提高網站在搜尋引擎結果中的排名。

有得必有失，也有一些其他需要考慮權衡的因素：

1. 開發限制：瀏覽器特定的程式碼只能在某些 lifecycle hooks 內使用，某些外部函式庫可能需要特殊處理才能在 SSR 的框架中執行。
2. 更複雜的建置設定和部署需求：與可以部署在任何靜態檔案伺服器上的完全靜態單頁應用程式（SPA）不同，SSR 的網站需要一個能運行 Node.js 伺服器的環境。
3. 更多伺服器端負載：在 Node.js 中呈現整個網站將比僅提供靜態網站更加消耗 CPU 資源，因此，如果預期高流量，應該準備好相應的伺服器負載，並使用快取策略。

當然，Nuxt 也提供 SSG 建置方式，如果網站內容不會頻繁更動如產品形象網站，只需要建置過程中渲染一次生成靜態檔案，就可以比 SSR 降低 Server 負擔而且能更簡單的部屬，也能跟 SSR 有一樣好的 SEO。

總之，要用 Vue 還是 Nuxt 開發端看需求決定，如果你正在尋找 SSR 的框架或已經有使用 Vue 的經驗，Nuxt 絕對值得一試。

🌞 Upcoming

接下來將會介紹幾個 Nuxt 重要的核心功能概念，幫助大家在實作前更了解 Nuxt。

參考資料：

Vue.js Server-Side Rendering
CSR、SSR、SSG:你需要知道的三種網頁渲染方式
Day03 - 深入淺出 CSR、SSR 與 SSG