React/Next.js hydration error 'Text content does not match server-rendered HTML' or 'Hydration failed because the initial UI does not match what was rendered on the server'. What causes it and how do I fix it?

Cause: With server rendering, the browser first shows HTML made on the server, then React hydrates it by running your components again and expecting the same output. If the first client render differs from the server HTML, React reports a mismatch. Typical triggers: using new Date(), Math.random(), window, localStorage or typeof window checks in render output; invalid HTML nesting (a div or ul inside a p, a link inside a link, a button inside a button); browser extensions or CDN features that rewrite the HTML (for example HTML minification); and misconfigured CSS-in-JS. Fix (best first): 1. Make the first render identical on both sides. Read browser-only values after mount: keep a state like isClient set to false, flip it to true in useEffect, and render the client-only value only when true. This costs a second render but is correct. 2. For a component that cannot render on the server at all, load it with next/dynamic and ssr: false, from a Client Component where required by your Next.js version. 3. For a deliberately different value such as a timestamp, add suppressHydrationWarning to that single element. It works one level deep, does not patch the mismatched text, and is an escape hatch, not a general fix. 4. Fix invalid HTML nesting reported in the error message; the browser silently rewrites invalid markup before React sees it. 5. Test with extensions disabled or in a private window, and check whether a CDN or proxy modifies the HTML response. Verify: reload with the console open in development; the hydration warning is gone and the page is interactive without flicker from the swapped content. Sources: https://nextjs.org/docs/messages/react-hydration-error https://react.dev/reference/react-dom/client/hydrateRoot