Hydration (web development)

Add links
Source: Wikipedia, the free encyclopedia.

In

event handlers to the HTML elements.[1] Because the HTML is pre-rendered on a server, this allows for a fast "first contentful paint" (when useful data is first displayed to the user), but there is a period of time afterward where the page appears to be fully loaded and interactive, but is not until the client-side JavaScript is executed and event handlers have been attached.[2]

Frameworks that use hydration include

React v16.0 introduced a "hydrate" function, which hydrates an element, in its API.[5][6]

Variations

Streaming server-side rendering

Streaming server-side rendering allows one to send HTML in chunks that the browser can progressively render as it is received. This can provide a fast first paint and first contentful paint as HTML markup arrives to users faster.[2]

Progressive rehydration

In progressive rehydration, individual pieces of a server-rendered application are “booted up” over time, rather than the current common approach of initializing the entire application at once. This can help reduce the amount of JavaScript required to make pages interactive, since client-side upgrading of low priority parts of the page can be deferred to prevent blocking the main thread. It can also help avoid one of the most common server-side rendering rehydration pitfalls, where a server-rendered DOM tree gets destroyed and then immediately rebuilt – most often because the initial synchronous client-side render required data that wasn't quite ready, perhaps awaiting Promise resolution.[2]

Partial rehydration

Partial rehydration has proven difficult to implement. This approach is an extension of the idea of progressive rehydration, where the individual pieces (components/views/trees) to be progressively rehydrated are analyzed and those with little interactivity or no reactivity are identified. For each of these mostly-static parts, the corresponding JavaScript code is then transformed into inert references and decorative functionality, reducing their client-side footprint to near-zero. The partial hydration approach comes with its own issues and compromises. It poses some interesting challenges for caching, and client-side navigation means it cannot be assumed that server-rendered HTML for inert parts of the application will be available without a full page load.[2]

One framework that supports partial rehydration is Elder.js, which is based on Svelte.[7]

Trisomorphic rendering

Trisomorphic rendering is a technique which uses streaming server-side rendering for initial/non-JS navigations, and then uses

service worker to take on rendering of HTML for navigations after it has been installed. This can keep cached components and templates up to date and enables SPA-style navigations for rendering new views in the same session. This approach works best when one can share the same templating and routing code between the server, client page, and service worker.[2]

References

  1. ^ "Client Side Hydration | Vue SSR Guide". ssr.vuejs.org. Retrieved 2020-12-11.
  2. ^ a b c d e Miller, Jason; Osmani, Addy (26 November 2019). "Rendering on the Web". Google Developers. Retrieved 2020-12-11.
  3. ^ "Basic Features: Pages | Next.js". nextjs.org. Retrieved 2021-01-04.
  4. ^ "Server Side + Client Side Rendering". NuxtJS. Retrieved 2023-12-03.
  5. ^ "ReactDOM – React". reactjs.org. Retrieved 2021-01-04.
  6. ^ "React v16.0 – React Blog". reactjs.org. Retrieved 2021-01-04.
  7. ^ "Elder.js: A Svelte Framework and Static Site Generator". Elder Guide. Retrieved 2021-01-04.

CC-BY logo Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 4.0 Attribution License, specifically the article "Rendering on the Web" by Jason Miller and Addy Osmani.

Retrieved from "https://en.wikipedia.org/w/index.php?title=Hydration_(web_development)&oldid=1188036964"