如何通过Server Actions使Server Component响应数据变更并重新获取数据？

针对你的场景，有两种实用方式可以让ChatList重新获取最新数据：

方法一：在Server Action中使用revalidatePath #

在createChat这个Server Action里，调用Next.js的revalidatePath方法，触发对应页面路径的缓存失效，Server Component就会重新执行数据查询逻辑。

修改后的createChat代码：

"use server"; 

import db from "@/prisma";
import { revalidatePath } from "next/cache";

export const createChat = async (name: string) => {
  const newChat = await db.chat.create({
    data: { name },
  });
  // 替换为ChatList所在页面的实际路径，比如"/"或"/chats"
  revalidatePath("/");
  return newChat;
};

原理：revalidatePath会清除目标路径的缓存，当页面再次渲染时，ChatList会重新从数据库拉取最新的聊天列表。

方法二：客户端触发页面刷新（手动控制场景） #

如果表单是在客户端组件中实现，也可以在提交成功后调用router.refresh()触发页面刷新，强制Server Component重新获取数据：

示例客户端组件代码：

"use client";

import { useRouter } from "next/navigation";
import { createChat } from "@/path-to-your-server-action";
import { FormEvent } from "react";

export default function ChatForm() {
  const router = useRouter();

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const name = formData.get("name") as string;
    await createChat(name);
    // 触发页面刷新，更新Server Component数据
    router.refresh();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="输入聊天名称" />
      <button type="submit">创建聊天</button>
    </form>
  );
}

这种方式适合需要在客户端完成额外逻辑后，再手动触发数据更新的场景。

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