Hydration (web development)

<p>In <a href="/facts/Web_development/UW5ypSzj">web development</a>, hydration or rehydration is a technique in which client-side <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> converts a <a href="/facts/Web_page/5JK7xQLe">web page</a> that is <a href="/facts/Static_web_page/BtP4660l">static</a> from the perspective of the <a href="/facts/Web_browser/2pfyymLs">web browser</a>, delivered either through <a href="/facts/Static_rendering/pnGvWq0G">static rendering</a> or <a href="/facts/Server-side_rendering/JnLx8FnL">server-side rendering</a>, into a <a href="/facts/Dynamic_web_page/psjqGKBx">dynamic web page</a> by attaching <a href="/facts/Event_handler/0YdM6AoB">event handlers</a> to the HTML elements in the <a href="/facts/Document_Object_Model/GglE6jGx">DOM</a>. 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.
</p><p>Frameworks that use hydration include <a href="/facts/Next.js/By3lmkSa">Next.js</a> and <a href="/facts/Nuxt.js/04W0DWU1">Nuxt.js</a>. <a href="/facts/React_(web_framework)/wEllNzoY">React</a> v16.0 introduced a "hydrate" function, which hydrates an element, in its <a href="/facts/API/GMlN4vUr">API</a>.
</p>

Hydration (web development) open-in-new

Hydration (web development)