Next.js中Fetch API返回空数组，API正常该如何解决？

常见原因及对应修复方法 #

1. fetch默认缓存导致返回旧数据

Next.js的fetch()默认启用强制缓存（等同于cache: 'force-cache'），如果之前请求返回过空数组，后续请求会直接读取缓存结果，而axios默认不开启这类缓存，所以能获取最新数据。

修复方式：
在fetch请求中显式禁用缓存，或者设置重新验证策略：

const response = await fetch("http://localhost:3001/api/books", {
  // 方式1：完全禁用缓存
  cache: 'no-store',
  // 方式2：设置0秒重新验证（效果类似no-store）
  // next: { revalidate: 0 }
});

2. 请求头与axios存在差异

axios会自动添加一些默认请求头（比如Accept: application/json），而fetch的默认请求头可能不符合后端的要求，导致返回空数据。

修复方式：
手动添加和axios一致的请求头：

const response = await fetch("http://localhost:3001/api/books", {
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

3. 组件类型与数据获取方式不匹配

• Pages Router场景：如果你的组件在pages目录下，直接使用async组件不符合Next.js规范，需要改用服务器端数据获取方法（如getServerSideProps），或者在客户端组件中通过useEffect调用fetch。

服务器端渲染示例：

// pages/books.js
export async function getServerSideProps() {
  const response = await fetch("http://localhost:3001/api/books", { cache: 'no-store' });
  if (!response.ok) {
    throw new Error("Failed to fetch data");
  }
  const books = await response.json();
  return { props: { books } };
}

export default function BookList({ books }) {
  console.log(books);
  return <div>{/* 渲染书籍列表 */}</div>;
}

客户端组件示例（需标记'use client'）：

'use client';

import { useEffect, useState } from 'react';

export default function BookList() {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    const fetchBooks = async () => {
      const response = await fetch("http://localhost:3001/api/books", { cache: 'no-store' });
      if (!response.ok) {
        throw new Error("Failed to fetch data");
      }
      const data = await response.json();
      setBooks(data);
      console.log(data);
    };
    fetchBooks();
  }, []);

  return <div>{/* 渲染书籍列表 */}</div>;
}

• App Router场景：async组件是允许的，但同样需要注意缓存策略，确保不会读取旧的空数据缓存。

内容的提问来源于stack exchange，提问作者Sheraz Akram