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?

How does progressive hydration work?
  1. First the client sends a get request to the server
  2. the server executes all app logic
  3. in order to render the complete HTML page
  4. which it sends back to the client
  5. the client renders the html page
  6. and sends a request for the javascript bundle with critical components
  7. once it receives the javascript bundle
  8. the client executes all app logic again
  9. so as to hydrate those components
  10. 11. and lazy loads the rest later or on demand

3. What are the Pros and Cons of Progressive Hydration?


Pros:

  • promotes code-splitting
  • defer unimportant parts of the UI
  • reduce bundle size
    • less code to load and execute -> reduce time between FCP and TTI

Cons:

  • 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

✳️
see also Hydration, Partial Hydration, React Server Components and Resumability

Resources

Progressive Hydration
Delay loading JavaScript for less important parts of the page
Why Efficient Hydration in JavaScript Frameworks is so Challenging
Hydration is the name given to the process in JavaScript frameworks to initializing the page in the…
Conquering JavaScript Hydration
That is an ambitious title for an article. An ambitious goal in general. Hydration, the process of…
Hydration is Pure Overhead
Why hydration is a workaround, not the solution.
Don’t blame the developer for what the frameworks did!
While some think it’s fun to blame developers for issues they’re not responsible for, we thought we’d clear the air about a complaint that keeps popping up. Site speed.
Our Current Frameworks are O(n); We Need O(1)
As the complexity of applications increases, the amount of JavaScript downloaded increases (on a typical framework). The only way we can continue building more complex web applications in the future is to lazy load on interaction, not on initial load.
The Qase for Qwik: Love At First TTI
The reasons why you should be looking at Qwik if you care about performant web apps.
Resumability vs Hydration
Resumability is a faster alternative to Hydration. At first glance, it may seem like resumability and Hydration are the same. After all, both bring interactivity to your page. Defining Hydration to be just making a page interactive is so broad as it fails to be useful as it includes non-server-rende…
<script>: The Script element - HTML: HyperText Markup Language | MDN
The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL’s GLSL shader programming language and JSON.
Critical rendering path - Web performance | MDN
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model…
Render Performance Optimization With React - Adaptive Financial Consulting
60 frames per second (fps), this number not only represents the refresh rate of a typical pc monitor, but also…
Application Holotypes: A Guide to Architecture Decisions - JASON Format
Client-Side Rendering | JavaScript Patterns
Website created for the FrontendMasters course on JavaScript Patterns by Lydia Hallie