Javascript 如何避免在 Next.js 的 app 目录中缓存

发布于05月09日

我在我的Next.jsv13.2应用程序中创建了一个从数据库获取数据的API端点.

app/api/someData

在我将其部署到Vercel之前，它一直运行得很好.我认为问题在于路由被缓存，因此每次都返回相同的响应.我如何阻止这种情况发生？

我使用的是Next.js中新的app目录，它使用Route Handlers.

任何帮助都将不胜感激.

推荐答案

是的，在app文件夹中，默认情况下，Next.js缓存所有获取的结果.如果您使用的是fetch()，则可以使用revalidate或cache选项更改每个查询的此行为:

fetch('https://...', { next: { revalidate: 10 } });
fetch('https://...', { cache: 'no-store' });

您还可以通过从页面、版面或路由处理程序或revalidate中导出fetchCache来控制Route Segment Config的行为，如果您使用的是fetch():

// layout.js OR page.js OR route.js

export const fetchCache = 'force-no-store';
// OR
export const revalidate = 0;

现在，如果你不是使用fetch()来获取数据，而是像Axios或ORM这样的东西，doc会说:

作为临时解决方案，在可以配置第三方查询的缓存行为之前，您可以使用Route Segment Config来自定义整个段的缓存行为.

// layout.js OR page.js OR route.js

import prisma from './lib/prisma';
 
export const revalidate = 2; // revalidate every 2s, it can be 0 if you want no caching
 
async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}
 
export default async function Page() {
  const posts = await getPosts();
  // ...
}

更多信息，你可以阅读Data Fetching.