相关疑难解决方法(0)

为什么使用 beforeInteractive 策略的 next.js 脚本标签不加载第三方脚本？

我尝试了解带有 beforeInteractive 策略的 next.js 脚本标签如何工作。为了进行测试，我只使用了 lodash。但我不断收到ReferenceError: _ is not Defined。我认为当使用 beforeInteractive 加载脚本时，它应该在我的页面组件中全局可用，因为它从服务器注入到初始 Html 中，并且我可以在 useEffect 挂钩中使用它来更改 div。有人可以向我解释为什么它不起作用或者我做错了什么吗？我没有通过 npm 安装它，因为我想弄清楚它是如何工作的。

我有一个简单的 _document.js，并在这个 _document.js 中添加了一个带有 beforeInteractive 策略的 Next.js 脚本标签。next.js 文档说： 此策略仅在 _document.js 内部有效，旨在加载整个站点所需的脚本（即，当应用程序中的任何页面已加载到服务器端时，脚本将加载）。

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

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script
          src="https://unpkg.com/lodash@4.17.20"
          strategy="beforeInteractive"
        ></Script>
      </body>
    </Html>
  )
}

Run Code Online (Sandbox Code Playgroud)

然后我在页面文件夹中有一个简单的页面组件。我添加了 getServerSideProps 函数来使用 ServerSideRendering。

如果您从页面导出名为 getServerSideProps（服务器端渲染）的函数，Next.js 将使用 getServerSideProps 返回的数据在每个请求上预渲染此页面。