<b>A hydration mismatch was rewriting the page Google already indexed</b>

<b>A hydration mismatch was rewriting the page Google already indexed</b>

A fintech blog watched its average position slide from 4.2 to 9.8 over six weeks. Content was untouched. The only change: a new personalization banner at the top of every article.

The console told the story. <code>Warning: Text content did not match. Server: "Read the 2024 guide" Client: "Welcome back"</code>. A classic hydration mismatch. React, finding the server HTML didn't match what the client wanted to render, threw away the entire server tree and re-rendered from scratch on the client.

Googlebot caught the page mid-discard. For a fraction of a second the article was a blank shell while React rebuilt it. The crawler's render budget ran out inside that window often enough that ~30% of recrawls captured an empty <code>&lt;main&gt;</code>.

We moved personalization out of the hydration path — server-render the neutral default, swap to personalized after mount with no DOM reconciliation conflict.

—Position 9.8 → 4.0 in 8 weeks
—Hydration warnings in production: 14 per page → 0

A single mismatched string was nuking the whole render tree.