Next.js App Router中无需刷新页面刷新陈旧数据的方案

Next.js App Router主推Server Components在服务端获取数据，但官方文档确实没明确讲“不刷新整页更新这些服务端渲染数据”的方案。针对你提到的图书管理场景，核心思路是用客户端组件作为交互桥梁，结合服务端数据操作和状态管理来实现局部刷新，下面是两种通用玩法：

1. 拆分组件：服务端负责初始渲染，客户端处理交互 #

把页面拆成两部分：

• 服务端组件：负责首次加载时从数据库拉取书籍列表，渲染静态展示区域。
• 客户端组件：负责添加书籍的表单、触发服务端数据操作，以及更新局部UI状态。

示例结构：

// app/books/page.tsx（服务端组件）
import BooksContainer from './BooksContainer';

export default async function BooksPage() {
  // 服务端查询初始书籍数据
  const initialBooks = await fetch('https://your-db-api/books').then(res => res.json());

  return (
    <div>
      <h1>馆藏书籍</h1>
      <BooksContainer initialBooks={initialBooks} />
    </div>
  );
}

// app/books/BooksContainer.tsx（客户端组件，必须加'use client'）
'use client';
import { useState } from 'react';
import AddBookForm from './AddBookForm';
import BookList from './BookList';

export default function BooksContainer({ initialBooks }) {
  const [books, setBooks] = useState(initialBooks);

  // 定义添加书籍后的更新方法
  const updateBookList = (newBook) => {
    setBooks(prev => [...prev, newBook]);
  };

  return (
    <>
      <AddBookForm onBookAdded={updateBookList} />
      <BookList books={books} />
    </>
  );
}

2. 调用服务端操作获取新ID，更新局部状态 #

用Next.js的Server Action（比单独写API路由更简洁）完成添加书籍的服务端操作，拿到服务端生成的ID后，直接更新客户端状态：

// app/books/AddBookForm.tsx（客户端组件）
'use client';
import { useState } from 'react';
import { addBook } from './actions';

export default function AddBookForm({ onBookAdded }) {
  const [title, setTitle] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 调用Server Action执行服务端添加操作，拿到带ID的新书籍数据
    const newBook = await addBook({ title });
    // 通知父组件更新列表
    onBookAdded(newBook);
    setTitle('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="输入书籍名称"
      />
      <button type="submit">添加书籍</button>
    </form>
  );
}

// app/books/actions.ts（Server Action，服务端执行）
'use server';

export async function addBook(data) {
  // 这里替换成你的数据库操作，比如插入新书籍并返回带ID的数据
  const response = await fetch('https://your-db-api/books', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' },
  });
  return response.json();
}

3. 复杂场景：用数据缓存库实现自动重取 #

如果书籍列表可能被其他操作修改（比如多人协作），可以用React Query或SWR这类缓存库，提交后触发数据重取，自动更新列表：

// app/books/BookList.tsx（客户端组件）
'use client';
import useSWR from 'swr';

// 定义数据获取函数
const fetcher = () => fetch('https://your-db-api/books').then(res => res.json());

export default function BookList() {
  const { data: books, mutate } = useSWR('/api/books', fetcher);

  // 暴露重取方法给表单组件
  const refreshBooks = () => mutate();

  if (!books) return <div>加载中...</div>;

  return (
    <ul>
      {books.map(book => (
        <li key={book.id}>{book.title}（ID：{book.id}）</li>
      ))}
    </ul>
  );
}

之后在AddBookForm里调用refreshBooks，提交成功后自动拉取最新列表即可。

核心总结 #

• 服务端组件只负责初始渲染，客户端组件处理所有交互和状态更新。
• 通过Server Action或API路由完成服务端数据操作，拿到服务端生成的ID。
• 简单场景用客户端状态直接更新UI，复杂场景用缓存库保证数据一致性。

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