what i learned intentionally breaking hydration in next.js

Short summary

The author deliberately triggered Next.js hydration errors to understand root causes rather than just fix symptoms, discovering that React doesn't re-render during hydration but walks existing server HTML—any mismatch breaks this walk entirely. Key insights: Date/random values, incorrect typeof window checks, browser API access, and inconsistent props all cause failures. The takeaway: hydration works only when server and client render identical HTML; React skips DOM creation and assumes the server output is correct.

• •Intentionally breaking hydration reveals deeper understanding than just fixing symptoms
• •React walks existing server DOM during hydration; any mismatch breaks the entire process
• •Common gotchas (Date, Math.random, localStorage, inconsistent props) stem from server/client execution differences

Generated with AI, which can make mistakes.