Next.js: Metadata и SEO — ментальная модель

Question

Accepted Answer

Metadata в App Router — **вычисляемое значение**, которое течёт вниз по дереву layout'ов, а не side effect в компоненте. Next владеет `` и мержит shallow (child wins per key). ## Разбор Старый мир (`next/head`, Pages Router): императивно рендерили `` внутри компонентов и надеялись, что их не затрут. Новый мир: вы экспортируете объект `Metadata`; Next резолвит, мержит parent + leaf и инжектит теги server-side — краулеры и social scrapers видят их в initial HTML без JS. Senior insight: `fetch` в `generateMetadata` **dedupe** с fetch page — title из CMS без лишнего round-trip. ``` layout.tsx export const metadata = { title: { template: '%s · Acme', default: 'Acme' } } └─ page.tsx export const metadata = { title: 'Pricing' } → Pricing · Acme ``` ## Что сказать Фрейминг: metadata — computed value down the tree, не «успели ли мы отрендерить tag до snapshot краулера». ## Итог App Router делает SEO SSR-correct by construction: declarative metadata + merge + streaming head до Suspense body.