Next.js 13 数据获取与 Prisma ORM：解决导航时数据未更新问题

本文旨在解决 Next.js 13 应用中使用 Prisma ORM 进行数据获取时，在页面导航后数据未及时更新的问题。通过分析服务器组件的缓存机制，并结合 revalidatePath 和 revalidateTag 方法，提供了一种高效的解决方案，确保用户在页面切换时始终看到最新的数据。本文将提供详细的代码示例和注意事项，帮助开发者避免类似问题，提升用户体验。

在使用 Next.js 13 的服务器组件和 Prisma ORM 时，开发者可能会遇到一个常见的问题：在修改数据后，通过导航返回页面时，页面显示的仍然是旧数据，而不是最新的数据。这通常是由于 Next.js 的缓存机制导致的。虽然服务器组件会在每次请求时执行，但 Next.js 可能会缓存组件的渲染结果，以提高性能。

要解决这个问题，我们需要利用 Next.js 提供的重新验证（Revalidation）机制。重新验证允许我们清除缓存，并强制 Next.js 在下一次请求时重新获取数据。

Next.js 提供了两种主要的重新验证方法：

• revalidatePath: 重新验证指定的路径。
• revalidateTag: 重新验证带有指定标签的数据。

使用 revalidatePath

revalidatePath 方法可以用于清除特定路径的缓存。例如，如果我们的数据位于 /item/[id] 路径下，并且当数据更新时，我们希望重新验证该路径，我们可以这样做：

import { revalidatePath } from 'next/cache';

async function updateItem(id: string, data: any) {
  // 更新数据库中的数据
  await db.item.update({
    where: { id: id },
    data: data,
  });

  // 重新验证 `/item/[id]` 路径
  revalidatePath(`/item/${id}`);
}

在这个例子中，updateItem 函数在更新数据库中的数据后，会调用 revalidatePath 方法，并传入要重新验证的路径。这会告诉 Next.js 在下一次请求 /item/[id] 路径时，重新获取数据并渲染页面。

Prisma

Prisma是一款照片编辑工具，用户可以轻松地将照片转换成数字艺术。

50

查看详情

使用 revalidateTag

revalidateTag 方法可以用于清除带有特定标签的数据缓存。这在更细粒度的控制缓存方面非常有用。要使用 revalidateTag，我们需要首先在数据获取函数中添加一个 cache 配置选项，并指定一个标签：

async function getChildItems(itemId: string) {
  return await db.item.findMany({
    where: {
      parent_id: itemId,
    },
    cache: 'force-cache',
    tags: ['item'], // 指定标签
  });
}

然后，在数据更新后，我们可以使用 revalidateTag 方法来清除带有 item 标签的数据缓存：

import { revalidateTag } from 'next/cache';

async function updateItem(id: string, data: any) {
  // 更新数据库中的数据
  await db.item.update({
    where: { id: id },
    data: data,
  });

  // 重新验证带有 `item` 标签的数据
  revalidateTag('item');
}

注意事项

• revalidatePath 和 revalidateTag 都需要在服务器端执行。
• 重新验证不会立即发生。Next.js 会在下一次请求相关路径或数据时，才会重新获取数据。
• 选择使用 revalidatePath 还是 revalidateTag 取决于具体的需求。如果需要重新验证整个路径，可以使用 revalidatePath。如果需要更细粒度的控制，可以使用 revalidateTag。

总结

通过使用 revalidatePath 或 revalidateTag 方法，我们可以有效地解决 Next.js 13 应用中使用 Prisma ORM 进行数据获取时，页面导航后数据未及时更新的问题。选择合适的方法，并在数据更新后进行重新验证，可以确保用户始终看到最新的数据，从而提升用户体验。记住，理解 Next.js 的缓存机制对于构建高性能的应用程序至关重要。

以上就是Next.js 13 数据获取与 Prisma ORM：解决导航时数据未更新问题的详细内容，更多请关注php中文网其它相关文章！