JavaScript Hydration
What is hydration?
Hydration is the process of transferring serialized state and dependencies from the server to the static HTML in the client. The HTML can be generated with a static site generator at buildtime, on the fly -meaning because of an event took place on the client-side, that triggered a request for additional HTML- or was pre-rendered and sent from the server -or a caching layer-.
Full hydration
This is the most common method, used by most frameworks that support server-side rendering. When full hydration is implemented, the whole application is bootstrapped, typically during pageload, destroying and recreating the whole Document Object Model -DOM- tree, while state is evaluated and/or data is transferred.
Progressive hydration
Progressive hydration proposes to bootstrap parts of the tree independently, or progressively over time. This technique helps reduce the size in bytes of the JavaScript required to initialize an application, and also helps reduce the time to interactive for dynamic components.
Partial hydration
Partial hydration is the concept behind the Island Architecture approach, pushing the idea of progressive hydration even further. It suggests that we define areas of interactivity of our horizontal split, that may or may not need JavaScript bootstrapped to them, and it should be the page and not an additional shell, that transfers state to each one of those.