NextJS路由切换时如何重新加载广告JS并刷新广告位？

核心逻辑 #

因为NextJS客户端路由跳转不会触发全页重载，第三方广告SDK的全局实例、已标记的广告位状态会残留于内存中，导致新页面广告初始化失败。我们可以通过「客户端侧动态加载SDK + 路由/组件生命周期联动清理状态」解决该问题。 #

具体实现 #

1. 封装通用广告位组件（兼容NextJS 13+ App Router / Pages Router） #

以下为App Router版本示例，Pages Router仅需移除首行'use client'，路由监听替换为next/router的事件监听即可：

'use client'
import { useEffect, useRef } from 'react'
import { usePathname } from 'next/navigation'

// 配置项
const AD_SDK_URL = '//cdn.adsite.com/static/js/ad.js'
// 存储已加载的广告位ID，用于清理
const usedAdSlots = new Set<string>()

// 单例加载广告SDK，避免重复插入
const loadAdSDK = () => {
  return new Promise((resolve, reject) => {
    // 已加载直接返回
    if (window.AdSDK) return resolve(window.AdSDK)
    const script = document.createElement('script')
    script.src = AD_SDK_URL
    script.type = 'text/javascript'
    script.onload = () => resolve(window.AdSDK)
    script.onerror = reject
    document.body.appendChild(script)
  })
}

// 清理已注册的广告位状态
const clearAdSlots = () => {
  if (window.AdSDK) {
    // 优先调用广告SDK官方提供的销毁/重置API，需根据广告服务商文档替换为实际方法
    usedAdSlots.forEach(slotId => {
      window.AdSDK.destroySlot?.(slotId)
    })
    // 若SDK无公开销毁API，可兜底清理全局SDK实例，下次进入页面重新加载
    // delete window.AdSDK
    // const oldScript = document.querySelector(`script[src="${AD_SDK_URL}"]`)
    // oldScript?.remove()
  }
  usedAdSlots.clear()
}

export default function AdSlot({ slotId }: { slotId: string }) {
  const adRef = useRef<HTMLDivElement>(null)
  const pathname = usePathname()

  useEffect(() => {
    // 路由变化时清理所有旧广告位
    clearAdSlots()
  }, [pathname])

  useEffect(() => {
    if (!adRef.current) return
    usedAdSlots.add(slotId)

    // 加载SDK后初始化当前广告位
    loadAdSDK().then((AdSDK) => {
      // 根据广告服务商文档替换为实际的广告位初始化方法
      AdSDK.renderSlot(slotId)
    })

    // 组件卸载时清理当前广告位
    return () => {
      if (window.AdSDK) {
        window.AdSDK.destroySlot?.(slotId)
      }
      usedAdSlots.delete(slotId)
    }
  }, [slotId])

  return <div ref={adRef} id={slotId}></div>
}

2. 页面中使用组件 #

直接传入对应广告位ID即可：

// 页面组件中
import AdSlot from '@/components/AdSlot'

export default function Page() {
  return (
    <div>
      {/* 其他页面内容 */}
      <AdSlot slotId="ad-tag-6098" />
      <AdSlot slotId="ad-tag-6099" />
      <AdSlot slotId="ad-tag-6076" />
    </div>
  )
}

注意事项 #

• 优先查阅广告服务商的开发文档，使用官方提供的广告位销毁、SDK重置方法，避免暴力删除全局变量导致的异常。
• 所有广告相关逻辑均在客户端执行，不要在服务端渲染阶段引入广告SDK或渲染广告位DOM，避免hydration不匹配报错。
• 若同一个广告位ID需要在多个页面复用，无需修改ID，清理逻辑会自动处理旧页面的广告位状态。

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