Next.js 与 Drizzle ORM：任务创建/更新后页面不刷新

Question

我正在使用 Drizzle ORM 开发一个 Next.js 项目，我可以在其中创建和更新任务。提交任务表单后，我会导航回主页，但直到我手动刷新页面后才会显示新的/更新的任务。相关代码如下：

TaskForm.tsx

（客户端组件）：

const onSubmit = async (values) => {
  const response = 
    type === OperationType.Create 
      ? await addTask(values) 
      : await updateTask(defaultValues?.id ?? 0, { ...defaultValues, ...values });

  toast(response.message);

  if (response.success) {
    form.reset();
    router.refresh(); // Trying to refresh the page
    router.push(redirect ?? "/"); // Redirect to homepage after submission
  }
};

app/page.tsx

（服务器组件）：

export const revalidate = 0; // Disable ISR

export default async function Home() {
  const tasks = await getTasks();
  const completedTasks = tasks.filter(task => task.isCompleted);
  const incompleteTasks = tasks.filter(task => !task.isCompleted);

  return (
    <div className="container">
      <h1>Incomplete Tasks</h1>
      <TodoListTable data={incompleteTasks} />
      <h1>Completed Tasks</h1>
      <CompletedListTable data={completedTasks} />
    </div>
  );
}

actions.ts

（Drizzle ORM 的服务器操作）：

export async function addTask(task) {
  try {
    db.insert(tasks).values(task).run();
    return { success: true, message: "Task created successfully" };
  } catch (error) {
    return { success: false, message: "Error creating task" };
  }
}

任务已成功创建或更新，但当页面导航回主页时，除非手动刷新页面，否则我看不到新任务。

我尝试过的：

• 我已经使用

  router.refresh()

  重新获取页面，但任务提交后似乎没有更新主页的数据。
• 我使用

  export const revalidate = 0;

  中的

  app/page.tsx

  禁用了 ISR，以确保每次都能获取新数据。
• 尝试了

  router.replace()

  和

  router.push()

  ，但行为没有差异。

我错过了什么？如何确保提交后主页始终反映更新的任务列表，而不需要手动刷新？

Answer 1

这是由于缓存数据造成的。 我们可以通过 revalidatePath 函数按需更改。 我有同样的问题并在我的项目中使用此功能解决了。 您可以在nextJs 文档中参考此内容。