Hydration (web development)

In web development, hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching 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 Next.js[3] and Nuxt.js.[4] React v16.0 introduced a "hydrate" function, which hydrates an element, in its API.[5][6]

  1. ^ "Client Side Hydration | Vue SSR Guide". ssr.vuejs.org. Retrieved 2020-12-11.
  2. ^ 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.