When to hydrate vs keep static in Astro - Performance Comparison

Performance: When to hydrate vs keep static

HIGH IMPACT

This concept affects page load speed and interaction responsiveness by deciding when JavaScript activates on the page.

Rendering a mostly static page with a few interactive widgets

Astro

import MyWidget from './MyWidget.astro';
<MyWidget client:idle />

Delays hydration until browser is idle, allowing main content to paint faster and reducing input delay.

📈 Performance Gainimproves LCP by 20-40%, reduces JS execution blocking time

Rendering a mostly static page with a few interactive widgets

Astro

import MyWidget from './MyWidget.astro';
<MyWidget client:load />

Hydrating the entire widget immediately loads and runs JavaScript even if user doesn't interact, delaying main content paint.

📉 Performance Costblocks rendering for 100-200ms on slow devices, increases JS bundle size by 30kb

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Hydrate entire page immediately	High (many nodes hydrated)	Multiple reflows	High paint cost due to JS	[X] Bad
Hydrate interactive widgets on idle	Moderate (only widgets)	Single reflow	Lower paint cost	[OK] Good
Keep static content without hydration	Low (static DOM)	No reflows from JS	Minimal paint cost	[OK] Good

Rendering Pipeline

Hydration adds JavaScript execution after HTML is parsed, triggering style recalculations and layout updates. Static content skips this, allowing faster paint.

→HTML Parsing

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Layout

Core Web Vital Affected

LCP, INP

This concept affects page load speed and interaction responsiveness by deciding when JavaScript activates on the page.

Optimization Tips

1Hydrate only interactive parts of the page to reduce JavaScript execution.

2Keep non-interactive content static to speed up initial paint and reduce layout shifts.

3Use deferred hydration strategies like client:idle to improve user experience.

Performance Quiz - 3 Questions

What is the main performance benefit of keeping content static without hydration?

A More interactive features available immediately

B Larger JavaScript bundle size

C Faster initial paint and less JavaScript execution

D Triggers more layout recalculations

DevTools: Performance

How to check: Record a performance profile while loading the page. Look for long JavaScript execution blocks and layout shifts after initial paint.

What to look for: Long JS tasks delaying LCP indicate overhydration; minimal JS and stable layout indicate good static usage.