NextJS App Router调用getData()返回空，直接fetch正常？

核心原因 #

getData()是异步函数，调用时未添加await关键字，因此返回的是一个Promise对象。而JSON.stringify处理Promise对象时，由于Promise没有可枚举的自有属性，最终会序列化为{}。

反观直接使用fetch的代码，你通过await等待了请求完成和JSON解析，拿到的是实际的响应数据，所以能正常显示。

修正方案 #

调用异步函数getData()时必须添加await，在Next.js App Router的服务器组件中，组件本身支持async/await，可以直接在组件顶层完成异步数据获取：

export default async function Home() {
  async function getData() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    return await res.json();
  }

  // 添加await等待getData执行完成
  const dataFromGetData = await getData();
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await res.json();

  return (
    <>
      现在可以正常显示数据：{JSON.stringify(dataFromGetData, null, 2)}
      原本的代码依然正常：{JSON.stringify(data, null, 2)}
    </>
  );
}

额外注意 #

在Next.js App Router的服务器组件中，不要在JSX渲染逻辑里直接调用异步函数（比如{JSON.stringify(getData(), null, 2)}这种写法），因为JSX渲染时不会自动等待Promise完成。必须先在组件顶层通过await拿到数据，再将数据传入JSX进行渲染。

内容的提问来源于stack exchange，提问作者Alexey Tseitlin