Next.js非fetch获取数据时如何触发按需重新验证？

方法1：客户端触发页面刷新（简单直接） #

在Client Component的POST请求完成后，使用Next.js的router.refresh()方法触发Server Component重新渲染，从而重新执行getData()获取最新数据。

步骤：

• 在Client Component中导入useRouter：

  'use client'
  import { useRouter } from 'next/navigation'
  
  export default function DashboardButton() {
    const router = useRouter()
  
    const handleSubmit = async () => {
      // 发送POST请求
      const res = await fetch('/api/update-dashboard', {
        method: 'POST',
        body: JSON.stringify({ /* 提交的数据 */ })
      })
      if (res.ok) {
        // 触发页面刷新，Server Component会重新执行getData()
        router.refresh()
      }
    }
  
    return <button onClick={handleSubmit}>更新数据</button>
  }
  

• 确保仪表盘页面/组件为动态渲染：如果页面默认是静态的，可在页面组件顶部添加export const dynamic = 'force-dynamic'，保证router.refresh()能触发服务端重新取数。

方法2：使用缓存标签实现按需重验证（更高效，无需全页刷新） #

如果不想全页刷新，可以给getData()添加缓存标签，通过API路由触发重验证，结合React Suspense让Server Component自动更新数据。

步骤1：给getData()添加缓存标签 #

用Next.js的unstable_cache（虽标注unstable，但已被广泛用于生产环境，后续会正式稳定）包裹数据库查询函数，指定缓存标签：

import { unstable_cache } from 'next/cache'
import db from '@/lib/db' // 你的数据库连接实例

// 给getData添加缓存和自定义标签
const getData = unstable_cache(
  async () => {
    // 你的数据库查询逻辑（比如用Prisma、MongoDB驱动等第三方库）
    const data = await db.dashboardData.findMany()
    return data
  },
  ['dashboard-data-cache-key'], // 区分不同缓存的唯一键
  { tags: ['dashboard'] } // 自定义标签，用于后续触发重验证
)

export default async function DashboardServerComponent() {
  const data = await getData()
  return <div>{/* 渲染仪表盘数据 */}</div>
}

步骤2：创建重验证API路由 #

在app/api/revalidate/route.js中创建API路由，用于接收客户端的重验证请求：

import { revalidateTag } from 'next/cache'
import { NextResponse } from 'next/server'

export async function POST(request) {
  const { tag } = await request.json()
  if (!tag) {
    return NextResponse.json({ error: 'Tag参数必填' }, { status: 400 })
  }
  revalidateTag(tag)
  return NextResponse.json({ revalidated: true, time: Date.now() })
}

步骤3：客户端触发重验证 #

在Client Component的POST请求完成后，调用上述API路由，Server Component会自动重新获取最新数据：

'use client'

export default function DashboardButton() {
  const handleSubmit = async () => {
    // 先发送更新数据的POST请求
    const updateRes = await fetch('/api/update-dashboard', {
      method: 'POST',
      body: JSON.stringify({ /* 提交的数据 */ })
    })
    if (updateRes.ok) {
      // 触发指定标签的缓存重验证
      await fetch('/api/revalidate', {
        method: 'POST',
        body: JSON.stringify({ tag: 'dashboard' })
      })
      // 此时Server Component会自动重新渲染最新数据
    }
  }

  return <button onClick={handleSubmit}>更新数据</button>
}

关于第三方库取数的按需重验证 #

你提到的第三方库取数场景，确实Next.js原生fetch的标签重验证不适用，但通过unstable_cache可以给任意异步数据获取逻辑（包括第三方ORM、数据库驱动）添加缓存和标签，从而实现按需重验证。只要把第三方库的查询逻辑包裹在unstable_cache中并指定tags，就能用revalidateTag触发缓存失效，让Server Component重新获取最新数据。

内容的提问来源于stack exchange，提问作者Makazau