<b>Every page shared one title because of a render cache</b>

<b>Every page shared one title because of a render cache</b>

A recipe site migrated to Next.js and watched click-through rate collapse 38% even though rankings held. Impressions were steady; nobody was clicking.

The SERP told us instantly: thousands of recipes all showed the same title and description in Google — the homepage's. Yet view-source on each recipe looked correct.

The culprit was a full-page edge cache keyed only on path, combined with metadata being set client-side in a <code>useEffect</code>. The SSR HTML that got cached and served to Googlebot carried the default fallback metadata from the app shell. The correct per-recipe tags only appeared after hydration — too late for the crawler, and never present in the cached document.

We moved metadata into the framework's server-side <code>generateMetadata</code> so the correct tags were baked into the cached HTML.

—CTR 38% drop → fully recovered plus +9% in 6 weeks
—Pages with correct SERP title: ~5% → 100%

If your titles depend on hydration, the snippet Google shows is whatever was in the shell.