为什么我的 Next.js API 路由返回 Vercel 部署上的缓存数据？

Vercel 部署上的 Next.js API 路由数据缓存问题

在 Next.js v13.2 应用程序中，API 端点获取数据在 Vercel 上部署后，来自数据库的数据会遇到奇怪的行为。始终返回相同的响应，表明存在缓存问题。

根本原因：

默认情况下，Next.js 会缓存 API 路由和服务器组件中的所有获取的数据生产。当向 API 路由发出请求时，将提供缓存的数据，而不是从数据库中获取新数据。

解决方案：

1.使用 fetch() 进行每个查询缓存控制

如果使用 fetch() API，您可以通过指定重新验证或缓存选项来覆盖默认缓存行为：

• revalidate：指定重新获取数据之前的缓存持续时间（以秒为单位）。

• cache：显式设置缓存行为，选项包括：

  • no-store：完全禁用缓存。
  • no-cache：在提供响应之前重新验证缓存。
  • 重新加载：始终从服务器获取新数据。

示例：

<code class="js">fetch('https://...', { next: { revalidate: 10 } });
// OR
fetch('https://...', { cache: 'no-store' });</code>

2.用于通用缓存的路由段配置

如果您不使用 fetch() 或需要在路由段级别控制缓存，请使用路由段配置：

• 添加动态段：添加export constdynamic = "force-dynamic";到您的布局、页面或路由文件。这会禁用该段的缓存行为。

示例：

<code class="js">// layout.js OR page.js OR route.js

import prisma from "./lib/prisma";

export const dynamic = "force-dynamic";

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
  // ...
}</code>

以上是为什么我的 Next.js API 路由返回 Vercel 部署上的缓存数据？的详细内容。更多信息请关注PHP中文网其他相关文章！