Next.js 13.4 App Router中POST请求后如何重渲染并重新获取组件数据？

问题描述 #

我有一个带列表的页面，修改选中选项并点击保存会触发mutation（通过POST请求修改数据库中的选中项）。使用Next.js 13.4 App Router实现后，数据库数据已变更，但组件未更新。调试发现数据确实已改变，且SomeComponent的渲染函数已接收到变更后的数据，怀疑是缓存问题？

代码如下：

const Page = () => {
/* ... */
 const [data, setData] = useState(null);
 const [loading, setLoading] = useState(true);
 useEffect(() => {
    loadData();
  }, []);

  const handleAction = useCallback(async (name, type, params) => {
    const response = await fetch("[path to post]", {
      method: "POST",
      body: JSON.stringify({ type: name, params }),
      cache: "no-store",
    })
    loadData();
  }, []);

  const loadData = useCallback(async () => {
    await fetch("[path to get]", {
      method: "GET",
      cache: "no-store",
    })
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  });

 return <SomeComponent data={data}/>

}

问题排查与解决步骤 #

1. 修复竞态问题：确保POST完成后再刷新数据
   原代码未等待POST请求完成就调用loadData，可能导致GET请求提前发送并拿到旧数据。需添加await确保POST成功后再获取最新数据：

   const handleAction = useCallback(async (name, type, params) => {
     const response = await fetch("[path to post]", {
       method: "POST",
       body: JSON.stringify({ type: name, params }),
       cache: "no-store",
     });
     // 校验请求成功后再刷新数据
     if (response.ok) {
       await loadData();
     }
   }, [loadData]); // 添加loadData到依赖数组
   

2. 修正useCallback的依赖缺失
   loadData的useCallback未指定依赖数组，会导致每次组件渲染都生成新的函数实例，引发引用不一致问题。补充空依赖数组（内部无外部依赖）：

   const loadData = useCallback(async () => {
     await fetch("[path to get]", {
       method: "GET",
       cache: "no-store",
       next: { revalidate: 0 },
     })
       .then((res) => res.json())
       .then((data) => {
         setData(data);
         setLoading(false);
       });
   }, []); // 新增空依赖数组
   

3. 强化App Router的缓存控制
   在Next.js 13.4 App Router中，仅设置cache: "no-store"可能不够，加上next: { revalidate: 0 }强制每次请求从服务器获取最新数据，避免缓存干扰：

   await fetch("[path to get]", {
     method: "GET",
     cache: "no-store",
     next: { revalidate: 0 },
   })
   

4. 检查SomeComponent的渲染逻辑
   既然已确认SomeComponent拿到新数据却未更新，需排查子组件内部：

   • 若使用React.memo，确保props比较逻辑正确（比如data为对象时，是否存在引用未更新的情况）
   • 子组件若维护内部状态，需通过useEffect监听props.data变化，同步更新内部状态
   • 列表渲染时必须使用唯一标识作为key，避免用索引导致React复用旧节点

5. 可选：用数据库简化状态管理
   手动处理缓存和数据刷新易出错，推荐用TanStack Query（原React Query）或SWR，它们会自动处理mutation后的缓存失效与数据刷新：

   // 示例：用TanStack Query实现
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: (params) => fetch("[path to post]", {
       method: "POST",
       body: JSON.stringify(params),
     }),
     onSuccess: () => {
       // 失效查询，自动刷新数据
       queryClient.invalidateQueries({ queryKey: ["your-data-key"] });
     },
   });
   

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