渲染模式 (Rendering Modes)

Nuxt 4 不僅僅是 SSR 框架。透過強大的 Nitro 引擎，您可以為應用程式中的「每一個路由」單獨設定渲染策略。

通用渲染 (Universal Rendering)

這是 Nuxt 的預設模式。頁面首先在伺服器端渲染 (SSR) 產生 HTML，傳送給瀏覽器以利 SEO 與首屏顯示，接著在客戶端進行「水合 (Hydration)」變為互動式應用。

Request Flow: SSR

Browser

Request

Nuxt Server

Full HTML

Hydration

優點

最佳的 SEO 表現 (搜尋引擎能讀到完整 HTML)。
首屏載入速度快 (FCP)，使用者無需等待 JS 下載即可看到內容。
保留完整的互動性 (Vue 的功能在水合後完全可用)。

客戶端渲染 (CSR)

就像傳統的 Vue SPA。伺服器只回傳一個空的 HTML shell，所有的內容都由 JavaScript 在瀏覽器中渲染。適用於不需要 SEO 的後台管理系統或高度互動的儀表板。

Request Flow: CSR

Browser

Request

Empty Shell

Download JS...

Render

nuxt.config.ts

export default defineNuxtConfig({
  // 全域關閉 SSR
  ssr: false
})

或者針對特定頁面：

app/pages/admin.vue

definePageMeta({
  ssr: false
})

混合渲染 (Hybrid Rendering)

這是 Nuxt 4 最強大的功能。您可以結合 SSR、CSR、SSG、SWR 於同一個專案中。例如：首頁使用 SSR (SEO)，後台使用 CSR (互動)，部落格文章使用 ISR (快取)。

Strategy: SWR (Stale-While-Revalidate)

1. First Request

Generate

Cache it

2. Second Request

Return Cached (Fast)

Even if expired (Stale)

3. Background

Revalidate

Update Cache

SWR

Stale-While-Revalidate

伺服器快取回應。當快取過期時，先回傳「舊 (Stale)」資料給使用者看，同時在背景「重新驗證 (Revalidate)」並更新快取。適合對即時性要求不高的內容 (e.g. 熱門文章列表)。

ISR

Incremental Static Regeneration

類似 SSG (靜態生成)，但可以在部署後按需重新生成靜態頁面，無需重新建置整個網站。適合大型電商或部落格。

路由規則設定

透過 routeRules，您可以精細控制每個路徑的渲染行為。

nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    // 首頁：在建置時預渲染 (SSG)
    '/': { prerender: true },
    
    // 產品頁：SWR 快取 1 小時
    '/products/**': { swr: 3600 },
    
    // Admin 後台：僅客戶端渲染 (CSR)
    '/admin/**': { ssr: false },
    
    // API：啟用 CORS
    '/api/**': { cors: true },
    
    // 舊網址：重新導向
    '/old-page': { redirect: '/new-page' }
  }
})