为什么在 Nextjs 13 的构建过程中“fetch”被调用两次？

Question

我正在从返回随机笑话的 api 中获取（使用 Nextjs 13 的fetchwith ）。{cache:'force-cache'}我注意到fetch在构建过程中被调用了两次。

这是我的代码：

// page.js
import {RefreshButton} from './RefreshButton'

async function getRandomJoke(){
  const res = await fetch("https://v2.jokeapi.dev/joke/Programming?type=single", {cache:'force-cache'})
  const data = await res.json()
  console.log("fetch called. Joke is: ", data['joke'])

  return data['joke']
}

export default async function Home() {
  const joke = await getRandomJoke()

  return (
    <div>
      {joke}
      <RefreshButton/>
    </div>
  )
}

这是构建日志：

[=   ] info  - Generating static pages (2/3)fetch called. Joke is:  A programmer puts two glasses on his bedside table before going to sleep. A full one, in case he gets thirsty, and an empty one, in case he doesn't.

[==  ] info  - Generating static pages (2/3)fetch called. Joke is:  The generation of random numbers is too important to be left to chance.

当页面首次呈现时，它会显示第一个笑话。单击 时<RefreshButton />（这是一个在router.refresh()单击时调用的客户端组件），会显示第二个笑话。

我的问题是：

1. 为什么fetch在构建过程中被调用两次？
2. 如果它是静态生成的，为什么它的数据会在刷新时发生变化？

Answer 1

尝试在获取调用中使用重新验证，重复在此实现后停止

https://beta.nextjs.org/docs/data-fetching/revalidating