Next.js中数据库变更后如何立即更新UI？

你的问题核心是：服务器组件初始化时获取了todos数据，但执行删除操作后，页面没有重新获取最新数据，导致UI未同步。下面是两种可行的解决方案：

方案一：使用revalidatePath触发页面重新验证（推荐，符合App Router模式） #

在你的服务器函数toggleDelete中添加revalidatePath，告诉Next.js重新验证首页路径，触发服务器组件重新获取最新的todos数据：

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

async function toggleDelete(id: string) {
  "use server";
  await prisma.todo.delete({ where: { id } });
  revalidatePath('/'); // 重新验证根路径，让Home组件重新获取数据
}

执行删除操作后，Next.js会自动重新渲染Home组件，获取最新的todos列表，UI就会同步更新了。

方案二：客户端组件本地状态管理（无刷新更新） #

如果你希望实现无刷新的UI更新，可以将Home组件改为客户端组件，通过useState和useEffect管理todos状态，删除后手动更新本地数据：

1. 修改Home为客户端组件 #

"use client";
import { TodoItem } from "@/components/TodoItem";
import Link from "next/link";
import { useState, useEffect } from 'react';

export default function Home() {
  const [todos, setTodos] = useState([]);

  // 初始获取todos
  useEffect(() => {
    const fetchTodos = async () => {
      const res = await fetch('/api/todos');
      const data = await res.json();
      setTodos(data);
    };
    fetchTodos();
  }, []);

  // 客户端处理删除逻辑
  const handleDelete = async (id: string) => {
    await fetch(`/api/todos/${id}`, { method: 'DELETE' });
    // 手动从本地状态中移除删除的项
    setTodos(prev => prev.filter(todo => todo.id !== id));
  };

  // 同理处理toggleTodo逻辑...

  return (
    <>
      <header className="flex justify-between items-center mb-4">
        <h1 className="text-2xl">Todos</h1>
        <Link
          className="border border-slate-300 text-slate-300 px-2 py-1 rounded hover:bg-slate-700 focus-within:bg-slate-700 outline-none"
          href="/new"
        >
          New
        </Link>
      </header>
      <ul className="px-4">
        {todos.map((todo) => (
          <TodoItem key={todo.id} {...todo} toggleTodo={/* 替换为客户端处理函数 */} toggleDelete={handleDelete} />
        ))}
      </ul>
    </>
  );
}

2. 创建API路由 #

需要在app/api/todos/route.ts创建获取todos的API：

import { prisma } from "@/db";
import { NextResponse } from 'next/server';

export async function GET() {
  const todos = await prisma.todo.findMany();
  return NextResponse.json(todos);
}

以及app/api/todos/[id]/route.ts创建删除API：

import { prisma } from "@/db";
import { NextResponse } from 'next/server';

export async function DELETE(request: Request, { params }: { params: { id: string } }) {
  await prisma.todo.delete({ where: { id: params.id } });
  return NextResponse.json({ success: true });
}

为什么原代码不生效？ #

你的Home组件是服务器组件，初始渲染时会一次性获取todos数据并缓存。执行服务器函数toggleDelete后，没有触发服务器组件的重新渲染，所以页面展示的还是旧数据。使用revalidatePath可以强制Next.js重新验证该路径，重新执行服务器组件的代码，获取最新数据。

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