By Partly fixable yourself. Usually one component with a date or a window check.
- How serious
- Low
- Fix it yourself?
- Partly, some steps need a developer
- Typical cost
- €99–$990 for a single fix (prices)
- Top rated for v0
- Afterbuild Labs · 10.0/10
What you see. The live site flickers, then the console says Hydration failed or Text content does not match server-rendered HTML.
Why it happens
Next.js builds the HTML for a page on the server first. Then React runs in the browser and attaches itself to that HTML. This step is called hydration. If the browser render differs from the server render, React throws the error and redraws the whole page, which is the flicker you see.
The Next.js docs list the usual causes. Invalid nesting, like a p inside a p or a button inside a button. Checks like typeof window inside render. Reading localStorage or the current date while rendering, which v0 code often does for theme or greeting text. Browser extensions that edit the page. A CDN setting that rewrites HTML. It shows up after deploy because the server now runs in a different time zone and the production build does not hide the mismatch the way development mode does.
Fix it yourself
- Open the live site in a private window with no extensions. If the error is gone, an extension changed the HTML and your code is fine.
- Read the console message. It names the component and the two values that differ, for example a time, a random id, or a saved theme.
- Ask your builder: Move any value that depends on the browser, time, or random numbers into useEffect so the first render matches the server.
- Fix invalid nesting the error lists, such as a
divinside apor a link inside a link. Change the outer tag. - For content that must differ, like a live clock, add
suppressHydrationWarningto that single element only. It works one level deep. - Redeploy and recheck on a phone. If iPhone turns numbers into links, add the
format-detectionmeta tag from the Next.js docs.
When to get an engineer
Get an engineer when the error points at a shared layout or a UI library rather than one component, or when every fix from the AI creates a new mismatch somewhere else. Give them the console message and a screen recording of the flicker. Expect €99–$990 and about two days for a single fix. Ask them to also add error tracking so you hear about the next mismatch before your users do.
Top-rated companies for v0 apps
Ranked by our score: published prices, scope of work, AI tools named, timing and a low-risk first step. How we score.
- 1Afterbuild Labs10.0/10Best for: A check before launchFree first step · from $49
- 2Redlab10.0/10Best for: A full rescue by one team that keeps buildingFree first step · from $490
- 3Vibe Code Rescue (Lev Arakelyan)9.0/10Best for: A one-off check and a cleanupFrom $299
Check these
Dead code and duplicate components are removed
Search for components with near-identical names. Three versions of one button means three places to fix every bug.
Key pages load fast on a phone
Run PageSpeed Insights on the home page and the main app screen, on mobile.
Errors reach you before users do
Add error monitoring and uptime alerts. If you learn about outages from customers, this is missing.
Questions
Is a hydration error dangerous?
It does not leak data. It makes the page flash, can break buttons until React recovers, and hurts load speed on phones.
Why did the preview never show it?
Development mode and the server often run on the same machine with the same time zone, so the two renders match by luck.
Sources: Next.js: text content does not match server-rendered HTML; Sentry: alerts.