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-CN', { 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">¥{{ 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') || 'CN'
  const city = getRequestHeader(event, 'cf-ipcity') || 'Unknown'

  return {
    country,
    city,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    currency: country === 'CN' ? 'CNY' : '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 计算工具验证构建产物的完整性。