NextJS中如何从客户端触发服务端数据重载？

方法1：使用 revalidateTag（推荐方案） #

如果你的服务端数据是通过 fetch 获取的，可以给请求添加标签标识，在表单更新完成后调用 revalidateTag 触发对应数据的重新拉取，该方法不受路由是否动态的限制。

实现步骤： #

1. 在服务端组件的数据获取逻辑中，为 fetch 请求添加标签：

// /app/your-data/page.js（服务端组件）
async function getUserData() {
  const res = await fetch('/api/your-data', {
    next: {
      tags: ['user-data'] // 为该请求打上标签
    }
  });
  return res.json();
}

export default async function YourDataPage() {
  const userData = await getUserData();
  return <ChildFormComponent data={userData} />;
}

2. 在客户端子组件的表单提交完成后，调用 revalidateTag：

// 子组件（客户端组件，需加 'use client' 指令）
'use client';

import { revalidateTag } from 'next/cache';
import { useRouter } from 'next/router';

export default function ChildFormComponent({ data }) {
  const router = useRouter();

  const handleFormSubmit = async (e) => {
    e.preventDefault();
    // 执行数据库更新请求
    const updateRes = await fetch('/api/update-data', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(/* 你的更新数据 */)
    });

    if (updateRes.ok) {
      // 触发标签对应的数据重新获取
      await revalidateTag('user-data');
      // 刷新页面确保客户端渲染最新数据
      router.refresh();
    }
  };

  return (
    <form onSubmit={handleFormSubmit}>
      {/* 表单输入项，基于传入的 data 渲染 */}
    </form>
  );
}

方法2：强制服务端数据动态获取 #

如果服务端组件默认使用了静态缓存（Next.js 对服务端组件的 fetch 会默认做静态优化），可以通过配置禁用缓存，让数据每次请求都重新拉取，这样调用 router.refresh() 时就能触发服务端重新加载数据。

示例代码： #

// /app/your-data/page.js（服务端组件）
async function getUserData() {
  const res = await fetch('/api/your-data', {
    next: {
      revalidate: 0 // 禁用缓存，每次请求都重新获取数据
      // 也可以使用 cache: 'no-store' 达到同样效果
    }
  });
  return res.json();
}

配置完成后，在表单提交成功后调用 router.refresh() 即可触发服务端重新加载数据。

额外说明 #

• revalidateTag 必须在客户端组件中调用（属于客户端API），服务端组件无法直接使用。
• 如果你的数据获取是直接调用数据库（比如用 Prisma），可以使用 unstable_cache 为查询逻辑添加标签，之后同样通过 revalidateTag 触发重新验证；或者直接给查询函数加上 cache: 'no-store' 禁用缓存。

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