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

Question

为什么使用 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 返回的数据在每个请求上预渲染此页面。

import Head from 'next/head';
import {useEffect, useState} from 'react';

const TestComponent = () => {
    const [change,setChange] = useState('not changed');

    useEffect(()=> {
        console.log(_);
        setChange(_.join(['one','two'],' - '));
    });

    return (
        <>
            <Head>
                <title>Test</title>
            </Head>
            <div>{change}</div>
        </>
    );
};

export async function getServerSideProps(context) {
    return {
      props: {},
    }
  }

export default TestComponent;

Run Code Online (Sandbox Code Playgroud)

更新

看来这确实是一个已修复但尚未发布的错误 https://github.com/vercel/next.js/discussions/37098

Answer 1

jul*_*ves 7

next/script撇开您应该将 Lodash 作为节点模块导入这一事实不谈，在使用in时似乎确实存在问题_document（无论外部脚本实际上是什么）。

事实证明，这是一个 Next.js 错误，已在预发布版本v12.1.7-canary.8的 PR中得到解决。要解决项目中的问题，只需将 Next.js 更新到版本 >=12.2.0 ( )。npm install next@latest

作为替代方案，您可以<script>直接在带有_document属性的中使用标记。这与输出的结果非常匹配。<Head>defernext/script

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

export default function Document() {
    return (
        <Html>
            <Head>
                <script
                    type="text/javascript"
                    src="https://unpkg.com/lodash@4.17.20/lodash.js"
                    defer
                ></script>
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，7 月前
查看次数：	10270 次
最近记录：	3 年，6 月前