Next.js/React页面加载超时重定向方案咨询

问题根源 #

你当前用useEffect初始化定时器的逻辑存在偏差：组件挂载（useEffect执行）的时间晚于页面开始刷新的时间，慢网环境下组件可能延迟很久才挂载，导致定时器实际触发时间远超出预期的6秒。

方案1：基于页面导航起始时间精准计时 #

利用window.performance.timing.navigationStart获取页面开始加载的时间戳，计算当前已流逝的时间，动态调整定时器剩余时长，确保从页面刷新开始算满设定时间后执行检查。

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

export default function Home() {
  const router = useRouter();

  useEffect(() => {
    const timeoutMs = 6000;
    // 获取页面开始加载的时间戳
    const navigationStart = window.performance.timing.navigationStart;
    // 计算已过去的时间
    const elapsed = Date.now() - navigationStart;
    // 剩余等待时间，若已超时则直接执行判断
    const remaining = Math.max(0, timeoutMs - elapsed);

    const timer = setTimeout(() => {
      if (document.readyState !== 'complete') {
        console.log('页面未按时加载完成，重定向至/work');
        router.push('/work');
      }
    }, remaining);

    return () => clearTimeout(timer);
  }, [router]);

  return (
    <div>你的首页内容（含视频）</div>
  );
}

方案2：结合load事件与超时兜底 #

监听window的load事件（页面所有资源加载完成时触发），若设定时间内未触发该事件，则执行重定向；一旦触发则清除定时器，避免无效跳转。

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

export default function Home() {
  const router = useRouter();

  useEffect(() => {
    const timeoutMs = 6000;
    let timer;

    const handlePageLoad = () => {
      clearTimeout(timer);
      console.log('页面已完全加载');
    };

    window.addEventListener('load', handlePageLoad);

    timer = setTimeout(() => {
      console.log('页面加载超时，重定向至/work');
      router.push('/work');
      window.removeEventListener('load', handlePageLoad);
    }, timeoutMs);

    return () => {
      clearTimeout(timer);
      window.removeEventListener('load', handlePageLoad);
    };
  }, [router]);

  return (
    <div>你的首页内容（含视频）</div>
  );
}

关键注意点 #

• 两种方案都确保只有在页面未完全加载时才触发重定向，避免干扰正常加载流程。
• Next.js客户端路由的router.push不会触发页面刷新，无需担心循环重定向问题。
• 页面内的图片、视频等资源加载状态会被document.readyState和load事件覆盖，判断逻辑准确。

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