Fix the hydration mismatch
Frameworks such as Svelte, React and Vue render a page on the server, then "hydrate" it in the browser by attaching their code to that HTML. When the browser renders something different from what the server sent, the framework logs a hydration mismatch warning and patches or rebuilds the page. Visitors see content flash or jump, and the page may not respond until it is done. This check reads those warnings on the site's own pages.
Find out whether your site has this problem, and every other check, in one free scan.
Check your site freeWhy it matters
When the server and the browser render different pages, visitors see content jump or flash as the framework corrects it, and parts of the page can stop responding until it does.
How to fix
- 1 Open the browser console on the page and read the hydration warning: it names the element or text that differs.
- 2 Look for values that differ between server and browser: dates and times, random ids, the visitor's locale, or data read from localStorage.
- 3 Render those values only in the browser (after mount) or pass the server's value down so both sides agree.
- 4 Reload with the console open and confirm the warning is gone.
Common mistakes
- Rendering dates, times or random ids on the server and again in the browser, where they come out different.
- Reading localStorage, cookies or the window size during the first render, which the server cannot see.
- Ignoring the warning because it is not an error: it still means visitors get a different first page than the one sent.
How to verify
- 1 Open the page with the browser console showing and reload: no hydration warning should appear.
- 2 Throttle the network in devtools and watch the first paint: nothing should jump or flash once scripts load.
Related checks
Ready to see where you stand?
Scan your site and get your Engineering Score with a prioritized roadmap in under a minute, no signup required.