NextJS如何让核心及打包脚本实现异步加载？

直接修改<NextScript />的加载策略不可行——它包含React、Next.js运行时等核心依赖脚本，强制异步会导致应用初始化失败。不过有两种可靠方案能实现你要的“预加载页即时显示”效果：

方案1：自定义_document.jsx嵌入预加载态 #

利用SSR特性，在初始HTML里直接插入内联样式和静态加载DOM，这些内容浏览器收到就能渲染，完全不用等JS下载完成。同时保留<NextScript />的默认逻辑，不破坏应用运行：

// pages/_document.jsx
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          {/* 预加载容器：内联样式保证优先渲染 */}
          <div id="preloader" style={{
            position: 'fixed',
            inset: 0,
            background: '#ffffff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 9999,
            fontSize: '2rem'
          }}>
            正在加载...
          </div>

          <Main />
          <NextScript />

          {/* 内联脚本：页面加载完成后隐藏预加载态 */}
          <script dangerouslySetInnerHTML={{ __html: `
            window.addEventListener('DOMContentLoaded', () => {
              document.getElementById('preloader').remove();
            });
          ` }} />
        </body>
      </Html>
    )
  }
}

export default MyDocument

关键说明 #

• 内联CSS和DOM是初始HTML的一部分，浏览器解析到就会渲染，不会被JS加载阻塞
• 用DOMContentLoaded事件触发隐藏，比load事件更快（无需等待图片等非核心资源加载完成）

方案2：App Router 场景的简化操作 #

如果你的项目用Next.js 13+的App Router，直接创建app/loading.tsx即可，框架会自动在页面组件加载前展示这个预加载组件，不用折腾_document.jsx：

// app/loading.tsx
export default function Loading() {
  return (
    <div style={{
      position: 'fixed',
      inset: 0,
      background: '#ffffff',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <div>加载中...</div>
    </div>
  )
}

关于修改<NextScript />的补充 #

别尝试把<NextScript />改成异步——它负责加载Next.js核心运行时、React和你的应用代码，这些脚本有严格的加载顺序要求。强制异步会导致 hydration 失败、组件无法渲染等致命问题。第三方脚本的加载策略完全不适用于核心框架脚本。

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