What causes hydration mismatch errors and how do you fix them?

Summary

Hydration errors occur when the HTML rendered on the server differs from what React renders on the client's first pass, e.g. from using Date.now(), Math.random(), window/localStorage, locale-dependent formatting, or invalid HTML nesting.

Longer Answer

Fixes: render browser-only values in useEffect after mount, use dynamic(() => import(...), { ssr: false }) from a Client Component for browser-only components, pass deterministic data from the server, fix invalid nesting (e.g., <div> inside <p>), and use suppressHydrationWarning only for unavoidable cases like timestamps. Browser extensions modifying the DOM can also trigger them.

Key Points

• Server and client output must match
• Defer browser-only values to effects
• dynamic(..., { ssr: false })
• Fix invalid HTML nesting