What is hybrid rendering in astro

AstroConceptBeginner · 3 min read

Hybrid Rendering in Astro: What It Is and How It Works

Hybrid rendering in Astro means combining static HTML generation with selective client-side JavaScript to create fast, interactive web pages. It lets you render most content on the server while adding interactivity only where needed using Astro Islands.

⚙️

How It Works

Hybrid rendering in Astro works like making a mostly finished cake (static HTML) and adding fresh toppings (interactive JavaScript) only where you want extra flavor. Astro builds your page mostly as static HTML on the server, which loads very fast in the browser. Then, it adds small interactive parts called Astro Islands that load JavaScript only for those parts.

This approach means your page is quick to show up and uses less JavaScript overall, improving performance and user experience. The interactive parts can be buttons, forms, or any UI that needs user interaction, while the rest stays simple and fast.

💻

Example

This example shows a static page with a button that counts clicks using hybrid rendering. The page HTML is static, but the button is interactive because Astro loads JavaScript only for it.

astro

---
import Counter from '../components/Counter.jsx';
---
<html lang="en">
  <head>
    <title>Hybrid Rendering Example</title>
  </head>
  <body>
    <h1>Welcome to Astro Hybrid Rendering</h1>
    <Counter client:load />
  </body>
</html>

Output

<h1>Welcome to Astro Hybrid Rendering</h1> <button>Clicks: 0</button>

🎯

When to Use

Use hybrid rendering in Astro when you want fast page loads but still need some interactive features. It is perfect for blogs, marketing sites, or documentation where most content is static but small parts like forms, buttons, or widgets need to respond to user actions.

This approach helps keep your site lightweight and fast while giving users a smooth interactive experience only where it matters.

✅

Key Points

Hybrid rendering mixes static HTML with client-side JavaScript only where needed.
Astro Islands are the interactive parts that load JavaScript separately.
This method improves performance by reducing unnecessary JavaScript.
Ideal for sites that are mostly static but require some interactivity.

✅

Key Takeaways

Hybrid rendering in Astro combines static HTML with selective client-side JavaScript for interactivity.

Astro Islands let you add interactive components without loading JavaScript for the whole page.

This approach improves page speed and user experience by minimizing JavaScript.

Use hybrid rendering when your site is mostly static but needs some interactive UI parts.