⚡ Partial Hydration / Interactive Islands

About Partial Hydration

The Interactive Islands pattern hydrates only components that need JavaScript, keeping static content as plain HTML for better performance.

Key Benefit: Reduced JavaScript execution, faster Time to Interactive (TTI)

📊 Hydration Statistics

0
Static Components
0
Interactive Components
0
Total Components
0%
JS Execution Saved

Component Examples

Alert Static

This alert is rendered once and doesn't need JavaScript updates.

✓ No re-renders
✓ Lower memory usage
✓ Faster initial render

Button Static

Static Button Primary Button

✓ Pure HTML rendering
✓ No reactivity overhead
✓ Click events via HTML

Tag Static

Static Content No Updates

✓ Lightweight
✓ One-time render
✓ Perfect for static badges

Accordion Interactive

✓ Full reactivity
✓ Event handling
✓ State management

Text Input Interactive

✓ Two-way binding
✓ Validation
✓ Real-time updates

Character Count Interactive

✓ Live counting
✓ Dynamic feedback
✓ Requires JS

⚡ Performance Comparison

Without Partial Hydration

Components Hydrated: All (100%)
JS Execution Time: ~100ms
Memory Usage: ~2 MB
Time to Interactive: Slower

With Partial Hydration

Components Hydrated: 0 (0%)
JS Execution Time: ~0ms
Memory Usage: ~0 MB
Time to Interactive: ✓ Faster

Code Examples

1. Automatic Hydration

import { scanAndHydrate } from './utils/partial-hydration.js';

// Automatically optimize all components
window.addEventListener('DOMContentLoaded', () => {
  const stats = scanAndHydrate(document.body, { debug: true });

  console.log('Static:', stats.static);
  console.log('Interactive:', stats.interactive);
  console.log('Savings:', stats.savings);
});

2. Manual Component Marking

import { markAsStatic, markAsInteractive } from './utils/partial-hydration.js';

// Static component (no updates needed)
class USAButton extends LitElement {
  constructor() {
    super();
    markAsStatic(this); // Optimized rendering
  }
}

// Interactive component (full reactivity)
class USAModal extends LitElement {
  constructor() {
    super();
    markAsInteractive(this); // Full features
  }
}

3. Progressive Enhancement

import { markAsStatic, hydrateComponent } from './utils/partial-hydration.js';

// Start static
markAsStatic(button);

// Later, make interactive based on user action
document.getElementById('enable-features').addEventListener('click', () => {
  hydrateComponent(button); // Now fully interactive
});