---
title: "Partial Hydration (Islands)"
category: studio-standards
status: required
url: https://webspecification.com/spec/studio-standards/partial-hydration-islands/
source_repo: undefined
licence: CC-BY-4.0
---

# 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.

```astro
<!-- 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.