加密货币项目数据刷新异常：Coingecko API与Next.js实现排查

核心原因：Coingecko免费API的缓存策略 #

Coingecko免费版的/coins/markets接口存在5分钟（300秒）的服务器端缓存，即在缓存窗口内重复请求会直接返回缓存的响应数据，不会获取最新价格。这就是为什么你每20秒请求一次时，只有第一次（页面加载后首次请求）可能命中新数据，后续请求都拿到缓存内容，价格差为0；等待300秒缓存过期后，请求才会返回新价格。

代码实现的问题与优化 #

1. usePrevious Hook的初始值优化 #

你的usePrevious初始ref设置为[{current_price: 0}]，会导致第一次对比时出现无意义的初始差值，且类型不够严谨。可以调整为：

export function usePrevious<T>(value: T) {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

初始返回undefined，避免与真实数据的初始对比干扰，同时通过泛型适配不同数据类型。

2. 替换setInterval为递归setTimeout #

setInterval会严格按固定间隔触发任务，若某次fetch请求耗时超过20秒，会导致多个请求并行执行，引发状态更新混乱。改用递归setTimeout可确保上一次请求完成后再触发下一次：

useEffect(() => {
  let timeoutId: NodeJS.Timeout;

  const fetchUpdate = async () => {
    try {
      const newData = await getUpdate();
      // 仅当价格有变化时更新状态，减少不必要渲染
      const hasPriceChanged = newData.some((coin, idx) => 
        idx < list.length && coin.current_price !== list[idx].current_price
      );
      if (hasPriceChanged) setList(newData);
    } catch (err) {
      console.error('价格更新失败:', err);
    } finally {
      // 匹配API缓存周期，每5分钟请求一次
      timeoutId = setTimeout(fetchUpdate, 300000);
    }
  };

  // 首次延迟20秒请求，之后每5分钟循环
  timeoutId = setTimeout(fetchUpdate, 20000);

  return () => clearTimeout(timeoutId);
}, [list]);

3. Next.js getStaticProps补充配置 #

若希望初始页面数据也能定期更新，可添加revalidate配置，让Next.js后台自动增量生成新页面：

export async function getStaticProps() {
  const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false&locale=en')
  if (!response.ok) {
    console.log('Error', response.status)
  }
  const data = await response.json()
  return {
    props: {data},
    revalidate: 300 // 每5分钟重新生成页面
  }
}

总结 #

• 调整请求间隔：免费API缓存周期为5分钟，将请求间隔改为300秒可避免无效请求，降低429限流风险。
• 优化定时逻辑：递归setTimeout比setInterval更可靠，避免请求叠加。
• 减少无效更新：仅在价格变化时更新状态，提升组件性能。

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