How a Server-Rendered Page Becomes Interactive in Next.js
When the server sends the webpage to your browser, it's just a "body" (HTML). It looks complete, but it can't think or respond to actions (like clicking a button or typing in a form). Hydration is the process where React's JavaScript "wakes up" and connects the page to its functionality, making it interactive.
Imagine you’re building a robot:
Server-Side Rendering (SSR):
The server builds the robot’s body (HTML). It looks like a real robot but doesn’t move or do anything yet.Hydration:
Next.js installs the robot’s brain (React’s JavaScript). Now it can move, think, and respond to commands (like clicking a button).
Why Is This Brain Important?
Without hydration, the page would just sit there like a statue. With hydration, the page can:
Respond to button clicks.
Update data dynamically (like a counter or form input).
Provide all the interactive features React is known for.
hydration = adding the brain to the webpage