Next.js 13新fetch机制为何会触发两次HTTP请求？

针对你遇到的问题，以下是几种常见的触发两次请求的原因：

• 开发模式下的双重渲染机制
  Next.js在开发环境（next dev）中为了支持Fast Refresh和组件热更新，会对组件进行两次渲染：第一次是服务器端渲染生成初始HTML，第二次是客户端hydration阶段的验证渲染。这会导致服务器组件中的fetch被调用两次，从而发起两次HTTP请求。生产环境下这种情况会消失，因为生产模式不会做额外的调试渲染。

• 重新验证时的 stale-while-revalidate 策略
  当页面配置了revalidate:10，缓存过期后，第一个用户请求进来时，Next.js会采用** stale-while-revalidate**策略：先返回缓存中的旧数据给用户，同时在后台发起新的请求去更新缓存。这时候你会看到两次请求：一次是后台更新缓存的请求，另一次是处理用户当前请求的请求（如果缓存已完全失效，可能会直接发起新请求返回最新数据，但部分场景下仍会出现并行的两次请求）。这是正常的策略行为，目的是平衡用户响应速度和数据新鲜度。

• 重复调用数据获取函数
  检查代码中是否在页面组件的其他位置、子组件中重复调用了getData函数，或者由于逻辑疏漏导致该函数被执行了两次，进而发起重复请求。

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