web development Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web applications ...

, hydration or rehydration is a technique in which client-side

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

converts a static

HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...

web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements. 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. Frameworks that use hydration include

Next.js Next.js is an open-source web development framework created by Vercel enabling React (JavaScript library), React-based web applications with server-side scripting, server-side rendering and generating static web page, static websites. React docu ...

and Nuxt.js.

React REACT or React may refer to: Science and technology *REACT (telescope), a telescope at Fenton Hill Observatory, New Mexico, US Computing * React (JavaScript library) , a JavaScript library for building user interfaces, from Facebook ** React Nati ...

v16.0 introduced a "hydrate" function, which hydrates an element, in its

API An application programming interface (API) is a way for two or more computer programs to communicate with each other. It is a type of software Interface (computing), interface, offering a service to other pieces of software. A document or standa ...

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.

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 A promise is a commitment by someone to do or not do something. As a noun ''promise'' means a declaration assuring that one will or will not do something. As a verb it means to commit oneself by a promise to do or give. It can also mean a capacity ...

resolution.

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 In computing, a cache ( ) is a hardware or software component that stores data so that future requests for that data can be served faster; the data stored in a cache might be the result of an earlier computation or a copy of data stored elsewher ...

, 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. One framework that supports partial rehydration is Elder.js, which is based on

Svelte Svelte is a free and open-source front end component framework or language created by Rich Harris and maintained by the Svelte core team members. Svelte is not a monolithic JavaScript library imported by applications: instead, Svelte compiles H ...

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 A spa is a location where mineral-rich spring water (and sometimes seawater) is used to give medicinal baths. Spa towns or spa resorts (including hot springs resorts) typically offer various health treatments, which are also known as balneoth ...

-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.

References

{{Reflist

''Portions of this page are modifications based on work created an
shared by Google
and used according to terms described in th
Creative Commons 4.0 Attribution License
specifically the articl
"Rendering on the Web"
by Jason Miller and Addy Osmani.'' Web development