A hydration warning ate this blog's rankings for 5 months

A hydration warning ate this blog's rankings for 5 months

A media site dropped 34% organic after a Next.js upgrade. Console showed one yellow line nobody read: Text content did not match. Here's the mismatch checklist that traced it.

— Reproduce: load with JS on, then with JS off. The dates rendered differently — server said 'Jan 12', client said '2 days ago'.
— That mismatch made React throw away the server HTML and re-render client-side, blanking content during the swap.
— I logged what Googlebot's cache stored: the post-throwaway empty state.

The culprit list I check now for every mismatch:
— Date.now() / relative time in render
— Math.random() in keys or IDs
— window / localStorage reads during first render
— locale-formatted numbers differing server vs client

We moved relative-time to a post-mount effect and froze the server timestamp.

Result: hydration errors went from 1,200/day in RUM to zero, and organic recovered -34% → +9% over baseline in 8 weeks.