Nuxt 4 服務端元件：構建混合 SSR 應用

為什麼 Nuxt 4 服務端元件改變了 SSR 遊戲規則

Nuxt 4 在 2026 年正式引入了**原生服務端元件（Server Components）**架構，這不僅僅是 Nuxt 3 SSR 的簡單升級，而是從根本上重新定義了 Vue 生態的渲染模型。服務端元件允許你在服務端完成資料獲取和渲染，將結果以 HTML 流式傳輸到客戶端，客戶端元件僅負責互動邏輯——這種分離讓 SSR 應用的效能天花板被徹底打破。

2026 年 SSR 框架橫向對比

特性	Nuxt 4 Server Components	Nuxt 3 SSR	Next.js RSC	Remix
服務端元件	✅ 原生支援	❌ 僅 SSR	✅ 原生支援	⚠️ Loader 模式
客戶端元件	✅ `.client.vue`	✅ 所有元件	✅ `"use client"`	✅ 預設
零打包體積	✅ 服務端依賴不打包	❌ 全量打包	✅ 服務端依賴不打包	❌ 需手動優化
流式渲染	✅ Streaming SSR	⚠️ 有限支援	✅ Streaming	✅ Deferred
混合渲染	✅ 路由規則級	⚠️ 需手動配置	✅ 路由級	❌ 僅 SSR
ISR/SWR	✅ 內建	⚠️ 需模組	✅ 內建	❌ 需手動
Vue 生態	✅ 原生	✅ 原生	❌ React only	❌ React only
自動匯入	✅	✅	❌	❌
Nitro 引擎	✅ v2	✅ v1	❌	❌

💡 使用 JSON 格式化工具檢查 Nuxt 設定檔，確保 routeRules 和渲染策略設定正確。

服務端元件 vs 客戶端元件：架構深度解析

Nuxt 4 透過檔案命名約定和顯式指令來區分元件型別，這種設計比 Nuxt 3 的隱式 SSR 更加清晰和可控。

元件型別對比

特性	Server Component	Client Component	Shared Component
檔案約定	`.server.vue`	`.client.vue`	`.vue`（預設）
渲染環境	僅服務端	僅客戶端	服務端 + 客戶端
資料獲取	直接存取 DB/API	`useFetch` / `useAsyncData`	`useFetch` / `useAsyncData`
響應式狀態	❌ 無 ref/reactive	✅ ref / reactive / computed	✅ ref / reactive / computed
生命週期	❌ 無 onMounted	✅ onMounted / onUpdated	✅ onMounted / onUpdated
事件處理	❌ 無 @click / @input	✅ 有	✅ 有
依賴打包	不進入客戶端 bundle	進入客戶端 bundle	進入客戶端 bundle
DOM 存取	❌	✅	✅
Suspense	✅ 內建非同步支援	✅	✅

服務端元件範例

<!-- components/ProductList.server.vue -->
<template>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <ProductCard
      v-for="product in products"
      :key="product.id"
      :product="product"
    />
  </div>
</template>

<script lang="ts">
import { db } from '~/server/database'

export default defineComponent({
  async setup() {
    const products = await db.query(
      'SELECT id, name, price, image_url FROM products WHERE status = $1 ORDER BY created_at DESC LIMIT 24',
      ['published']
    )

    return { products }
  }
})
</script>

客戶端元件範例

<!-- components/AddToCart.client.vue -->
<template>
  <button
    class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors"
    :disabled="isLoading"
    @click="handleAddToCart"
  >
    {{ isLoading ? '新增中...' : '加入購物車' }}
  </button>
</template>

<script lang="ts">
export default defineComponent({
  props: {
    productId: { type: Number, required: true },
    productName: { type: String, required: true }
  },
  setup(props) {
    const isLoading = ref(false)
    const cartStore = useCartStore()

    const handleAddToCart = async () => {
      isLoading.value = true
      try {
        await cartStore.addItem({ id: props.productId, name: props.productName })
      } finally {
        isLoading.value = false
      }
    }

    return { isLoading, handleAddToCart }
  }
})
</script>

元件選擇決策流程

元件是否需要使用者互動（click / input / 狀態管理）？
├── 是 → Client Component（.client.vue）
└── 否 → 元件是否需要存取服務端資源（DB / 檔案 / 私有 API）？
    ├── 是 → Server Component（.server.vue）
    └── 否 → 元件是否需要減少客戶端 bundle？
        ├── 是 → Server Component（.server.vue）
        └── 否 → Shared Component（.vue）

Nuxt 4 專案搭建：完整設定

nuxt.config.ts 核心設定

// nuxt.config.ts
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },

  ssr: true,

  routeRules: {
    '/': { prerender: true },
    '/products/**': { swr: 3600 },
    '/blog/**': { isr: 600 },
    '/admin/**': { ssr: false },
    '/api/**': { cors: true },
    '/dashboard': { experimentalNoHydration: true }
  },

  nitro: {
    preset: 'node-cluster',
    compressPublicAssets: { brotli: true },
    cacheDir: '.nitro-cache',
    experimental: {
      wasm: true,
      database: true
    }
  },

  experimental: {
    componentIslands: true,
    viewTransition: true,
    typedPages: true
  },

  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      titleTemplate: '%s - Nuxt4 App'
    }
  },

  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxt/image',
    '@nuxt/fonts'
  ],

  image: {
    quality: 80,
    formats: ['avif', 'webp'],
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280
    }
  }
})

專案目錄結構

nuxt4-app/
├── app/
│   ├── pages/
│   │   ├── index.vue              # 首頁（預渲染）
│   │   ├── products/
│   │   │   ├── index.vue          # 產品列表（SWR）
│   │   │   └── [id].vue           # 產品詳情（SWR）
│   │   ├── blog/
│   │   │   ├── index.vue          # 部落格列表（ISR）
│   │   │   └── [slug].vue         # 部落格詳情（ISR）
│   │   └── admin/
│   │       └── dashboard.vue      # 管理後台（CSR）
│   ├── components/
│   │   ├── ProductList.server.vue # 服務端元件
│   │   ├── ProductCard.vue        # 共享元件
│   │   ├── AddToCart.client.vue   # 客戶端元件
│   │   └── SearchBar.client.vue   # 客戶端元件
│   ├── composables/
│   │   ├── useCart.ts
│   │   └── useAuth.ts
│   ├── layouts/
│   │   └── default.vue
│   └── app.vue
├── server/
│   ├── api/
│   │   ├── products.ts
│   │   └── cart.ts
│   ├── routes/
│   │   └── sitemap.xml.ts
│   ├── middleware/
│   │   └── auth.ts
│   ├── database.ts
│   └── tsconfig.json
├── public/
├── nuxt.config.ts
├── package.json
└── tsconfig.json

資料獲取模式：四種策略完整解析

Nuxt 4 提供了四種資料獲取模式，每種適用於不同場景，理解它們的差異是構建高效能應用的關鍵。

1. useFetch：宣告式資料獲取

<!-- pages/products/index.vue -->
<template>
  <div class="max-w-7xl mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-6">產品列表</h1>

    <div v-if="pending" class="flex justify-center py-12">
      <div class="animate-spin h-8 w-8 border-4 border-blue-600 rounded-full border-t-transparent" />
    </div>

    <div v-else-if="error" class="text-red-600 text-center py-12">
      載入失敗：{{ error.message }}
    </div>

    <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <ProductCard
        v-for="product in data?.items"
        :key="product.id"
        :product="product"
      />
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  setup() {
    const page = ref(1)
    const pageSize = ref(24)

    const { data, pending, error, refresh } = useFetch('/api/products', {
      query: { page, pageSize },
      default: () => ({ items: [], total: 0 }),
      watch: [page],
      dedupe: 'defer'
    })

    return { data, pending, error, refresh, page }
  }
})
</script>

2. useAsyncData：靈活非同步控制

<!-- pages/dashboard.vue -->
<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">資料看板</h1>
    <div class="grid grid-cols-2 gap-4">
      <StatCard label="總使用者" :value="stats?.totalUsers" />
      <StatCard label="總訂單" :value="stats?.totalOrders" />
      <StatCard label="總收入" :value="stats?.totalRevenue" />
      <StatCard label="轉換率" :value="stats?.conversionRate" />
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  async setup() {
    const { data: stats, refresh } = await useAsyncData(
      'dashboard-stats',
      () => $fetch('/api/dashboard/stats'),
      {
        server: true,
        lazy: false,
        dedupe: 'cancel',
        getCachedData(key, nuxtApp) {
          const cached = nuxtApp.payload.data[key]
          if (!cached) return null
          const expirationDate = new Date(cached.fetchedAt)
          expirationDate.setMinutes(expirationDate.getMinutes() + 5)
          if (expirationDate < new Date()) return null
          return cached
        }
      }
    )

    const interval = setInterval(() => refresh(), 30000)
    onUnmounted(() => clearInterval(interval))

    return { stats }
  }
})
</script>

3. 服務端元件直接資料獲取

<!-- components/BlogArchive.server.vue -->
<template>
  <section class="py-8">
    <h2 class="text-2xl font-bold mb-4">文章歸檔</h2>
    <div class="space-y-4">
      <article v-for="post in posts" :key="post.id" class="border-b pb-4">
        <h3 class="text-lg font-semibold">{{ post.title }}</h3>
        <p class="text-gray-600 mt-1">{{ post.excerpt }}</p>
        <time class="text-sm text-gray-400">{{ formatDate(post.publishedAt) }}</time>
      </article>
    </div>
  </section>
</template>

<script lang="ts">
import { db } from '~/server/database'

export default defineComponent({
  async setup() {
    const posts = await db.query(
      'SELECT id, title, excerpt, published_at FROM posts WHERE status = $1 ORDER BY published_at DESC LIMIT 50',
      ['published']
    )

    const formatDate = (date: string) =>
      new Date(date).toLocaleDateString('zh-TW', { year: 'numeric', month: 'long', day: 'numeric' })

    return { posts, formatDate }
  }
})
</script>

4. 混合獲取策略

<!-- pages/products/[id].vue -->
<template>
  <div class="max-w-6xl mx-auto px-4 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <ProductGallery :images="product?.images" />

      <div>
        <h1 class="text-3xl font-bold">{{ product?.name }}</h1>
        <p class="text-2xl text-blue-600 mt-2">NT${{ product?.price }}</p>
        <p class="text-gray-600 mt-4">{{ product?.description }}</p>

        <AddToCart.client
          v-if="product"
          :product-id="product.id"
          :product-name="product.name"
        />

        <LazyProductReviews.client
          v-if="product"
          :product-id="product.id"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  async setup() {
    const route = useRoute()

    const { data: product } = await useFetch(`/api/products/${route.params.id}`, {
      key: `product-${route.params.id}`,
      transform: (data: any) => ({
        ...data,
        price: Number(data.price).toFixed(2),
        images: data.images.map((img: any) => ({
          ...img,
          alt: `${data.name} - 圖片${img.id}`
        }))
      }),
      pick: ['id', 'name', 'price', 'description', 'images']
    })

    useHead({
      title: product.value?.name,
      meta: [
        { name: 'description', content: product.value?.description?.slice(0, 160) },
        { property: 'og:image', content: product.value?.images?.[0]?.url }
      ]
    })

    return { product }
  }
})
</script>

混合渲染策略：路由級精細化控制

Nuxt 4 最強大的特性之一是路由級混合渲染，你可以在同一個應用中為不同路由配置不同的渲染策略。

路由規則完整設定

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 預渲染：建構時生成靜態 HTML
    '/': { prerender: true },
    '/about': { prerender: true },
    '/pricing': { prerender: true },

    // SWR：快取 1 小時，背景重新驗證
    '/products/**': { swr: 3600 },
    '/categories/**': { swr: 1800 },

    // ISR：每 10 分鐘重新驗證
    '/blog/**': { isr: 600 },
    '/docs/**': { isr: 1800 },

    // 純 CSR：完全客戶端渲染
    '/admin/**': { ssr: false },
    '/settings/**': { ssr: false },

    // 無 Hydration：服務端渲染但跳過客戶端激活
    '/landing': { experimentalNoHydration: true },

    // 重定向
    '/old-blog/**': { redirect: '/blog/**' },

    // Headers：安全頭設定
    '/api/**': {
      cors: true,
      headers: {
        'cache-control': 'no-cache',
        'x-api-version': '2026-06'
      }
    }
  }
})

ISR（增量靜態再生）實戰

// server/api/blog/[slug].ts
export default defineEventHandler(async (event) => {
  const slug = getRouterParam(event, 'slug')

  const post = await db.query(
    'SELECT * FROM posts WHERE slug = $1 AND status = $2',
    [slug, 'published']
  )

  if (!post) {
    throw createError({ statusCode: 404, statusMessage: 'Post not found' })
  }

  setResponseHeader(event, 'x-nuxt-isr', '600')

  return post
})

<!-- pages/blog/[slug].vue -->
<template>
  <article class="max-w-3xl mx-auto px-4 py-8">
    <h1 class="text-4xl font-bold mb-4">{{ post?.title }}</h1>
    <time class="text-gray-500">{{ post?.publishedAt }}</time>
    <div class="prose lg:prose-lg mt-6" v-html="post?.content" />
  </article>
</template>

<script lang="ts">
export default defineComponent({
  async setup() {
    const route = useRoute()
    const { data: post } = await useFetch(`/api/blog/${route.params.slug}`, {
      key: `blog-${route.params.slug}`
    })
    return { post }
  }
})
</script>

SWR（過期重驗證）設定

// server/routes/sitemap.xml.ts
export default defineEventHandler(() => {
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>`

  setResponseHeader(event, 'content-type', 'application/xml')
  setResponseHeader(event, 'cache-control', 's-maxage=3600, stale-while-revalidate=86400')

  return sitemap
})

Edge Rendering 邊緣渲染

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-pages',
    routeRules: {
      '/api/geolocation': {
        cache: {
          swr: 60,
          varies: ['x-forwarded-for']
        }
      }
    }
  }
})

// server/api/geolocation.ts
export default defineEventHandler((event) => {
  const country = getRequestHeader(event, 'cf-ipcountry') || 'TW'
  const city = getRequestHeader(event, 'cf-ipcity') || 'Unknown'

  return {
    country,
    city,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    currency: country === 'TW' ? 'TWD' : 'USD'
  }
})

效能優化：生產級調優策略

1. 元件 Islands 架構

<!-- app.vue -->
<template>
  <NuxtIsland name="Header" />
  <NuxtPage />
  <NuxtIsland name="Footer" />
</template>

<!-- components/Header.server.vue -->
<template>
  <header class="bg-white shadow-sm sticky top-0 z-50">
    <nav class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
      <NuxtLink to="/" class="text-xl font-bold">MyApp</NuxtLink>
      <NavLinks :links="navigation" />
    </nav>
  </header>
</template>

<script lang="ts">
import { getNavigation } from '~/server/navigation'

export default defineComponent({
  async setup() {
    const navigation = await getNavigation()
    return { navigation }
  }
})
</script>

2. 智慧預獲取與預渲染

<!-- components/SmartLink.vue -->
<template>
  <NuxtLink
    :to="to"
    :prefetch="shouldPrefetch"
    :prefetch-on="prefetchOn"
  >
    <slot />
  </NuxtLink>
</template>

<script lang="ts">
export default defineComponent({
  props: {
    to: { type: String, required: true },
    priority: { type: String, default: 'low' }
  },
  setup(props) {
    const shouldPrefetch = computed(() => props.priority !== 'none')
    const prefetchOn = computed(() => ({
      visibility: true,
      interaction: props.priority === 'high'
    }))

    return { shouldPrefetch, prefetchOn }
  }
})
</script>

3. 圖片優化與懶載入

<!-- components/OptimizedHero.vue -->
<template>
  <section class="relative h-[60vh] overflow-hidden">
    <NuxtImg
      src="/hero.jpg"
      alt="首頁橫幅"
      width="1920"
      height="1080"
      format="avif"
      quality="80"
      loading="eager"
      :modifiers="{ gravity: 'center' }"
      class="absolute inset-0 w-full h-full object-cover"
    />
    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
    <div class="relative z-10 flex items-end h-full p-8">
      <h1 class="text-4xl md:text-6xl text-white font-bold">{{ title }}</h1>
    </div>
  </section>
</template>

4. 服務端快取策略

// server/api/products/index.ts
export default defineCachedEventHandler(
  async (event) => {
    const page = Number(getQuery(event).page) || 1
    const pageSize = 24

    const products = await db.query(
      'SELECT id, name, price, image_url FROM products WHERE status = $1 ORDER BY created_at DESC LIMIT $2 OFFSET $3',
      ['published', pageSize, (page - 1) * pageSize]
    )

    return { items: products, page, pageSize }
  },
  {
    maxAge: 60 * 5,
    swr: 60 * 60,
    varies: ['page'],
    getKey: (event) => `products:${getQuery(event).page || 1}`
  }
)

5. Payload 提取與優化

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    payloadExtraction: true
  },

  hooks: {
    'build:manifest': (manifest) => {
      const criticalRoutes = ['/', '/products', '/blog']
      for (const route of criticalRoutes) {
        manifest.routes[route]?.preload?.push('components/CriticalSection.vue')
      }
    }
  }
})

5 個常見陷阱與解決方案

陷阱 1：在服務端元件中使用客戶端 API

<!-- ❌ 錯誤：服務端元件不能使用 ref -->
<template>
  <div>{{ count }}</div>
</template>

<script lang="ts">
export default defineComponent({
  setup() {
    const count = ref(0) // ❌ 服務端元件不支援 ref
    return { count }
  }
})
</script>

<!-- ✅ 正確：拆分為服務端 + 客戶端元件 -->
<!-- components/Counter.client.vue -->
<template>
  <div class="flex items-center gap-4">
    <button class="px-3 py-1 bg-gray-200 rounded" @click="count--">-</button>
    <span class="text-xl font-bold">{{ count }}</span>
    <button class="px-3 py-1 bg-gray-200 rounded" @click="count++">+</button>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  setup() {
    const count = ref(0)
    return { count }
  }
})
</script>

解決方案：服務端元件負責資料獲取和靜態渲染，互動邏輯抽取到 .client.vue 元件中。

陷阱 2：服務端元件向客戶端元件傳遞不可序列化資料

<!-- ❌ 錯誤：傳遞 Date / Map / Set 等不可序列化物件 -->
<template>
  <ChartDisplay.client :data="chartData" />
</template>

<script lang="ts">
export default defineComponent({
  async setup() {
    const chartData = await fetchChartData() // 包含 Date 物件
    return { chartData }
  }
})
</script>

解決方案：在傳遞前將不可序列化資料轉為純 JSON 物件。

const chartData = await fetchChartData()
const serialized = JSON.parse(JSON.stringify(chartData))
return { chartData: serialized }

陷阱 3：過度使用客戶端元件導致 Hydration 膨脹

問題：將所有元件標記為 .client.vue，導致客戶端 bundle 體積與 Nuxt 3 無差異。

解決方案：遵循「預設服務端，按需客戶端」原則。靜態內容、資料展示、SEO 關鍵區域優先使用服務端元件。

陷阱 4：ISR 設定與快取失效不同步

問題：ISR 的 isr 時間設定過長，內容更新後使用者看到過期資料。

解決方案：對高頻更新內容使用較短 ISR 時間 + 手動快取清除 API。

// server/api/cache/purge.ts
export default defineEventHandler(async (event) => {
  const { tags } = await readBody(event)
  await useStorage('cache').del(tags.map((t: string) => `nitro:functions:${t}`))
  return { purged: tags }
})

陷阱 5：忽略 Streaming SSR 的 Suspense 邊界

問題：不使用 <Suspense> 包裹非同步元件，導致整個頁面等待最慢的元件。

解決方案：為每個非同步區域設定獨立的 Suspense 邊界。

<template>
  <div class="grid grid-cols-3 gap-6">
    <Suspense>
      <template #default>
        <ProductList.server />
      </template>
      <template #fallback>
        <SkeletonLoader :rows="6" />
      </template>
    </Suspense>

    <Suspense>
      <template #default>
        <CategoryList.server />
      </template>
      <template #fallback>
        <SkeletonLoader :rows="4" />
      </template>
    </Suspense>

    <Suspense>
      <template #default>
        <RecentReviews.server />
      </template>
      <template #fallback>
        <SkeletonLoader :rows="5" />
      </template>
    </Suspense>
  </div>
</template>

10 個錯誤排查指南

#	錯誤資訊	原因	解決方案
1	`Hydration mismatch`	服務端與客戶端渲染結果不一致	檢查 `.client.vue` 是否依賴瀏覽器 API，使用 `<ClientOnly>` 包裹
2	`500 - Server component cannot use ref/reactive`	服務端元件使用了響應式 API	移除響應式程式碼，或拆分為 `.client.vue`
3	`Cannot read property of null (reading 'params')`	在非頁面元件中使用 `useRoute().params`	改用 props 傳遞參數，或使用 `useFetch` 的 `key` 選項
4	`Cache key collision`	多個 `useFetch` 使用相同 key	為每個請求設定唯一的 `key`，如 `product-${id}`
5	`ISR content not updating`	ISR 快取未失效	呼叫快取清除 API，或縮短 `isr` 時間
6	`Nitro preset not found: cloudflare-pages`	Nitro 預設未安裝	安裝 `nitro-cloudflare` 依賴，檢查 Nitro 版本
7	`Component island slot serialization error`	Island 元件 slot 包含不可序列化內容	確保 slot 內容為純 HTML/文字，避免傳遞複雜物件
8	`useAsyncData called outside setup`	在非 setup 上下文呼叫 composable	確保在 `setup()` 或 `<script setup>` 頂層呼叫
9	`Route rule not applying`	路由規則路徑與實際路由不匹配	檢查 `routeRules` 中的 glob 模式是否與 `pages/` 目錄一致
10	`Streaming SSR timeout`	非同步元件執行時間超過 Nitro 超時限制	優化資料查詢效能，或在 Nitro 設定中增加 `maxDuration`

Nuxt 4 Server Components vs Next.js RSC 對比

維度	Nuxt 4 Server Components	Next.js RSC
框架生態	Vue 3 + Nuxt	React + Next.js
元件區分	`.server.vue` / `.client.vue`	`"use server"` / `"use client"`
資料獲取	`useFetch` / `useAsyncData` / 直接 DB	`fetch()` / 直接 DB / Server Actions
流式渲染	`<Suspense>` + Streaming SSR	`<Suspense>` + Streaming SSR
快取策略	`routeRules` + Nitro cache	`revalidate` + `fetch` cache
ISR	內建 `isr` 路由規則	`revalidate` 匯出
SWR	內建 `swr` 路由規則	`staleTimes` 設定
邊緣部署	Nitro 多 preset（CF/Vercel/Deno）	Vercel Edge / 自訂
自動匯入	✅ 元件 + composables + utils	❌ 需手動 import
檔案路由	✅ 自動生成	✅ App Router 自動生成
TypeScript	✅ 型別化路由 + composables	✅ 型別化路由
Server Actions	`server/api/` 目錄	`"use server"` 函式
學習曲線	中等（Vue 開發者友善）	中高（需理解 RSC 邊界）
Bundle 優化	服務端依賴零打包	服務端依賴零打包
社群規模	快速成長中	成熟龐大

💡 使用 Base64 編解碼工具對 API 金鑰等敏感設定進行安全編碼，使用 Hash 計算工具驗證建構產物的完整性。