Next.js应用持续加载，预加载器无法自动消失求助

预加载器不自动消失的核心问题 #

原HTML里的预加载器隐藏逻辑通常是监听DOMContentLoaded或window.onload这类原生事件，但Next.js基于React的渲染流程和原生HTML不同，原生事件可能没在正确时机触发，或者代码执行逻辑和React的组件生命周期脱节，导致预加载器无法自动隐藏。

具体修复步骤 #

• 用React钩子接管预加载器逻辑
  在根组件（比如app/layout.js或app/page.js）中，通过useEffect和状态来控制预加载器的显示，和Next.js的渲染流程同步：

  import { useEffect, useState } from 'react';
  
  export default function RootLayout({ children }) {
    const [isLoading, setIsLoading] = useState(true);
  
    useEffect(() => {
      // 监听页面资源加载完成事件
      const finishLoading = () => setIsLoading(false);
      window.addEventListener('load', finishLoading);
  
      // 兜底：超时强制隐藏，避免资源加载异常卡住
      const timeout = setTimeout(finishLoading, 3000);
  
      return () => {
        window.removeEventListener('load', finishLoading);
        clearTimeout(timeout);
      };
    }, []);
  
    return (
      <html lang="en">
        <body>
          {isLoading && <div className="preloader">你的预加载器内容</div>}
          {!isLoading && children}
        </body>
      </html>
    );
  }
  

  之后要删掉原HTML里控制预加载器的原生<script>，避免逻辑冲突。

• 优化main-app.js加载缓慢问题

  • 用Next.js的动态导入拆分代码，把非首屏必需的组件（比如Sanity相关组件）延迟加载：

    import dynamic from 'next/dynamic';
    const SanityContent = dynamic(() => import('./components/SanityContent'), {
      ssr: false,
      loading: () => <div>内容加载中...</div>
    });
    

  • 检查next.config.js是否启用压缩：

    /** @type {import('next').NextConfig} */
    const nextConfig = {
      compress: true,
    };
    
    module.exports = nextConfig;
    

  • 用Next.js的Image组件替换原生<img>，自动优化图片加载性能，减少资源体积。

额外排查点 #

• 打开浏览器控制台，检查是否存在Sanity客户端初始化错误、组件渲染报错，这类问题会导致页面卡住，预加载器无法消失。
• 查看Vercel构建日志，确认打包过程中有没有依赖缺失、语法错误等警告。

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