Nextjs 脚本标签有时不加载答案

【问题标题】：Nextjs Script tag are not loading sometimesNextjs 脚本标签有时不加载
【发布时间】：2022-08-14 14:34:21
【问题描述】：

以上是脚本标签未加载时出现的错误消息。我有大约 6 个脚本标签。

我的代码中有这些 Scripts 标签；有时他们会加载，有时他们不会。但是如果我在浏览器中检查它们，我可以在代码中看到它们。

<Script src=\"assets/js/jquery-3.5.1.min.js\" strategy=\"beforeInteractive\" />
 <Script src=\"assets/js/bootstrap.bundle.min.js\" strategy=\"beforeInteractive\" />

我已将它们包含在 pages/_app.js 和 pages/_document.js 以及其他一些页面中，只是为了进行测试，但它们无法正常工作。

只有在我刷新页面后，它们才开始正常工作。

操作系统：Linux
在它们正确加载的窗口上。仅在 Linux 上我遇到了这个问题。

有人可以帮我解决这个问题，因为我需要快速解决这个问题吗？感谢你的帮助。

你在生产中测试过吗？
确保 Script 标签不是 nextjs 提供的 <Head /> 组件中的包装器
添加屏幕截图。
@Sodhisaab 是的，我没有将它包含在 <Head /> 标记中。
@C.Lewis 我已经添加了上面错误消息的屏幕截图。

标签： javascript reactjs next.js frontend script

【解决方案1】：

这是我能够重现的错误。我为您提交了bug report。

【讨论】：

【解决方案2】：

<Script /> 组件加载的 jQuery 在默认情况下 React 水合你的页面时肯定不可用（如果它在 useEffect 期间可用，那么这是一个错误，你应该将它报告给 Next.js）。

<Script /> 组件旨在为您处理非必要的脚本（例如，谷歌分析对于网站所有者来说是必不可少的，但对于呈现页面不是必不可少的）。因此，Next.js 永远不会在 React 为您的页面补充水分之前加载脚本，从而带来更好的性能和用户体验。

在这种情况下，jQuery 应该被认为是渲染页面的必要脚本，因此不应通过<Script /> 加载它。

我会推荐以下方法：

在您的包中包含 jQuery 和引导程序

import $ from 'assets/js/jquery-3.5.1.min.js';
import 'assets/js/bootstrap.bundle.min.js';

使用beforeInteractive

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

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        {/** You can place it everywhere as long as it is inside a custom _document */}
        {/** And Next.js will always inject the script to the <head /> */}
        <Script
          src="assets/js/jquery-3.5.1.min.js"
          strategy="beforeInteractive"
        ></Script>
      </body>
    </Html>
  )
}

【讨论】：