如何使用 Next/Head 渲染脚本

IT技术 javascript reactjs next.js
2021-05-10 17:25:56

正如我从我的SO 问题中了解到的，我可以使用 next/head 在我的 React/Next JS 应用程序的组件中嵌入一个脚本标签。所以，我是这样处理的：

import React, { Component } from "react";
...
import Head from "next/head";
export const Lead = props => {
  return (
...
        <Head>
          <script
            class="3758abc"
            type="text/javascript"
            src="https://cdn2.fake.com/Scripts/embed-button.min.js"
            data-encoded="1234sdkljfeiASD9A"
          ></script>
        </Head>
...
  );
};

不幸的是，没有任何渲染。我不知道我是否在这里遗漏了一些明显的东西......我正在使用 Next 9.1.7。

我的 _app.js 看起来像这样：


import App, { Container } from "next/app";
import Page from "../components/Page";
import { ApolloProvider } from "react-apollo";
import withData from "../lib/withData";

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    // this exposes the query to the user
    pageProps.query = ctx.query;
    return { pageProps };
  }
  render() {
    const { Component, apollo, pageProps } = this.props;

    return (
      // <Container>
      <ApolloProvider client={apollo}>
        <Page>
          <Component {...pageProps} />
        </Page>
      </ApolloProvider>
      // </Container>
    );
  }
}

export default withData(MyApp);

我的 _document 看起来像这样：


import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static getInitialProps = async ctx => {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } finally {
      sheet.seal();
    }
  };
}
2个回答

在您的_document.js, 尝试在<NextScript />标签下方添加脚本

<body>
   <Main />
   <NextScript />
   <script
        class="3758abc"
        type="text/javascript"
        src="https://cdn2.fake.com/Scripts/embed-button.min.js"
        data-encoded="1234sdkljfeiASD9A"></script>
</body>

我一直在研究类似的问题。

我想上面说的地方，答案<script>内的标签<body>，但不幸的是它也呈现由生成的内容<script>在底部到DOM标签（如，它正确地运行脚本，还存储了这一切额外的数据<body>标签）。

我还尝试将脚本包装在<Head>来自next/head（仍在主体内部）的组件中，这阻止了 DOM 渲染，但该修复根本没有运行脚本。

最后，对我的用例有用的是将脚本加载移动到_app.js文件中：它可以正确运行脚本，而不会向 DOM 渲染额外的内容。它看起来像这样：

import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <React.Fragment>
      <Head>
        <script
          id="my-script"
          src="https://scriptsource.com/script"
          type="text/javascript"
        ></script>
      </Head>

      <LayoutComponent {...pageProps}>
        <Component {...pageProps} />
      </LayoutComponent>
    </React.Fragment>
  );
}

export default MyApp;

我不知道这个解决方案是否会导致我不知道的任何不良影响，但到目前为止它已经解决了我的问题。

更新（2021 年 6 月）

正如 Ahmed 在下面指出的，我上面写的解决方案有一些副作用。我注意到的是图像加载被脚本执行阻止。

我看到 Next 11 刚刚发布，其中包含<Script>用于此目的的新标签。

我把所有的props都搬进了tag里，setstrategy="beforeInteractive"然后直接把这个tag放到Page组件里；现在一切都按预期运行。

以下是 Next 11 Script 标签的文档：https : //nextjs.org/docs/basic-features/script

其它你可能感兴趣的问题
上一篇组件如何对其子组件进行布局？ 下一篇带有钩子的 React-Table 失去了对表内输入的关注？