Hydration is the process of attaching event listeners to the DOM, to make the static HTML interactive.
— Next.js Docs (Rendering: Client Components, Full Page Load)
1. Server sends rendered static page to the browser
2. Browser paints static page (non-interactive view)
3. The JavaScript bundle loads on the client
4. The bundle attaches to the DOM and hydrates it
5. Page becomes interactive with client-side JavaScript
hydration-five.vercel.app/
lucasamonrc/hydration
So...
By Lucas Castro
I’m a software engineer, husband, father, latter-day saint, and life-long learner. I like to think deeply about things.