Partial Hydration (Islands)
Strict prohibition on bloated SPAs; enforcing static HTML delivery with small interactive islands.
What is it?
Partial Hydration (or Islands Architecture) is a rendering paradigm where the vast majority of a webpage is shipped as pure, static HTML and CSS. JavaScript is only downloaded and executed for specific, isolated components (“islands”) that require interactivity (e.g., a carousel, a buy button, a form).
Why does it matter?
Single Page Applications (SPAs) built on React/Vue often ship megabytes of JavaScript just to render a static blog post, blocking the main thread and draining mobile battery life. Islands Architecture (popularized by frameworks like Astro) guarantees zero-JS by default, resulting in instant Time to Interactive (TTI) and perfect Lighthouse scores.
How to implement it
1. Use an Islands Framework
Frameworks like Astro or Enhance are built for this. Write your UI components in your framework of choice, but dictate exactly when they should hydrate.
<!-- This renders as pure HTML, ZERO JavaScript is sent to the browser -->
<StaticArticleBody content={post} />
<!-- This component ships JavaScript, but only executes when it enters the viewport -->
<InteractiveImageGallery client:visible images={gallery} />
<!-- This component hydrates immediately, but in isolation -->
<AddToCartButton client:load productId="123" />Verification
- Disable JavaScript in your browser. The page should still render perfectly, be fully readable, and all links should work. Only complex interactive states (like modals or client-side form validation) should degrade.