Day 18 - Rendering Modes | Re:Nuxt

Nuxt 提供三種渲染模式，可針對不同頁面選擇最適合的渲染策略。

1 核心概念

Nuxt 主要有三種模式，透過 nuxt.config.ts 中的 routeRules 可以針對「單一頁面」設定：

Universal Rendering (SSR) - 預設值

原理：Server 先跑一次算出 HTML 回傳，瀏覽器接手變成 SPA。

優點：SEO 最好，首屏速度快。

缺點：伺服器需要運算成本。

設定：ssr: true

Client-Side Rendering (CSR / SPA)

原理：Server 只給一個空殼 HTML，由瀏覽器的 JavaScript 畫出內容。

優點：伺服器超省力（只丟靜態檔），體驗像 App。

缺點：SEO 差（爬蟲看到白的），手機效能差的跑不動。

設定：ssr: false

Static Site Generation (SSG)

原理：在「打包時 (Build Time)」就把 HTML 產生好。

優點：速度最快（不用算），可部署到 GitHub Pages。

設定：prerender: true

2 給 Claude Code 的中文指令本課重點

我們要建立兩個長得一模一樣的頁面，一個用 SSR，一個強制轉成 SPA (CSR)，然後透過「檢視原始碼」來親眼見證差異。

請幫我設定混合渲染模式 (Hybrid Rendering) 來測試差異：

建立 app/pages/render/ssr.vue：
- 內容顯示 <h1>這是 SSR 模式</h1>。
- 顯示一段隨機數字或時間：{{ new Date().toISOString() }}。
建立 app/pages/render/spa.vue：
- 內容跟上面完全一樣，只是標題改成 <h1>這是 SPA 模式</h1>。
修改 nuxt.config.ts：
- 加入 routeRules 設定。
- 針對 /render/spa 路徑，設定 { ssr: false }。
- (註：/render/ssr 不用設，因為預設就是 true)。
修改首頁，加入這兩個頁面的連結。

3 驗收重點

這堂課的驗收不能只用眼睛看，必須看背後的程式碼：

測試 A：SSR 頁面 (標準 Nuxt)

點擊進入 /render/ssr。
右鍵 → 檢視網頁原始碼 (View Page Source)。
搜尋「這是 SSR 模式」。

結果：你找得到這行字，也看得到那個時間字串。這代表伺服器已經把飯煮好了端給瀏覽器 (SEO 滿分)。

測試 B：SPA 頁面 (純用戶端)

點擊進入 /render/spa。
右鍵 → 檢視網頁原始碼。
搜尋「這是 SPA 模式」。

結果：你找不到這行字！你只會看到一堆 <script> 標籤和 <div id="__nuxt"></div>。這代表伺服器只給了盤子，飯是瀏覽器自己煮的 (SEO 0分，但伺服器輕鬆)。

💡 架構師筆記

Nuxt 3/4 最強大的功能就是 routeRules。以前你只能全站 SSR 或全站 SPA。現在你可以這樣規劃：

首頁、部落格文章

ssr: true (為了 SEO)。

會員後台、購物車

ssr: false (不需要 SEO，減輕伺服器負擔)。

關於我們、條款

prerender: true (永遠不會變，存成靜態檔最快)。

範例設定：

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { ssr: true },
    '/dashboard/**': { ssr: false },
    '/about': { prerender: true }
  }
})

Re:Nuxt