React/Next.js中Async异步脚本不运行、广告不显示问题求助

你遇到的广告不展示问题本质是脚本执行和DOM渲染的时序错配，和之前尝试的三种加载方式的缺陷直接相关：

1. 亚马逊onejs广告脚本的运行逻辑是：加载后立刻查找页面上和adInstanceId匹配id的div容器，找到就把广告插入容器，找不到就默认把广告追加到页面body底部（也就是用同步脚本时看到的固定在底部的现象），如果脚本加载时因为拦截、环境问题没正常执行，会直接静默失败，不会抛出明确报错。
2. Next.js本身存在SSR/CSR hydration流程，不管是把脚本放在<Head>里、用默认策略的<Script>组件，还是无判断逻辑的useEffect动态插脚本，都很容易出现「脚本已经加载执行完，对应id的广告div还没挂载到真实DOM上」的情况，脚本找不到目标容器直接退出，广告自然无法展示。

这个方案适配Next.js Pages Router和App Router，从根源解决时序问题：

1. 如果用App Router，广告组件必须在顶部加'use client'声明为客户端组件，服务端组件没有浏览器DOM API，无法正常插入脚本
2. 等广告容器真实挂载到DOM后再加载脚本，同时加重复加载拦截、脚本加载完成后手动触发广告拉取，避免时序错配

'use client' // App Router保留此行，Pages Router可删除
import { useEffect, useRef } from 'react'

export default function AmazonAdBlock() {
  const adContainer = useRef(null)
  const adLoaded = useRef(false)
  const AD_CONTAINER_ID = 'amzn-assoc-ad-944106c8-19e7-4323-aa3f-71c0cef0998b'
  const AD_SCRIPT_SRC = 'https://z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=944106c8-19e7-4323-aa3f-71c0cef0998b'

  useEffect(() => {
    if (adLoaded.current || !adContainer.current) return
    // 兜底给容器设置正确id，避免渲染时属性丢失
    adContainer.current.id = AD_CONTAINER_ID

    // 检查广告脚本是否已经加载过
    const existedScript = document.querySelector(`script[src*="amazon-adsystem.com/widgets/onejs"]`)
    if (existedScript) {
      window.amznads?.fetchAds?.()
      adLoaded.current = true
      return
    }

    // 容器就绪后再插入广告脚本
    const adScript = document.createElement('script')
    adScript.src = AD_SCRIPT_SRC
    adScript.async = true
    adScript.onload = () => {
      // 脚本加载完成后手动触发广告拉取，解决时序差问题
      window.amznads?.fetchAds?.()
    }
    document.body.appendChild(adScript)
    adLoaded.current = true

    return () => {
      adLoaded.current = false
    }
  }, [])

  return <div ref={adContainer} className="my-6 amazon-ad-slot"></div>
}

如果要使用Next.js原生<Script>组件，必须指定加载策略为afterInteractive，不能用默认的提前加载策略，参考写法：

'use client'
import Script from 'next/script'

export default function AmazonAdBlock() {
  const AD_CONTAINER_ID = 'amzn-assoc-ad-944106c8-19e7-4323-aa3f-71c0cef0998b'
  const AD_SCRIPT_SRC = 'https://z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=944106c8-19e7-4323-aa3f-71c0cef0998b'
  return (
    <>
      <div id={AD_CONTAINER_ID} className="my-6 amazon-ad-slot"></div>
      <Script
        src={AD_SCRIPT_SRC}
        strategy="afterInteractive"
        onLoad={() => {
          window.amznads?.fetchAds?.()
        }}
      />
    </>
  )
}

• 脚本地址要补全https:协议头，原来代码里的//z-na.xxx是协议相对路径，本地开发http环境下容易出现跨域加载失败问题
• 不要给广告容器加display: none、visibility: hidden这类隐藏样式，亚马逊广告脚本检测到容器不可见会直接终止渲染
• 本地测试时要关闭广告拦截插件，这类插件会直接拦截亚马逊广告的脚本请求，建议用无插件的无痕窗口验证效果
• 如果本地localhost环境广告始终不返回内容，先检查亚马逊联盟后台是否把你的正式域名加入了广告位允许列表，本地域名不在白名单时不会返回广告内容，部署到正式域名即可正常展示
• React严格模式下useEffect会执行两次，代码里的adLoaded标记就是为了防止重复插入脚本导致的异常

内容的提问来源于stack exchange，提问作者Julian Costinea