Lecture
In web development, hydration (from English hydration, moistening ), or rehydration, is a technique in which client-side JavaScript turns a web page that is static from the browser's point of view — produced by static or server-side rendering — into a dynamic one. This is achieved by attaching event handlers to HTML elements in the Document Object Model (DOM). Because the HTML is pre-rendered on the server, this ensures a fast "First Contentful Paint" (FCP), that is, the moment when useful data is first displayed to the user. Afterwards, however, there follows a period during which the page looks fully loaded and interactive but in fact is not, until the client-side JavaScript has been executed and the event handlers have been attached.
Frameworks that use hydration include Next.js and Nuxt.js. In React version 16.0 a `hydrate` function was added to the API, which performs hydration of an element.
Streaming server-side rendering makes it possible to send HTML in chunks that the browser can render progressively as it receives them. This can provide a fast First Paint and First Contentful Paint (FCP), since the HTML markup is delivered to users sooner.
With progressive rehydration, individual parts of a server-rendered application are "started up" (brought to life) gradually, in contrast to the common approach where the whole application is initialised at once. This helps reduce the amount of JavaScript needed to make pages interactive, since bringing low-priority parts of the page to life on the client side can be deferred so as not to block the main thread. It also helps avoid one of the most common hydration problems in server-side rendering, where the server-rendered DOM tree is destroyed and immediately rebuilt from scratch — most often because the initial synchronous render on the client side required data that was not yet ready (for instance, was awaiting the resolution of a promise).
Implementing partial rehydration has proved to be a difficult task. This approach is a development of the idea of progressive hydration, in which the individual parts (components/views/trees) to be hydrated gradually are analysed and those of them that have low interactivity or no reactivity at all are identified. For each of these largely static parts, the corresponding JavaScript code is converted into inert references and decorative functionality, which reduces their client-side "weight" almost to zero. The partial hydration approach comes with its own problems and trade-offs. It creates interesting caching challenges, and client-side navigation means there is no guarantee that server-rendered HTML will be available for the inert parts of the application without a full page reload.
One of the frameworks that supports partial hydration is Elder.js, which is based on Svelte.
Trisomorphic rendering is a technique that uses streaming server-side rendering for the initial load and for navigation without JS, and then uses a service worker to render HTML for subsequent transitions once it has been installed. This makes it possible to keep cached components and templates up to date and provides single-page application (SPA) style navigation for rendering new views within the same session. This approach works best when the same code can be used for templating and routing on the server, on the client page and in the service worker
Comments