Fetch API 在 Next.js 中返回空数组，尽管 API 端点正常工作

Question

我使用

fetch()

从 Next.js 项目中的后端 API 检索数据，但始终返回空数组 (

[]

)，而不是预期的数据。我通过在浏览器中测试或使用 Postman 等工具来验证 API 是否正常工作。但是，当我尝试使用以下代码获取 Next.js 组件中的数据时：

const BookList = async () => {
  const response = await fetch("http://localhost:3001/api/books");
  if (!response.ok) {
    throw new Error("Failed to fetch data");
  }
  const books = await response.json();
  console.log(books);
}

axios()

工作正常，但我想使用

fetch()

，因为建议在 Next.js 中使用它。可能是什么原因导致此问题？如何修复它以在 Next.js 组件中检索正确的数据？

Answer 1

答案是强制下一个

fetch

函数强制对每个请求进行更新。

因为 next

fetch

函数基本上会缓存每个请求，直到失效。为此，您只需在获取选项上传递

{ cache: 'no-store' })

：

例如：

await fetch("http://localhost:3001/api/books", { cache: 'no-store' });

它将强制 next 直接获取远程资源，而不寻找任何缓存。

这里是官方文档了解更多详情