如何避免 Next.js 13.2 API 端点中的缓存问题？

如何解决 Next.js 13.2 API 端点中的数据缓存问题

使用检索数据的 API 端点部署 Next.js 应用程序时从外部源来看，开发人员可能会遇到这样的问题：无论底层数据源如何更改，缓存的数据都会显示一致。此行为可归因于生产环境中 Next.js 对 API 路由和服务器组件的缓存机制。

为了解决此缓存问题，Next.js 提供了多个用于控制缓存行为的选项。

将 Fetch() 与 Revalidate 或 Cache 选项结合使用

如果使用 fetch() 进行数据获取，开发人员可以指定 revalidate 或缓存选项来控制每个查询的缓存行为：

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

revalidate 选项指定重新获取缓存之前的秒数。缓存选项允许更精细的控制，例如 no-store 等值会阻止浏览器缓存响应。

使用自定义缓存规则的路由段配置

对于 fetch() 与自定义缓存规则一起使用的情况，或者使用 axios 等库或直接与数据库交互时，开发人员可以使用 Route Segment Config。路由段配置允许在每个路由的基础上定义缓存行为：

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

import prisma from "./lib/prisma";

/*
  Bleow option is when you want no caching at all, there are more options
  on the doc depending on your needs. 
*/
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>

通过将动态设置为“force-dynamic”，Next.js 禁用指定路由的缓存。开发人员可以根据其特定的缓存要求探索其他选项，如 Next.js 文档中所述。

以上是如何避免 Next.js 13.2 API 端点中的缓存问题？的详细内容。更多信息请关注PHP中文网其他相关文章！