Why Astro supports multiple frameworks - Performance Evidence

Performance: Why Astro supports multiple frameworks

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by optimizing how frameworks are loaded and rendered.

Building a website with components from different frontend frameworks

Astro

---
import ReactComponent from './ReactComponent.jsx';
import VueComponent from './VueComponent.vue';
import SvelteComponent from './SvelteComponent.svelte';
---
<div>
  <ReactComponent client:load />
  <VueComponent client:idle />
  <SvelteComponent client:visible />
</div>

Astro loads each framework only when needed using partial hydration, reducing initial bundle size and speeding up interaction readiness.

📈 Performance Gainreduces bundle size by 50%+, improves LCP and INP by deferring unused framework code

Building a website with components from different frontend frameworks

Astro

---
import ReactComponent from './ReactComponent.jsx';
import VueComponent from './VueComponent.vue';
import SvelteComponent from './SvelteComponent.svelte';
---
<div>
  <ReactComponent client:load />
  <VueComponent client:load />
  <SvelteComponent client:load />
</div>

Loading all frameworks fully on the client causes large bundle sizes and slower page loads.

📉 Performance Costadds 300kb+ to bundle, blocks rendering for 200ms+ on slow devices

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Load all frameworks fully on client	High (many nodes from multiple frameworks)	Multiple reflows per framework	High paint cost due to large JS	[X] Bad
Partial hydration with client directives	Low (only interactive parts hydrated)	Single reflow per hydrated component	Lower paint cost with smaller JS	[OK] Good

Rendering Pipeline

Astro compiles components from different frameworks into static HTML first, then hydrates only the interactive parts on the client as needed.

→HTML Generation

→JavaScript Loading

→Hydration

→Interaction

⚠️ BottleneckJavaScript Loading and Hydration

Core Web Vital Affected

LCP, INP

This affects page load speed and interaction responsiveness by optimizing how frameworks are loaded and rendered.

Optimization Tips

1Load only the JavaScript needed for interactive components to reduce bundle size.

2Use partial hydration to improve Largest Contentful Paint by serving static HTML first.

3Defer loading of framework code until user interaction or visibility to improve input responsiveness.

Performance Quiz - 3 Questions

What is the main performance benefit of Astro supporting multiple frameworks with partial hydration?

A It reduces the initial JavaScript bundle size by loading only needed framework code.

B It increases the number of DOM nodes to improve rendering speed.

C It forces all frameworks to load at once for faster interaction.

D It disables JavaScript to speed up page load.

DevTools: Performance

How to check: Record page load and interaction in Performance panel; look for long scripting and large JS bundles.

What to look for: Look for reduced scripting time and smaller JS download size indicating better framework loading.