如何使服务器组件反映通过服务器操作进行的数据更改？

Question

我有一个服务器组件ChatList，它从数据库中获取数据并显示它：

// server component

import Link from "next/link";
import db from "@/prisma";

export const ChatList = async () => {
  const chats = await db.chat.findMany();

  return (
    <ul>
      {chats.map((chat) => (
        <li key={chat.id}>
          <Link href={`chat/${chat.id}`}>{chat.name}</Link>
        </li>
      ))}
    </ul>
  );
};

然后我有一个服务器操作，它在同一个表中创建新记录：

"use server";

import db from "@/prisma";

export const createChat = async (name: string) => {
  const newChat = await db.chat.create({
    data: { name },
  });
  return newChat;
};

action此操作作为 form prop被调用。

创建新记录后，如何告诉服务器组件ChatList重新获取数据？

Answer 1

您可以通过调用router.refresh()表单操作来实现此目的。

"use client";

import { useRouter } from "next/navigation";

// ...

const router = useRouter();

// ...

<form
  action={async (formData) => {
    const name = formData.get("name");
    if (typeof name === "string") {
      await createChat(name);
      router.refresh();
    }
  }}
>

您还可以研究实验性的useOptimistic挂钩，以使 UI 看起来更具响应性。