Next.js使用Fetch触发无限API请求问题咨询

Server Component中出现无限请求循环，通常和API响应异常、缓存策略配置不当或错误边界逻辑有关，以下是具体排查和修复方案：

可能的原因及对应解决方法 #

1. API端点持续返回错误状态码 #

如果API每次请求都返回非200状态，会触发error.js错误边界。若错误边界存在自动重试或导致页面重渲染的逻辑，就会形成循环。

• 排查方式：在getData中打印响应状态码，确认API返回是否稳定：

  async function getData() {
    const res = await fetch('https://api.example.com/...')
    console.log('API status:', res.status)
    if (!res.ok) {
      throw new Error(`请求失败：${res.status} ${res.statusText}`)
    }
    return res.json()
  }
  

• 修复：修复API端点使其稳定返回200状态，或调整error.js逻辑，避免自动触发页面重渲染（改为手动重试）：

  // app/error.js（需标记为'use client'）
  export default function Error({ error, reset }) {
    return (
      <div>
        <h2>请求出错：{error.message}</h2>
        <button onClick={() => reset()}>点击重试</button>
      </div>
    )
  }
  

2. fetch缓存策略配置不合理 #

Next.js中fetch默认会缓存响应，但如果使用cache: 'no-store'或未设置合理的重验证时间，会导致每次页面渲染都重新发起请求，若页面因其他原因频繁渲染就会形成循环。

• 修复：根据业务需求设置缓存策略，比如缓存5分钟：

  async function getData() {
    const res = await fetch('https://api.example.com/...', {
      next: { revalidate: 300 } // 300秒内复用缓存
    })
    if (!res.ok) {
      throw new Error('Failed to fetch data')
    }
    return res.json()
  }
  

3. 页面组件被意外触发重渲染 #

如果Page组件被嵌套在会频繁更新的父组件中，或动态路由参数不稳定（比如包含随机值、实时时间戳），会导致页面反复生成，进而重复调用fetch。

• 排查方式：检查路由参数是否存在不稳定值，或父组件是否有无意义的状态更新。
• 修复：移除路由参数中的不稳定值，或优化父组件逻辑避免不必要的重渲染。

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