Only interactive subtrees hydrate; static HTML stays inert — reduces JS execution at load.

Web Platform APIs

Partial hydration

<h2>Summary</h2>
<p>Static HTML shell with small hydrated interactive islands — minimal JS vs full SPA. Astro popularized; Next.js can approximate with selective client components. Wrong granularity: island per button vs one island per page — balance hydration cost and isolation.</p>
<h2>Code example</h2>
<pre><code class="language-html">&lt;article&gt;
  &lt;h1&gt;Static headline&lt;/h1&gt;
  &lt;p&gt;Most content ships as HTML only.&lt;/p&gt;
  &lt;div id="cart-widget" data-island="cart"&gt;&lt;/div&gt;
&lt;/article&gt;
&lt;script type="module"&gt;hydrateIsland('#cart-widget');&lt;/script&gt;
</code></pre>
<h2>Key points</h2>
<ul>
<li>Static HTML shell with small hydrated interactive islands — minimal JS vs full SPA.</li>
<li>Astro popularized; Next.js can approximate with selective client components.</li>
<li>Wrong granularity: island per button vs one island per page — balance hydration cost and isolation.</li>
</ul>
<h2>Further reading</h2>
<ul>
<li><a href="https://web.dev/articles/islands-architecture">Islands architecture</a></li>
<li><a href="https://web.dev/articles/performance-patterns-for-web-apps">Partial hydration</a></li>
</ul>
<h2>Related concepts</h2>
<ul>
<li><a href="/blogs/level-7-partial-hydration">Partial hydration</a></li>
</ul>


Static HTML shell with small hydrated interactive islands — minimal JS vs full SPA.

Islands architecture

Offline writes sync later — last-write-wins loses data; need versioning, CRDTs, or server merge.