The content that existed for 200 milliseconds

The content that existed for 200 milliseconds

A news site SSR'd full articles, then hydrated with React. The HTML was perfect. So why were freshly published articles indexing with the wrong, generic content?

We captured the rendered DOM at multiple points. At 0ms: correct article. After hydration: a different, templated 'loading personalized feed' block had replaced it.

The cause was a hydration mismatch. The server rendered the article using build-time data; the client hydrated using a personalization API that, for a logged-out crawler with no cookies, returned a default empty state — and React, detecting a mismatch, discarded the server HTML and re-rendered with the client's empty version.

Google's renderer runs the JavaScript. It captured the post-hydration DOM, not the beautiful server HTML. The correct content existed only in the gap before hydration overwrote it.

Hydration mismatches don't just throw console warnings — they can swap your indexable content for whatever the client computes, and the crawler keeps the client's answer.

Fix: server and client rendered identical content for anonymous sessions; personalization deferred to a non-indexed boundary.

Result: correct content indexing within days, new-article rankings up 2.3 positions average.