1. What is Progressive Hydration?
Progressive Hydration is the process of hydrating a server-rendered page over time, instead of hydrating everything at once
2. How does Progressive Hydration work?
- 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 it sends back to the client
- the client renders the html page
- the client executes all app logic again
- so as to hydrate those components
- 11. and lazy loads the rest later or on demand
3. What are the Pros and Cons of Progressive Hydration?
- promotes code-splitting
- defer unimportant parts of the UI
- reduce bundle size
- less code to load and execute -> reduce time between FCP and TTI
- not suitable for dynamic apps,
- where hydration of every element is required at the same time
- execute all app logic twice, once on server and once on client
- still need to hydrate top down (if single root)
- hydrating a button halfway down the page may require loading and hydrating a huge chunk of code
- cannot do out of order hydration
- hydrate components independently from their parents
4. When should you use Progressive Hydration?
- when you want to use hydration but don't need to hydrate the whole page at once
Better than hydration for everything, except load everything at once sites