Next.js中fetch为什么总是发起两次请求？

Question

一个简单的页面:
app\fetch-demo\page.js

'use client'

export default function FechDemo() {
    
    const fetchPromise = fetch("https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",);
    console.log(fetchPromise);

    return (
        <main className="">
            fetch test
        </main>
    )
}

浏览器控制台返回两次同样的结果：

为什么会这样？

Answer 1

手动关闭严格模式，即不使用React.StrictMode包裹组件

nextjs中通过配置中的reactStrictMode来设置

next.config.js

module.exports = {
  ...
  reactStrictMode: false,
}