Hydration (web development)
{{Short description|Technique used in web development}}
In web development, hydration or rehydration is a technique in which client-side JavaScript converts a web page that is static from the perspective of the web browser, delivered either through static rendering or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements in the DOM.{{cite web |title=Client Side Hydration {{!}} Vue SSR Guide |url=https://ssr.vuejs.org/guide/hydration.html |access-date=2020-12-11 |website=ssr.vuejs.org}} 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.{{cite web |last1=Miller |first1=Jason |last2=Osmani |first2=Addy |date=26 November 2019 |title=Rendering on the Web |url=https://developers.google.com/web/updates/2019/02/rendering-on-the-web |archive-url= |archive-date= |access-date=2020-12-11 |website=Google Developers |language=en}}
Frameworks that use hydration include Next.js{{cite web |title=Basic Features: Pages {{!}} Next.js |url=https://nextjs.org/docs/basic-features/pages |access-date=2021-01-04 |website=nextjs.org |language=en}} and Nuxt.js.{{cite web |last= |first= |date= |title=Server Side + Client Side Rendering |url=https://nuxt.com/docs/guide/concepts/rendering#universal-rendering |archive-url= |archive-date= |access-date=2023-12-03 |website=NuxtJS |language=en-US}} React v16.0 introduced a "hydrate" function, which hydrates an element, in its API.{{cite web |title=ReactDOM – React |url=https://reactjs.org/docs/react-dom.html |access-date=2021-01-04 |website=reactjs.org |language=en}}{{cite web |title=React v16.0 – React Blog |url=https://reactjs.org/blog/2017/09/26/react-v16.0.html |access-date=2021-01-04 |website=reactjs.org |language=en}}
Variations
= Streaming server-side rendering =
= 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.
= 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.
One framework that supports partial rehydration is Elder.js, which is based on Svelte.{{Cite web|last=|first=|date=|title=Elder.js: A Svelte Framework and Static Site Generator|url=https://elderguide.com/tech/elderjs/#partial-hydration|archive-url=|archive-date=|access-date=2021-01-04|website=Elder Guide|language=en}}
= 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.
References
{{Reflist}}
File:CC BY icon-80x15.png Portions of this page are modifications based on work created and [https://developers.google.com/readme/policies shared by Google] and used according to terms described in the [https://creativecommons.org/licenses/by/4.0/ Creative Commons 4.0 Attribution License], specifically the article [https://developers.google.com/web/updates/2019/02/rendering-on-the-web "Rendering on the Web"] by Jason Miller and Addy Osmani.
{{Web interfaces}}