1. What is Hydration?
Hydration is the process of taking a pre-rendered HTML page sent to the client
and making it interactive by attaching event listeners,
usually after rebuilding framework and app state on the client
2. How does Hydration work? - in SSR
- first the client sends a get request to the server
- the server executes all app logic
- in order to render the complete HTML page
- which is sent back to the client
- the client renders the HTML page
- the client executes all app logic again
- so as to hydrate the page
3. What are the Pros and Cons of Hydration?
- enable interactive client-side apps rendered on the server
- quick First Paint (FP) and First Contentful Paint (FCP)
- execute all app logic twice
- once on the server and once on the client
- uncanny valley (fast First Contentful Paint, but slow Time To Interactive)
- page looks ready, but isn't (no event handlers attached)
- JS bundle bigger than with just Client-Side Rendering (CSR)
- as now it needs to do both hydration and CSR
4. When should you use Hydration?
- when you want to have interactive client-side apps rendered on the server
Useful for e-commerce, social media and big content websites