Next.js App Router: Как правильно триггерить перезагрузку AdSense в SPA-layout при смене динамического параметра?

Question

[ALEX1990]

Привет! Столкнулся с неочевидной проблемой при работе с рекламными блоками в Next.js (App Router).
У меня есть проект со сложной вложенной маршрутизацией (Silo-архитектура). Суть в том, что внутри динамического роута [typeSlug] у меня есть свой layout.tsx, который содержит общие элементы (сайдбар, навигацию) и рекламные блоки. А переключение контента (вкладок) происходит через children.
Структура примерно такая:
/types/[typeSlug]/layout.tsx (здесь висит баннер)
/types/[typeSlug]/page.tsx (вкладка 1)
/types/[typeSlug]/careers/page.tsx (вкладка 2)
/types/[typeSlug]/relationships/page.tsx (вкладка 3)
Для примера, как это выглядит вживую, можно посмотреть на одной из страниц (переключение вкладок над текстом): https://prismatest.com/ru/tests/mbti/types/intj

Проблема:
Когда пользователь переключает вкладки (например, с "Обзора" на "Карьеру"), Next.js перехватывает клик, обновляет URL через History API и подменяет children. layout.tsx при этом, естественно, не перерендеривается.
Из-за этого скрипт Google AdSense, который находится в лейауте, "не понимает", что пользователь перешел на новую страницу, и реклама не обновляется (висит один и тот же баннер, RPM падает).

Что я пробовал:
Вешать useEffect с зависимостью от usePathname(), который вызывает `(window.adsbygoogle = window.adsbygoogle ||

Answer 1

[Пума Тайланд]

ключевое слово — key. Повесь key={pathname} на компонент с рекламой, React при смене пути убьёт старый DOM и пересоздаст с нуля. push({}) на уже заполненный <ins> гугл тупо игнорит, поэтому твой useEffect без пересоздания элемента и не помогал.

Comments

[ALEX1990]

Спасибо попробую.