Zero JavaScript: How Astro Ships Less
The JavaScript Problem
Modern web frameworks ship large JavaScript bundles by default. A simple “Hello World” in React can include 40KB+ of framework code. For content-heavy sites, this JavaScript is often unnecessary.
Astro’s Approach
Astro takes the opposite stance: zero JavaScript by default. Every component you write renders to static HTML at build time. The framework code is stripped away — only the HTML and CSS reach the browser.
How It Works
- Build time rendering — Components execute during
npm run build, not in the browser - HTML output — The result is plain HTML + CSS
- No runtime — No framework runtime is shipped unless you opt in
- Selective hydration — Add
client:*directives only where interactivity is needed
Real-World Impact
Consider a page with a header, navigation, hero section, feature cards, and a footer. In a traditional React app, all of this requires the React runtime. In Astro, it’s all static HTML.
The only JavaScript in this entire showcase site is on the Islands Demo page — where we explicitly demonstrate interactive components. Every other page ships zero JavaScript.
Measuring the Difference
| Metric | Traditional SPA | Astro (static) |
|---|---|---|
| JS bundle | 150KB+ | 0KB |
| FCP | ~2s | <0.5s |
| Lighthouse Performance | ~70 | ~100 |
| Time to Interactive | ~3s | Instant |
When to Opt In
Use client:* directives only when you genuinely need interactivity:
- Form submissions with live validation →
client:visible - Above-the-fold interactive menus →
client:load - Heavy widgets (date pickers, code editors) →
client:idle
For everything else — headings, paragraphs, images, layouts — let Astro render it statically.