Next.js中undici AbortError调试及Sanity数据不更新问题求助

一、Undici 是什么？ #

Undici 是 Node.js 内置的高性能 HTTP/HTTP2 客户端，Next.js 13+ 中使用的 fetch API 底层就是基于 Undici 实现的，负责处理所有服务端和客户端的 HTTP 请求。

二、问题原因分析与解决建议 #

1. 无法获取Sanity更新后的新数据 #

可能原因：

• Next.js 静态缓存机制：使用静态生成（SSG）或增量静态再生（ISR）时，Next.js 默认会缓存页面数据，若未配置合理的缓存刷新策略，会持续展示旧数据。
• next-sanity CDN 缓存：next-sanity 默认启用 Sanity CDN 加速，CDN 会缓存旧的 API 响应，导致新数据无法及时同步。
• 未启用预览模式：开发或编辑阶段，若未开启 Sanity 预览模式，会优先获取已发布的缓存数据，无法查看草稿状态的更新内容。

解决办法：

• 给数据请求添加缓存刷新配置：在 fetch 或数据获取逻辑中设置 revalidate 参数，控制缓存刷新频率：

  const data = await fetch(sanityApiUrl, {
    next: { revalidate: 30 } // 每30秒自动刷新缓存
  }).then(res => res.json());
  

• 开发环境关闭 CDN 缓存：在 next-sanity 客户端配置中仅生产环境启用 CDN：

  import { createClient } from 'next-sanity';
  
  export const client = createClient({
    projectId: 'your-project-id',
    dataset: 'production',
    apiVersion: '2023-08-01',
    useCdn: process.env.NODE_ENV === 'production',
  });
  

• 启用 Sanity 预览模式：通过预览模式直接从 Sanity Draft API 获取最新的未发布数据。

2. 大量 Undici AbortError 报错 #

错误本质：

该错误表示 HTTP 请求被主动中止，可能是请求超时、组件卸载时未清理请求，或是框架缓存机制中断了请求。

可能原因：

• 请求超时未处理：Sanity API 响应过慢，超出 Undici 默认超时时间，导致请求被中止。
• 客户端组件请求未清理：客户端组件发起请求后，组件因路由跳转等原因被卸载，但请求未被中止，触发报错。
• Next.js 路由缓存冲突：Next.js 13 App Router 的缓存机制可能中断重复或未完成的请求。
• Node.js 版本兼容性：Next.js 13.4.13 与部分 Node.js 版本（如 18.x 早期版本）的 Undici 存在兼容性问题。

解决办法：

• 给请求添加超时控制：使用 AbortSignal.timeout 设置合理超时时间，并过滤中止类错误：

  try {
    const res = await fetch(sanityApiUrl, {
      signal: AbortSignal.timeout(10000) // 设置10秒超时
    });
    const data = await res.json();
  } catch (err) {
    if (err.name !== 'AbortError') {
      console.error('请求失败:', err);
    }
  }
  

• 客户端组件中清理请求：用 React useEffect 结合 AbortController，在组件卸载时中止请求：

  import { useEffect, useState } from 'react';
  import { client } from '@/sanity/client';
  
  export default function MyComponent() {
    const [data, setData] = useState(null);
  
    useEffect(() => {
      const controller = new AbortController();
      const fetchData = async () => {
        try {
          const result = await client.fetch(query, {}, { signal: controller.signal });
          setData(result);
        } catch (err) {
          if (err.name !== 'AbortError') {
            console.error('获取数据失败:', err);
          }
        }
      };
      fetchData();
      return () => controller.abort(); // 组件卸载时中止请求
    }, []);
  
    return <div>{data && JSON.stringify(data)}</div>;
  }
  

• 关闭开发环境缓存：启动开发服务器时添加参数禁用缓存：

  next dev --no-cache
  

• 匹配推荐 Node.js 版本：升级或降级到 Next.js 13.4.13 官方推荐的版本（如 18.17.0 或最新 LTS 版本）

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