what i learned intentionally breaking hydration in next.js
i did something dumb last month. on purpose. i sat down, opened a next.js app, and tried to make hydration fail in every way i could think of. not because a bug forced me to. not because i was debugging something. just because i wanted to see it. understand it from the inside. and honestly? best few hours i've spent learning anything in a while. why i even did this you know how you use something for months and you think you get it, but you don't really get it? hydration was that for me. i knew the surface-level thing: server renders HTML, client takes over, they gotta match. cool. got it. moving on. except i didn't get it. i just got the vibe of it. every time i saw hydration mismatch, i'd ask claude, fix the immediate thing, feel vaguely annoyed, and move on. i never stopped to ask why that specific thing broke it. i was treating symptoms, not understanding the actual disease. so i decided to break it deliberately. if i caused the errors myself, i'd actually have to understand what i was doing. the setup basic next.js app. app router. a few pages. nothing fancy. i wasn't trying to build anything. i was trying to destroy something, carefully, so i could see what fell apart and why. break #1: the obvious one - new Date() on render this is the classic. everyone's seen it. export default function Page () { return < div > { new Date (). toLocaleString () } </ div > } server renders this at, say, 14:00:00. by the time react runs on the client and tries to reconcile, it's 14:00:01. the strings don't match. react screams. thing is, i knew this would happen. what i didn't think about was why react cares. here's the thing: react isn't doing a full diff on the entire DOM after hydration. it's trusting that the server HTML is a valid starting point and it's just attaching event listeners and state to it. but if the content doesn't match, it doesn't know what to trust. it can't partially hydrate "mostly correct" HTML. it either matches or it doesn't. so it throws the warning, a