Next.js 13中Props传递的已获取数据如何实现重新渲染？

核心问题原因 #

你的layout是服务器组件，其中获取的tasks.data是在服务器端渲染时生成的静态数据。即使设置cache: no-store，客户端发送PUT请求后，服务器不会主动通知客户端更新数据，因此必须通过客户端主动重新获取数据或触发服务器端重新验证来实现组件重新渲染。

方案一：客户端组件维护状态+主动重新获取（useEffect可选） #

将TaskList改为客户端组件，在内部维护任务状态，并在PUT请求成功后主动重新拉取最新数据。如果需要定时刷新，也可以用useEffect实现，但主动调用的方式更高效。

1. 修改TaskList为客户端组件：

'use client';

import { useState } from 'react';

// 定义Task类型，根据你的实际数据结构调整
type Task = {
  id: string;
  title: string;
  completed: boolean;
};

export default function TaskList({ initialTasks }: { initialTasks: Task[] }) {
  // 用useState维护客户端的任务状态
  const [tasks, setTasks] = useState<Task[]>(initialTasks);

  // 封装获取任务的函数
  const fetchLatestTasks = async () => {
    const res = await fetch('/api/tasks', { cache: 'no-store' });
    const responseData = await res.json();
    setTasks(responseData.data);
  };

  // 处理任务更新的PUT请求
  const handleTaskUpdate = async (taskId: string, newCompletedStatus: boolean) => {
    // 发送PUT请求
    await fetch(`/api/tasks/${taskId}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ completed: newCompletedStatus }),
    });

    // 请求成功后，主动拉取最新数据更新状态
    fetchLatestTasks();
  };

  // 可选：如果需要定时刷新，使用useEffect
  // import { useEffect } from 'react';
  // useEffect(() => {
  //   const interval = setInterval(fetchLatestTasks, 5000); // 每5秒刷新一次
  //   return () => clearInterval(interval);
  // }, []);

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          <span>{task.title}</span>
          <input
            type="checkbox"
            checked={task.completed}
            onChange={(e) => handleTaskUpdate(task.id, e.target.checked)}
          />
        </li>
      ))}
    </ul>
  );
}

2. 调整layout组件，将初始数据作为initialTasks传入：

// app/layout.tsx
export async function Layout({ children }: { children: React.ReactNode }) {
  const res = await fetch('/api/tasks', { cache: 'no-store' });
  const tasks = await res.json();

  return (
    <div>
      <TaskList initialTasks={tasks.data} />
      {children}
    </div>
  );
}

方案二：使用revalidatePath触发服务器端重新验证 #

如果希望保留服务器组件的特性，可以在PUT请求成功后调用revalidatePath，让服务器重新获取数据，再通过客户端导航或状态更新触发组件渲染。

'use client';

import { revalidatePath } from 'next/cache';

const handleTaskUpdate = async (taskId: string, newCompletedStatus: boolean) => {
  await fetch(`/api/tasks/${taskId}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ completed: newCompletedStatus }),
  });

  // 重新验证根路径（对应layout所在的路径），触发服务器重新获取任务数据
  revalidatePath('/');
  
  // 可选：如果TaskList在特定路由下，比如/tasks，就写revalidatePath('/tasks')
};

这种方式需要确保TaskList作为服务器组件时，能在revalidate后重新渲染，通常配合客户端的导航或状态更新来触发页面的重新获取。

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