本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀

提到 Nuxt.js，必須先從 Vue.js 說起，Vue.js 為專注在視圖層（View）的 Javascript 框架，為 SPA（Single Page Application）單頁應用程式，搜尋引擎爬蟲未能抓取到渲染後的 HTML 內容，因此 SEO（Search Engine Optimization）表現趨近於零。

而 Nuxt.js 是基於 Vue.js 的框架，為通用渲染模式（Universal Rendering），結合了 SSR（Server Side Render）及 CSR（Client Side Render），搜尋引擎爬蟲可以取得 HTML 內容，大幅提升 SEO 表現。

SPA / CSR vs MPA / SSR

SPA（Single Page Application）單頁式應用

使用 CSR（Client Side Render）用戶端渲染模式。整個網站應用只有單一 HTML 頁面，一但頁面被載入進來後，就不會再進行該頁面請求（Form Request），而是透過 AJAX 從後端請求資料，並透過 Javascript 動態更新與渲染網頁內容。

• 優點： 使用者體驗佳，因每次切換頁面時只有部分畫面更新，不會重新載入整個頁面
• 缺點： 搜尋引擎爬蟲未能抓取到渲染後的 HTML 內容，因此 SEO（Search Engine Optimization）表現趨近於零

MPA（Multi Page Application）多頁式應用

使用 SSR（Server Side Render）伺服器端渲染模式。在頁面載入前即渲染，每次跳轉頁面，瀏覽器都會重新向伺服器發送頁面請求，由伺服器回傳頁面的 HTML 內容。

• 優點： 在伺服器上生成完整的 HTML 頁面，首次內容繪製（FCP，First Contentful Paint）速度快，且搜尋引擎爬蟲可以取得完整 HTML 內容，SEO 表現佳
• 缺點： 使用者體驗較差，因每次切換頁面都要重新刷新頁面，且對伺服器負擔較大

Universal Rendering

通用渲染，Nuxt.js 使用的渲染模式，同時支援 SSR 與 CSR 技術，初次進到頁面時採用 SSR 模式，在伺服器中產生完整 HTML 內容，回傳給瀏覽器端。後續動態切換頁面時，則採用 CSR 模式，結合了 SSR 與 SPA 的優點，除了使用者體驗佳，同時保有良好的 SEO 表現。

圖片參考：Nuxt 官網

流程：

1. 伺服器端產生靜態 HTML，回傳給瀏覽器端
2. 瀏覽器端載入 JavaScript 並執行
3. Hydration 混合渲染完成，使用者可以開始與網頁互動

Hydration 混合渲染：
在用戶端使用 JavaScript，讓伺服器端產生的靜態 HTML 加上 Event Handlers（事件處理器），讓使用者能與網頁進行互動的技術，Nuxt.js 跟 React 框架 Next.js 即使用此技術

Nuxt3 簡介

• 使用 Vue3 開發
• 完整 SSR 支援，也可以選用 CSR 模式
• 自動定義路由（使用 Vue-Router），不需手動配置
• 支援 webpack 5 與 Vite 開發（預設搭配 Vite）
• 完整支援 TypeScript
• 定義在 composables、components、plugins 的檔案，Nuxt 會自動引入（Auto-imports）
• 內建支援 SSR 的 AJAX 請求方法（$fetch、useFetch、useAsyncData）

Nuxt or Vue

Vue.js SPA 架構使用者體驗佳，如果專案為後台系統，或是不需要 SEO，選擇 Vue.js 開發相對單純。

Nuxt.js 是基於 Vue.js 開發的框架，適合已經有 Vue.js 或其他 JavaScript 框架使用經驗的開發者，如果專案需要良好的 SEO 表現，推坑 Nuxt.js，安裝方式簡單、自動化繁瑣的步驟，提供很不錯的開發體驗。

本次參賽預計分享菜單如下，後續會補上連結

• D1：Nuxt.js vs Vue.js，淺談 SPA 與 SSR
• D2：Nuxt.js 3.x 專案架設
• D3：Nuxt.js 3.x 目錄結構 Directory Structure
• D4：Nuxt.js 3.x ESLint 程式碼規範與自動排版－搭配 TypeScript
• D5：Nuxt.js 3.x Stylelint SCSS 程式碼檢查與自動排版
• D6：Nuxt.js 3.x Pages 目錄－自動生成路由
• D7：Nuxt.js 3.x Components 目錄－建立共用元件
• D8：Nuxt.js 3.x Layouts 目錄－自訂模板
• D9：Nuxt.js 3.x Composables vs Utils 目錄－自訂共用方法
• D10：Nuxt.js 3.x Plugins 目錄－搭配第三方套件
• D11：Nuxt.js 3.x Middleware 目錄－監聽路由變化
• D12：Nuxt.js 3.x Assets vs Public 目錄－靜態資源管理
• D13：Nuxt.js 3.x API 請求方法－$fetch、useAsyncData、useFetch
• D14：Nuxt.js 3.x Server 目錄－建立 API
• D15：Nuxt.js 3.x Server API 整合 MongoDB 實作，邁向全端第一步
• D16：Nuxt.js 3.x Meta Tags 與 SEO 搜尋引擎優化
• D17：Nuxt.js 3.x 自訂 Loading 效果
• D18：Nuxt.js 3.x 搭配 CSS Framework－以 Bootstrap 5 為例
• D19：Nuxt.js 3.x 狀態管理 State Management (1)－useState
• D20：Nuxt.js 3.x 狀態管理 State Management (2)－Pinia
• D21：Nuxt.js 3.x 狀態管理 State Management (3)－Pinia Plugin Persistedstate 維持狀態
• D22：Nuxt.js 3.x 導入 I18n 實作多國語系
• D23：Nuxt.js 3.x 替網站增加 Sitemap 網站地圖
• D24：Nuxt.js 3.x 套件應用－VeeValidate v4.x 表單驗證
• D25：Nuxt.js 3.x 套件應用－CKEditor 5 文字編輯器
• D26：Nuxt.js 3.x 套件應用－Swiper 製作輪播動畫
• D27：Nuxt.js 3.x 自訂 Error Page 與錯誤處理
• D28：Nuxt.js 3.x 將靜態網站部署到 GitHub Pages
• D29：Nuxt.js 3.x Universal（SSR）專案部署到 Firebase
• D30：Nuxt.js 3.x 筆記：總結與感想

參考資源：
https://nuxt.com/docs/guide/concepts/rendering#universal-rendering
https://shubo.io/rendering-patterns/