如何阻止Next.js特定脚本在404/410页面加载？

在Next.js的_document.js中，我们可以通过服务端获取页面状态码，再根据状态码条件渲染广告脚本，具体操作如下：

1. 在getInitialProps中获取页面状态码 #

修改getInitialProps方法，从上下文ctx里提取响应状态码，将其作为额外属性返回给组件：

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    // 拿到服务端响应的状态码，默认设为200兜底
    const statusCode = ctx.res?.statusCode || 200;
    return {
      ...initialProps,
      styles: React.Children.toArray([initialProps.styles]),
      statusCode // 把状态码传入组件props
    };
  }

  // ... 其他原有代码
}

2. 条件渲染广告脚本 #

在render方法里，通过this.props.statusCode判断当前页面状态，只在状态码不是404或410时渲染广告脚本：

render() {
  const { statusCode } = this.props;
  // 排除404和410错误页面
  const shouldLoadAdScript = ![404, 410].includes(statusCode);

  return (
    <Html lang="en">
      <Head>
        {CssBaseline.flush()}
        
        {/* 只有符合条件时才加载广告脚本 */}
        {shouldLoadAdScript && (
          <script 
            async 
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-************"
            crossorigin="anonymous"
          ></script>
        )}
        
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

原理说明 #

_document.js是Next.js负责服务端渲染页面骨架的核心组件，getInitialProps方法会在服务端执行，能直接获取当前请求的响应状态码。通过把状态码传递到渲染阶段，就能精准控制广告脚本的加载时机，避免在404/410这类错误页面加载不必要的广告资源。

内容的提问来源于stack exchange，提问作者Shilajit Dutta