如何处理Next.js router.refresh引发的net::ERR_NETWORK_IO_SUSPENDED错误？

针对你遇到的设备休眠后net::ERR_NETWORK_IO_SUSPENDED错误，以下是几个不破坏router.refresh缓存与状态保留特性的可行方案：

方案1：通过Page Visibility API控制定时器启停 #

设备休眠时浏览器页面会进入hidden状态，利用这个API可以精准暂停定时器，恢复可见时重启，从根源避免休眠时触发网络请求：

import { useRouter, useEffect } from 'next/router';

const YourComponent = () => {
  const router = useRouter();
  let interval = null;

  const startRefresh = () => {
    interval = setInterval(() => {
      router.refresh();
    }, REFRESH_RATE_MIL);
  };

  const stopRefresh = () => {
    if (interval) {
      clearInterval(interval);
      interval = null;
    }
  };

  useEffect(() => {
    // 初始启动定时器
    startRefresh();

    // 监听页面可见性变化
    const handleVisibilityChange = () => {
      if (document.hidden) {
        stopRefresh();
      } else {
        startRefresh();
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      stopRefresh();
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  return <div>Your content</div>;
};

方案2：结合网络状态检测与错误捕获 #

即使定时器没暂停，也可以通过navigator.onLine判断网络可用性，同时给router.refresh包裹错误捕获，确保单个请求失败不会导致应用崩溃：

import { useRouter, useEffect } from 'next/router';

const YourComponent = () => {
  const router = useRouter();
  let interval = null;

  const safeRefresh = async () => {
    // 仅在网络在线时执行刷新
    if (!navigator.onLine) return;
    try {
      await router.refresh();
    } catch (err) {
      // 捕获网络错误，仅做日志或忽略，不抛出
      if (err.message.includes('ERR_NETWORK_IO_SUSPENDED')) {
        console.warn('网络暂停，跳过本次刷新');
      }
    }
  };

  useEffect(() => {
    interval = setInterval(safeRefresh, REFRESH_RATE_MIL);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return <div>Your content</div>;
};

方案3：休眠恢复后校准刷新间隔 #

设备休眠时定时器可能会滞后，恢复后一次性触发多个刷新请求，校准间隔可以避免这种情况：

import { useRouter, useEffect } from 'next/router';

const YourComponent = () => {
  const router = useRouter();
  let interval = null;
  let lastRefreshTime = Date.now();

  const scheduleNextRefresh = () => {
    const elapsed = Date.now() - lastRefreshTime;
    // 计算剩余时间，避免休眠后立即触发刷新
    const delay = Math.max(0, REFRESH_RATE_MIL - elapsed);
    interval = setTimeout(() => {
      router.refresh();
      lastRefreshTime = Date.now();
      scheduleNextRefresh();
    }, delay);
  };

  useEffect(() => {
    scheduleNextRefresh();

    const handleVisibilityChange = () => {
      if (!document.hidden) {
        // 恢复可见时重新校准
        if (interval) clearTimeout(interval);
        scheduleNextRefresh();
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      if (interval) clearTimeout(interval);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  return <div>Your content</div>;
};

方案选择建议 #

• 优先选方案1，从根源避免休眠时的网络请求，最稳定且性能开销最小；
• 方案2作为补充，即使页面可见但网络临时中断也能避免崩溃；
• 方案3适合对刷新时机精度要求较高的场景，避免休眠恢复后的密集请求。

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