Next.js 13.2 app目录下如何通过onClick触发服务器组件重验证？

App Router（React Server Components/Server Actions） #

• 借助Server Actions结合revalidateTag精准刷新指定标签的数据：

  'use server';
  import { revalidateTag } from 'next/cache';
  
  export async function refreshTargetData() {
    revalidateTag('user-data'); // 需与数据请求时标记的tag一致
  }
  

  前端客户端组件调用：

  'use client';
  import { refreshTargetData } from '@/actions';
  
  export default function RefreshBtn() {
    return (
      <button onClick={async () => await refreshTargetData()}>
        刷新用户数据
      </button>
    );
  }
  

• 若无需精准控制，可直接用router.refresh()强制刷新页面所有服务器组件数据：

  'use client';
  import { useRouter } from 'next/navigation';
  
  export default function FullRefreshBtn() {
    const router = useRouter();
    return (
      <button onClick={() => router.refresh()}>
        刷新全部数据
      </button>
    );
  }
  

Pages Router #

• 通过路由跳转当前页面触发重验证：

  import { useRouter } from 'next/router';
  
  export default function RefreshBtn() {
    const router = useRouter();
    return (
      <button onClick={() => router.replace(router.asPath, undefined, { scroll: false })}>
        刷新数据
      </button>
    );
  }
  

• 也可通过API路由调用res.revalidate()：

  // pages/api/revalidate.js
  export default async function handler(req, res) {
    if (req.method !== 'POST') {
      return res.status(405).json({ msg: '仅支持POST请求' });
    }
    try {
      await res.revalidate('/profile'); // 指定要重验证的页面路径
      return res.json({ revalidated: true });
    } catch (err) {
      return res.status(500).send('重验证失败');
    }
  }
  

  前端点击时调用该API：

  export default function APIRefreshBtn() {
    const handleRefresh = async () => {
      const res = await fetch('/api/revalidate', { method: 'POST' });
      const data = await res.json();
      if (data.revalidated) window.location.reload();
    };
    return <button onClick={handleRefresh}>刷新页面数据</button>;
  }
  

注意事项 #

使用revalidateTag时，需要在数据请求阶段给请求打上对应标签，示例：

async function fetchUserData() {
  const res = await fetch('https://api.example.com/user', {
    next: { tags: ['user-data'] }
  });
  return res.json();
}

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