Next.js 13：Prisma ORM 的数据获取问题 - 导航期间显示旧数据而不是更新数据

Question

我使用 Next.js 13 和 Prisma ORM 来获取服务器组件中的数据，并通过上下文将其提供给子组件。路由的结构如下：/item/[id]，并且在layout.tsx文件中使用id来获取数据。

初始页面加载时，将获取数据并通过上下文供所有子组件访问。但是，在修改上下文中的数据（并通过 API 调用在数据库中更新数据）时，我遇到了问题。当导航到新页面然后返回上一页时，将显示初始加载的旧数据。服务器端函数getChildItems应在每次页面加载时执行，仅在页面刷新时运行，而不是在来回导航期间运行。我可以在进行更改时使用router.refresh()，next/navigation但我认为这不是最佳选择。

由于这是一个服务器组件，我无法使用像 useEffect 这样的钩子。可以从 api 获取客户端组件中的数据，但如果可能的话，我想在服务器上呈现页面。

这是我的layout.tsx：

import { Item } from "@prisma/client";
import { ListProvider } from "~/context/list-context";
import { db } from "~/lib/db"; // Prisma ORM database connection

// This should run every time when navigating to /items/[id] but currently runs only on page refresh
async function getChildItems(itemId: Item["id"]) {
  return await db.item.findMany({
    where: {
      parent_id: itemId,
    },
  });
}

export default async function ListLayout(params) {

  const items = await getChildItems(params.id);

  return (
    <ListProvider listId={params.id} items={items}>
      <div>{children}</div>
    </ListProvider>
  );
}

我确信 Next.js 正在缓存此页面，但我还没有找到一种方法来使实际工作的服务器组件的缓存失效。

提前感谢您的帮助！

编辑：如果需要，这是数据库代码：

import { PrismaClient } from "@prisma/client";
import { deletedAt } from "../prismaMiddleware";

declare global {
  // eslint-disable-next-line no-var
  var cachedPrisma: PrismaClient;
}

let prisma: PrismaClient;
if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!global.cachedPrisma) {
    global.cachedPrisma = new PrismaClient();
  }
  prisma = global.cachedPrisma;
}

prisma.$use(deletedAt);

export const db = prisma;

Answer 1

我相信您应该在执行突变时使用revalidatePathor revalidateTag，并记住重新验证不会立即发生，而是在您下次导航到重新验证的段时发生。