Next.js App Router中使用SSR获取数据后，如何实现删除条目后的列表更新？

嗨，我来帮你梳理下这个问题的解决方案～在Next.js App Router里，其实有几种优雅的方式来处理删除条目后的列表更新，不一定非得用纯CSR调用API，下面给你详细讲讲：

方案一：使用Server Actions（推荐，App Router原生特性） #

Server Actions是App Router里专门用来在组件中直接调用服务器端逻辑的功能，不用额外写API路由，非常适合这种增删改查的场景。核心思路是：在服务器端完成删除操作后，触发缓存重新验证，让页面自动获取最新的列表数据。

举个简单的例子：

// app/page.tsx
import { revalidatePath } from 'next/cache';
import { deleteItem } from '@/actions/items'; // 可以单独把Server Actions放一个文件里

export default async function ItemsPage() {
  // SSR获取初始数据
  const items = await fetchItemsFromDatabase();

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            {/* 直接调用Server Action完成删除 */}
            <form action={async () => {
              await deleteItem(item.id);
              // 重新验证当前页面的缓存，页面会重新渲染最新数据
              revalidatePath('/');
            }}>
              <button type="submit">删除</button>
            </form>
          </li>
        ))}
      </ul>
    </div>
  );
}

// app/actions/items.ts（单独的Server Actions文件）
'use server'; // 必须加这个标识，告诉Next.js这是服务器端代码

export async function deleteItem(id: string) {
  // 这里写删除逻辑，比如调用数据库删除对应条目
  await db.item.delete({ where: { id } });
}

这种方式的好处是：删除逻辑完全在服务器端执行，安全可靠，而且不用手动管理客户端状态，删除后页面会自动重新获取最新的SSR数据。

方案二：客户端CSR调用API+状态管理 #

如果你更习惯传统的客户端请求方式，也可以用CSR来实现：在客户端发起删除请求，成功后要么直接更新本地的状态列表，要么重新拉取一次最新数据。

举个例子：

// app/page.tsx
'use client'; // 标记为客户端组件
import { useState, useEffect } from 'react';

export default function ItemsPage() {
  const [items, setItems] = useState([]);

  // 客户端挂载时获取初始数据
  useEffect(() => {
    const fetchItems = async () => {
      const res = await fetch('/api/items');
      const data = await res.json();
      setItems(data);
    };
    fetchItems();
  }, []);

  // 客户端删除逻辑
  const handleDelete = async (id: string) => {
    // 发起删除请求
    await fetch(`/api/items/${id}`, { method: 'DELETE' });
    // 方式一：直接更新本地状态，过滤掉删除的条目
    setItems(prev => prev.filter(item => item.id !== id));
    // 方式二：重新拉取最新数据（适合数据可能被其他操作修改的场景）
    // const res = await fetch('/api/items');
    // const newData = await res.json();
    // setItems(newData);
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}
            <button onClick={() => handleDelete(item.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

这种方式的好处是更灵活，适合需要复杂客户端状态管理的场景，但需要额外写API路由，而且初始数据是客户端获取的（不是SSR），如果需要SSR的话，可以把初始数据通过服务器组件传递给客户端组件。

回答你的疑问：是否需要在CSR里调用API？ #

其实两种方案都可行：

• 如果想贴合App Router的设计，用Server Actions更简洁，不用写API路由，还能保持SSR的优势；
• 如果你的项目已经有成熟的客户端状态管理方案（比如React Query、Zustand），或者需要更灵活的客户端交互，用CSR调用API也完全没问题。

备注：内容来源于stack exchange，提问作者web developer