Introduction
AstroJS is reshaping how we think about front-end performance. Its “Islands Architecture” allows developers to combine static site generation (SSG) with selective hydration of dynamic components. This creates blazing-fast sites that are still interactive where needed.
But one common challenge is deciding: when should a component be statically rendered, and when should it be dynamic? Overusing static rendering can make your UI feel lifeless, while overusing dynamic rendering hurts performance.
In this article, we’ll explore:
- How Astro handles static vs. dynamic rendering
- Real-world scenarios for each strategy
- Examples using React islands in Astro
- Metrics and pitfalls when mixing the two approaches
By the end, you’ll know how to choose the right rendering mode for each part of your UI.
1. Static rendering in Astro
Static rendering means HTML is generated at build time and delivered as a pre-rendered file. This results in:
- Fast load times (no JS required for static parts).
- SEO-friendly output (fully crawlable HTML).
- Cost efficiency (cached on CDN).
Example: A marketing hero section can be rendered once and reused everywhere.
---
// Hero.astro
const title = "Welcome to Our Platform";
const subtitle = "Blazing-fast apps with AstroJS";
---
<section class="hero">
<h1>{title}</h1>
<p>{subtitle}</p>
<a href="/get-started" class="btn">Get Started</a>
</section>This requires no JavaScript on the client.
When to use static rendering:
- Marketing pages (landing, about, resources)
- Blog posts and documentation
- UI elements that don’t need interaction
2. Dynamic rendering with Astro islands
Dynamic rendering means components are hydrated with JavaScript on the client. Astro supports framework islands (React, Vue, Svelte, etc.).
Example: React component hydrated in Astro:
---
// Counter.astro
import Counter from "../components/Counter.jsx";
---
<Counter client:load />The React component:
// Counter.jsx
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}Hydration options in Astro:
- client:load → loads immediately after page load
- client:visible → hydrates when component enters viewport
- client:idle → hydrates when browser is idle
- client:media → hydrates based on media query
When to use dynamic rendering:
- Interactive UI (counters, toggles, forms)
- Dashboards and user-specific data
- Search bars, filters, live updates
3. Comparing performance metrics
Astro’s strength is shipping zero JS by default. Dynamic rendering should be used selectively.
Example metrics
- Static Hero Section: 0 KB JS shipped
- React Counter Island: ~12 KB JS shipped (React + component)
- Page combining both: still <20 KB total JS, compared to 200–300 KB in a typical React SPA.
Rule of thumb:
- Default to static rendering.
- Add interactivity via islands only where necessary.
4. Pitfalls and best practices
Pitfall 1: Over-hydration
- Problem: Hydrating too many small islands increases JS bundle size.
- Solution: Combine related interactive features into one island.
Pitfall 2: Using React/Vue for static content
- Problem: Adds unnecessary client-side JS.
- Solution: Use .astro files for purely static UI.
Pitfall 3: Ignoring caching
- Problem: Dynamic content can bypass CDN caching.
- Solution: Cache static parts aggressively; hydrate only user-specific components.
Pitfall 4: Accessibility issues
- Problem: Some hydrated components may lose semantic HTML.
- Solution: Ensure ARIA roles and semantic tags remain intact.
Conclusion
Astro makes it possible to blend static and dynamic rendering in a way that maximizes both performance and interactivity.
Key takeaways:
- Static rendering is best for content-heavy, non-interactive UI.
- Dynamic rendering is essential for interactivity, but should be applied selectively.
- Astro’s islands approach lets you combine both without shipping unnecessary JavaScript.
- The smartest strategy is to default to static, and layer in dynamic only where it adds value.
👉 Want to optimize your AstroJS applications for speed and interactivity? Explore our UI/UX services here.
