TL;DR: Progressive Hydration is about the WHEN, Partial Hydration is about the WHAT
For some time I'm trying to understand the whole thing about rendering patterns. Hydration is a big part of it. The internet is full of articles and tutorials about hydration and how to implement it. But there are fewer about what it really is and how to distinguish between the different types of hydration.
This article won't go into depth because there is other great content out there. Some of the best was created by ryansolid. However, I would like to give a quick note to someone who is trying to understand the whole thing about hydration.
Hydration
Hydration is the process bringing a app which is rendered by the server into the same state as it was rendered by the client. This involves work to download javascript, attach eventlisteners to the correct DOM nodes and recover state on the client side. This work comes at cost. Bandwidth is needed to transfer the data within the javascript to your client. CPU time for parsing and running javascript. All of this may slow your app. In the worst case users needs to deal with the "uncanny valley" effect, where the app seems like it is ready, but hydration isn't finished yet, and therefore it's not yet interactive.
To mitigate this issues there are several approaches to optimize hydration. I would like to explain two of them.
Progressive hydration
The first is progressive hydration, which tries to reduce the amount of data which is sent to the client for bootstrapping your application. Instead of fully hydrating your app at once, only chunks of data are sent to the client and parts are hydrated. Those parts may be hydrated if a special event is triggered like clicking a button or if a component comes into the viewport. Your app is building-up hydrating up.
Partial hydration
In comparison, partial hydration uses knowledge about the structure of your application. You as a developer or perhaps a smart compiler, knows which part of your application is always static or requires javascript. This knowledge can be used to determine which parts of your application need to be hydrated.
Conclusion
If you look at it from an exaggerated point of view, you could take spacetime as an analogy. Progressive hydration is the WHEN, represented as time axis. Partial hydration is about WHAT part in your application should be hydrated. Its like describing somewhats position onto the space axis.
Please note, that I do not think getting much range with this post and it was a quick type. Therefore, some parts could be improved. If something needs to be corrected let me know in the comments :)
Top comments (0)