<p>Hydration is one of the most important concepts in modern frontend frameworks, yet also one of the most misunderstood.</p>

<p>In 2025, frameworks like <strong>React 18+, Vue/Nuxt 3, SvelteKit, SolidStart, Qwik, Astro</strong> all approach hydration differently — some progressively, some selectively, some partially, some never fully.</p>

<p>This post breaks it all down with <strong>real examples</strong>, <strong>SSR + SSG scenarios</strong>, and an extended example so the concept stays in your mind forever.</p>




<h2>
  
  
  🌊 What Is Hydration?
</h2>

<p>When a page is <strong>SSR or SSG</strong>, the browser gets plain HTML:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight html"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"app"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button&gt;</span>Click me<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;ul&gt;</span>
    <span class="nt">&lt;li&gt;</span>Item 1<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;li&gt;</span>Item 2<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre>

</div>



<p>But HTML alone does nothing — no JavaScript, no event listeners.</p>

<p><strong>Hydration</strong> is when the framework:</p>

<ul>
<li>Loads JS bundles</li>
<li>Recreates the virtual component tree</li>
<li>Attaches event listeners</li>
<li>Activates reactivity</li>
<li>Makes the page interactive</li>
</ul>

<p>Another way to say it:</p>

<blockquote>
<p>SSR/SSG gives HTML.<br>
Hydration gives life.</p>
</blockquote>




<h2>
  
  
  🟥 Old Hydration Model (Pre-React 18 / Classic Vue / SvelteKit)
</h2>

<p>Traditionally, hydration happened <strong>linearly</strong>, top-to-bottom:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>1. Hydrate App()
2. Hydrate Header()
3. Hydrate Navbar()
4. Hydrate Sections()
5. Hydrate Footer()
</code></pre>

</div>



<p>Linear hydration has <strong>three big problems</strong>:</p>

<h3>
  
  
  ❌ 1. Slow Time-To-Interactive
</h3>

<p>Because hydration must finish <strong>before the user can interact</strong> safely.</p>

<h3>
  
  
  ❌ 2. Big JS bundle runs all at once
</h3>

<p>Blocks main thread.</p>

<h3>
  
  
  ❌ 3. Offscreen components hydrate early
</h3>

<p>Even things not visible yet.</p>

<p>This model works, but it’s outdated for large apps.</p>




<h2>
  
  
  🟩 React 18+: Selective Hydration (Smarter, Not Linear)
</h2>

<p>React 18 replaced “hydrate everything in order” with:</p>

<blockquote>
<p><strong>Hydrate what’s needed, when it’s needed.<br>
Skip or delay the rest.</strong></p>
</blockquote>

<p>React evaluates multiple signals:</p>

<h3>
  
  
  React 18 automatically detects:
</h3>

<ul>
<li><strong>Which components are visible</strong></li>
<li><strong>Which components are interactive</strong></li>
<li><strong>Which have pending Suspense data</strong></li>
<li><strong>Which are above-the-fold</strong></li>
<li><strong>Which the user interacts with first</strong></li>
<li><strong>Which are heavier or lower priority</strong></li>
</ul>

<h3>
  
  
  Hydration priority:
</h3>

<p>1️⃣ Visible + interactive components<br>
2️⃣ User-clicked or user-focused components<br>
3️⃣ Above-the-fold content<br>
4️⃣ Suspense boundaries that resolved<br>
5️⃣ Below-the-fold or non-interactive UI<br>
6️⃣ Everything else, when browser is idle</p>

<p>This is <strong>selective hydration</strong> — only hydrate the parts users need <em>immediately</em>.</p>


<h2>
  
  
  🟦 How Suspense Affects Hydration
</h2>

<p>Consider:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight jsx"><code><span class="p">&lt;</span><span class="nc">Suspense</span> <span class="na">fallback</span><span class="p">=</span><span class="si">{</span><span class="p">&lt;</span><span class="nc">LoadingUser</span> <span class="p">/&gt;</span><span class="si">}</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nc">UserProfile</span> <span class="p">/&gt;</span>
<span class="p">&lt;/</span><span class="nc">Suspense</span><span class="p">&gt;</span>
</code></pre>

</div>



<p>React can stream HTML in chunks:</p>

<ul>
<li>Server streams <code>&lt;LoadingUser /&gt;</code> first</li>
<li>Later streams <code>&lt;UserProfile /&gt;</code> when data resolves</li>
<li>Client hydrates these boundaries <strong>independently</strong>
</li>
<li>Hydration can happen <strong>in the middle</strong>, <strong>out of order</strong>, or <strong>scattered</strong>
</li>
</ul>

<p>Suspense creates natural hydration islands.</p>




<h2>
  
  
  🔥 BIG Real-World Example (SSR + Suspense + Complex Layout)
</h2>

<p>Imagine a dashboard:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>+----------------------+
| Navbar               |
+----------------------+
| Sidebar | Chart      |
|         | (Suspense) |
|         |            |
+----------------------+
</code></pre>

</div>



<h3>
  
  
  Server Output (HTML)
</h3>

<ul>
<li>Navbar rendered immediately</li>
<li>Sidebar rendered immediately</li>
<li>Chart is slow → Suspense fallback is sent</li>
</ul>

<p>Client sees:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>Navbar (interactive instantly)
Sidebar (interactive instantly)
Chart loading skeleton…
</code></pre>

</div>



<h3>
  
  
  Hydration (React 18):
</h3>

<p>1️⃣ User clicks sidebar → React hydrates sidebar immediately<br>
2️⃣ Navbar is visible → hydrate early<br>
3️⃣ Chart fallback hydrates next (lightweight)<br>
4️⃣ Actual Chart component hydrates <strong>only when its data resolves</strong><br>
5️⃣ Footer hydrates when browser is idle</p>

<p>This is <strong>selective, scattered, priority-driven hydration.</strong></p>


<h2>
  
  
  🟨 Is Progressive Hydration Needed in React?
</h2>

<p><strong>React 18 already does a form of progressive hydration</strong>:</p>

<p>✔ Selective hydration<br>
✔ Suspense boundary hydration<br>
✔ Hydrate-on-interaction<br>
✔ Hydrate-visible-first<br>
✔ Hydrate background content later<br>
✔ Hydrate streaming chunks as they arrive</p>

<p>React does not call it “progressive hydration,” but practically, it achieves that behavior.</p>


<h2>
  
  
  🟩 SSG + Hydration — Does Hydration Still Happen?
</h2>

<p>Yes.</p>

<p>SSG also needs hydration because:</p>

<ul>
<li>HTML is static</li>
<li>But JS must still attach event handlers</li>
<li>Framework re-runs components on client</li>
<li>Event listeners get connected</li>
<li>State becomes reactive</li>
</ul>

<p>Example:<br>
A static blog page still hydrates “Like Button”, comments, interactive parts.</p>

<p>SSG = static HTML + hydration on client.</p>


<h2>
  
  
  🔰 How Other Frameworks Handle Progressive Hydration
</h2>

<p>Now let's compare how different frameworks hydrate:</p>


<h2>
  
  
  🟦 Vue 3 (Classic) — Linear Hydration
</h2>

<p>Vue's default hydration is still <strong>linear</strong> unless using advanced tooling.</p>
<h3>
  
  
  Hydration flow:
</h3>


<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>1. Hydrate root instance
2. Hydrate children in DOM order
3. Hydrate nested components
4. Finally hydrate leaf nodes
</code></pre>

</div>

<h3>
  
  
  Downsides:
</h3>

<ul>
<li>Slower interactivity for large pages</li>
<li>No Suspense-driven hydration</li>
<li>No hydrate-on-interaction by default</li>
</ul>

<p>But this changes with <strong>Nuxt 3</strong>…</p>


<h2>
  
  
  🟩 Nuxt 3 — “Progressive, Island-Style” Hydration
</h2>

<p>Nuxt 3 introduced <strong>partial hydration capabilities</strong>, similar to islands architecture:</p>
<h3>
  
  
  ✔ <code>client:only</code>
</h3>

<p>Component is only hydrated when needed:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight html"><code><span class="nt">&lt;client-only&gt;</span>
  <span class="nt">&lt;FancyChart</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/client-only&gt;</span>
</code></pre>

</div>



<h3>
  
  
  ✔ Async Components + Suspense
</h3>

<p>Nuxt 3 supports Suspense-like behavior:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight html"><code><span class="nt">&lt;Suspense&gt;</span>
  <span class="nt">&lt;UserProfile</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;/Suspense&gt;</span>
</code></pre>

</div>



<p>This allows:</p>

<ul>
<li>above-the-fold hydration first</li>
<li>async component hydration later</li>
<li>streamed HTML + partial hydration</li>
</ul>

<h3>
  
  
  ✔ Nuxt + Nitro + Island Optimizations
</h3>

<p>Nuxt aggressively optimizes hydration for:</p>

<ul>
<li>per-component hydration</li>
<li>hydration skipping for static parts</li>
<li>“hybrid island architecture”</li>
</ul>

<p>While it's not as automatic as React's selective hydration,<br>
Nuxt 3 can achieve progressive hydration with explicit patterns.</p>


<h2>
  
  
  🟧 SvelteKit — Progressive Hydration by Default
</h2>

<p>SvelteKit hydrates:</p>

<ul>
<li>visible sections first</li>
<li>interactive sections first</li>
<li>lazy components when needed</li>
</ul>

<p>Svelte also supports <strong>component-level hydration</strong>:</p>

<ul>
<li>preload only what's visible</li>
<li>lazy load everything else</li>
<li>hydrate only when scrolled into view</li>
<li>hydrate on interaction</li>
</ul>

<p>Very efficient because Svelte compiles away most framework runtime.</p>


<h2>
  
  
  🟦 SolidStart — Fine-Grained Hydration
</h2>

<p>Solid uses reactive primitives and compiles away components.<br>
Hydration happens:</p>

<ul>
<li>per DOM node</li>
<li>per reactive signal</li>
<li>not per component</li>
</ul>

<p>This makes hydration extremely granular.</p>

<p>SolidStart naturally does <strong>progressive + selective hydration</strong>.</p>


<h2>
  
  
  🟣 Qwik — No Hydration (Resumes Instead)
</h2>

<p>Qwik doesn’t hydrate at all.</p>

<p>It <strong>resumes</strong> the app from HTML with embedded state.<br>
Event listeners are attached lazily.</p>

<p>Progressive hydration is built-in because Qwik doesn't hydrate entire trees — it loads behavior on demand.</p>


<h2>
  
  
  🌑 Astro — Island Architecture (Hydrate Only What You Ask)
</h2>

<p>Astro hydrates components only when instructed:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight html"><code><span class="nt">&lt;Counter</span> <span class="na">client:load</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;Chart</span> <span class="na">client:visible</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;Sidebar</span> <span class="na">client:idle</span> <span class="nt">/&gt;</span>
</code></pre>

</div>



<p>Modes:</p>

<ul>
<li><code>client:load</code></li>
<li><code>client:visible</code></li>
<li><code>client:idle</code></li>
<li><code>client:media</code></li>
<li><code>client:hover</code></li>
</ul>

<p>A pure island architecture.<br>
Astro minimizes JS for non-interactive content, best-in-class for performance.</p>




<h2>
  
  
  🟩 Summary: How Frameworks Hydrate
</h2>

<div class="table-wrapper-paragraph"><table>
<thead>
<tr>
<th>Framework</th>
<th>Hydration Style</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>React 18+</strong></td>
<td>Selective, priority-based, Suspense-aware</td>
<td>Automatic</td>
</tr>
<tr>
<td><strong>Vue 3 classic</strong></td>
<td>Linear</td>
<td>Simple but slower</td>
</tr>
<tr>
<td><strong>Nuxt 3</strong></td>
<td>Partial/Client-only/Islands</td>
<td>Supports progressive hydration</td>
</tr>
<tr>
<td><strong>SvelteKit</strong></td>
<td>Progressive</td>
<td>Hydrates visible/interacted UI first</td>
</tr>
<tr>
<td><strong>SolidStart</strong></td>
<td>Fine-grained</td>
<td>Tiny hydration chunks</td>
</tr>
<tr>
<td><strong>Qwik</strong></td>
<td>No hydration → Resume</td>
<td>Most advanced</td>
</tr>
<tr>
<td><strong>Astro</strong></td>
<td>Islands</td>
<td>Hydrate only what you choose</td>
</tr>
</tbody>
</table></div>




<h2>
  
  
  🎉 Final Thoughts
</h2>

<p>In modern SSR/SSG frameworks:</p>

<ul>
<li>Hydration is <em>the cost of interactivity</em>
</li>
<li>Linear hydration is slow</li>
<li>Progressive + selective hydration is the future</li>
<li>React 18+ achieves it automatically</li>
<li>Nuxt 3, SvelteKit, Qwik, Astro each do it differently</li>
<li>Suspense brings async-shaped hydration</li>
<li>Streaming SSR improves TTFB dramatically</li>
</ul>

<p>If you understand hydration deeply,<br>
you understand the foundation of modern web frameworks in 2025.</p>

تعتبر عملية الترطيب مفهومًا حيويًا ولكنه غالبًا ما يُساء فهمه في أطر العمل الحديثة للواجهة الأمامية. في عام 2025، تتبنى أطر العمل مثل React 18+ وVue/Nuxt 3 وSvelteKit وSolidStart وQwik وAstro أساليب مختلفة للترطيب، بما في ذلك الترطيب التدريجي والانتقائي والجزئي، وبعضها لا يكتمل أبدًا. يقدم هذا المقال تحليلًا شاملاً لعملية الترطيب مع أمثلة حقيقية، ويغطي سيناريوهات التقديم من جانب الخادم (SSR) وتوليد المواقع الثابتة (SSG)، مما يضمن فهمًا جيدًا للمفهوم.

La hidratación es un concepto crucial pero a menudo mal entendido en los frameworks frontend modernos. En 2025, frameworks como React 18+, Vue/Nuxt 3, SvelteKit, SolidStart, Qwik y Astro adoptan diferentes enfoques para la hidratación, incluyendo progresiva, selectiva, parcial y algunos que nunca se hidratan completamente. Este artículo ofrece un desglose completo de la hidratación con ejemplos reales, abarcando escenarios de Renderizado del Lado del Servidor (SSR) y Generación de Sitios Estáticos (SSG), asegurando que el concepto se entienda bien.

L'hydratation est un concept crucial mais souvent mal compris dans les frameworks frontend modernes. En 2025, des frameworks tels que React 18+, Vue/Nuxt 3, SvelteKit, SolidStart, Qwik et Astro adoptent différentes approches de l'hydratation, y compris progressive, sélective, partielle et certains qui ne s'hydratent jamais complètement. Cet article fournit une analyse complète de l'hydratation avec des exemples concrets, couvrant les scénarios de rendu côté serveur (SSR) et de génération de site statique (SSG), garantissant une bonne compréhension du concept.

Hydration is a crucial yet often misunderstood concept in modern frontend frameworks. In 2025, frameworks such as React 18+, Vue/Nuxt 3, SvelteKit, SolidStart, Qwik, and Astro adopt various approaches to hydration, including progressive, selective, partial, and some that never fully hydrate. This article provides a comprehensive breakdown of hydration with real examples, covering Server-Side Rendering (SSR) and Static Site Generation (SSG) scenarios, ensuring the concept is well understood.

🧠 Hydration, Selective Hydration & Progressive Hydration Explained (React vs Vue/Nuxt vs Others)

Was this article worth reading? Share it

Ready to build your own newsroom?