NextJS 13中为何出现两次不同时间的API请求？

两次请求的含义 #

• 第一次请求：服务器端渲染/静态生成阶段
  Next.js在构建（静态生成SSG）或接收用户请求（服务器端渲染SSR）时，会执行异步组件中的await getData()，获取数据用于生成完整的初始HTML页面，目的是提升首屏加载速度和SEO表现。

• 第二次请求：客户端水合（Hydration）阶段
  你直接在组件内部使用了普通的async/await函数，Next.js在客户端完成页面水合时会重新执行组件代码，导致getData()被再次调用，发起第二次请求。这是因为Pages Router并不支持组件级的异步数据获取逻辑，客户端会重复执行组件内的代码。

解决办法 #

方案1：Pages Router下使用官方数据获取方法

不要在组件内部直接获取数据，改用getServerSideProps（SSR场景）或getStaticProps（SSG场景）来获取数据，再通过props传递给组件，这样数据只会在服务器端获取一次：

import { getData } from "./api"
import { Form } from "./components/Form"
import styles from "./style.module.css"
import { Suspense } from "react"

export default function BuildingInfoForm({ data }) {
  return (
    <div className={styles["container"]}>
      <Suspense fallback={<p>Loading feed...</p>}>
        <Form data={data} />
      </Suspense>
    </div>
  )
}

// 服务器端获取数据，仅执行一次
export async function getServerSideProps() {
  const data = await getData()
  return { props: { data } }
}

方案2：App Router下的正确写法

如果你的项目使用App Router（app/目录），直接在组件中使用async/await是被支持的，此时数据只会在服务器端获取一次，不会在客户端重复请求。确保组件位于app/目录下，无需额外处理即可避免重复请求。

内容的提问来源于stack exchange，提问作者Ala Eddine Menai