首页 > web前端 > js教程 > 正文

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

Barbara Streisand
发布: 2024-11-02 21:11:30
原创
775 人浏览过

Why is my Next.js API Route returning cached data on Vercel deployment?

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板