What they're testing
Whether you pick a rendering strategy from a page's requirements, and whether you know why mismatches are dangerous.
The short answer~30 seconds
CSR: the server sends an empty shell and JavaScript builds everything in the browser — bad for SEO and for first load. SSR: HTML is built per request, data is always fresh, server cost is real. SSG: built at build time, fastest, but the data is frozen until the next build. ISR: SSG plus background revalidation by time or by tag. A hydration mismatch is when the server-rendered HTML differs from what React renders first on the client — React then throws that HTML away and re-renders from scratch.
The long answer
A mismatch is dangerous not because of the console warning but because of what it costs: React 18 handles it by discarding the received HTML and re-rendering client-side, so you lose the entire benefit of SSR on that page — LCP degrades visibly and the user sees content flash. Meaning one innocuous line can erase a page's whole rendering strategy.
The cause is nearly always one of four: Date.now() or new Date() during render, Math.random(), reading window/localStorage on the first render, or invalid HTML that the browser silently repairs (a <div> inside a <p> is the classic — the browser closes the <p> and the resulting DOM tree differs from what React expected).
The correct handling for client-only data is rendering it on the SECOND pass: a mounted flag flipped in an effect, or useSyncExternalStore with the server snapshot as the default. The latter is better because it states the intent — "this value differs between server and client, and here is the server one" — rather than working around it with a flag.
What they'll ask next
?How do Server Components differ from Client Components?
A Server Component runs on the server, ships none of its own JavaScript, can reach the database directly, and has no state or event handlers. Client Components are the reverse. Where you draw the boundary determines bundle size, so the practical rule is pushing "use client" as far down the tree as you can.
These lose points
- Slapping on
suppressHydrationWarning. It hides the symptom without stopping React from discarding the HTML.