The Four Phases Nobody Draws Out
SSR happens in four phases that are worth naming separately. First, the server renders the component tree to an HTML string. Second, that HTML is sent to the browser and painted — the page looks done but nothing is interactive. Third, React downloads and runs the JavaScript bundle. Fourth, React 'hydrates' — it attaches event listeners to the already-rendered HTML. Only after hydration is the page interactive.
The confusion I see most often comes from conflating phases two and four. When someone says 'SSR is fast,' they mean phase two — the First Contentful Paint is fast. When someone says 'SSR causes a hydration error,' they mean phases one and four produced different outputs.
Hydration Errors and Why They Happen
A hydration error means the HTML the server generated doesn't match what React tries to generate during hydration. Common causes: anything that produces different output on server vs client — Math.random(), Date.now(), window checks, localStorage access. React compares the two trees node by node and throws when they diverge.
The fix in Next.js is usually suppressHydrationWarning for genuinely acceptable mismatches (timestamps that update client-side), or moving browser-only code behind a useEffect that runs only after hydration.
Key takeaways
- SSR renders HTML on the server (fast First Contentful Paint) but the page isn't interactive until React hydrates client-side — these are distinct phases with distinct performance budgets
- Hydration errors happen when server render output doesn't match client render — audit any code that produces different values on server vs browser
- For content that's intentionally different on server vs client (user-specific data, timestamps), use suppressHydrationWarning or defer to a useEffect
Conclusion
Understanding SSR at this level turned hydration errors from mysterious failures into predictable, fixable bugs. The mental model pays dividends every time you reach for SSR, streaming, or static generation.
Enjoyed this article?
Vivek Kumar Singh
Technical Expert · Full Stack Cloud Engineer · Tokyo, Japan
