Nextjs 脚本标签有时不加载

Question

以上是脚本标签未加载时出现的错误消息。 我有大约 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
在 windows 上，它们正确加载。 仅在 Linux 上我遇到了这个问题。

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

Answer 1

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

<Script />组件旨在为您处理非必要的脚本（例如，Google Analytics 仅对网站所有者至关重要，但对于呈现页面不是必需的）。 因此 Next.js 永远不会在 React 水合您的页面之前加载脚本，从而获得更好的性能和用户体验。

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

我会推荐以下方法：

在您的捆绑包中包括 jQuery 和引导程序

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

使用beforeInteractive

注意： <Script strategy="beforeInteractive" />只能在自定义_document中使用！

// _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>
  )
}

<Script />组件的更多细节： https://nextjs.org/docs/basic-features/script

Answer 2

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

Nextjs 脚本标签有时不加载

问题描述

2 个解决方案

解决方案1
1 2022-08-14 06:33:27

解决方案2
0 2022-08-12 15:37:15

Nextjs 脚本标签有时不加载

问题描述

2 个解决方案

解决方案1 1 2022-08-14 06:33:27

解决方案2 0 2022-08-12 15:37:15

解决方案1
1 2022-08-14 06:33:27

解决方案2
0 2022-08-12 15:37:15