Developer deliberately broke Next.js hydration to finally understand how it works

A developer spent several hours intentionally triggering hydration failures in a Next.js app to gain a deeper understanding of how the process works, rather than just fixing surface-level errors. Hydration is the process where server-rendered HTML is handed off to React on the client side, and any mismatch between the two causes React to lose trust in the existing DOM. Common causes explored included rendering timestamps with new Date(), misusing typeof window checks, and generating random values — each exposing a different aspect of how React walks the DOM to attach fiber nodes. The key insight was that React does not re-check the entire DOM during hydration but instead skips DOM creation and relies on the server output as a trusted starting point. Using useEffect to delay client-specific state updates was revealed not as a workaround but as the intended pattern, since it ensures the first client render still matches the server output before React takes full control.