0
0
Astroframework~5 mins

Choosing the right framework for each island in Astro

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Using the right framework for each part of your website helps it run faster and feel smoother. It lets you pick the best tool for each small section, called an island.

When you want parts of your website to load quickly without waiting for everything.
When different sections need different features or styles.
When you want to mix simple static content with interactive parts.
When you want to improve user experience by loading only what is needed.
When you want to keep your website easy to update and maintain.
Syntax
Astro
---
import { FrameworkComponent } from 'framework-package';
---
<FrameworkComponent client:load />
Use client:load or similar directives to tell Astro when to load the island.
Each island can use a different framework like React, Vue, or Svelte.
Examples
This eagerly loads a React button, hydrating it immediately on mount.
Astro
---
import ReactButton from '../components/ReactButton.jsx';
---
<ReactButton client:load />
This loads a Vue counter when the browser is idle, saving resources.
Astro
---
import VueCounter from '../components/VueCounter.vue';
---
<VueCounter client:idle />
This loads a Svelte form only when it becomes visible on the screen.
Astro
---
import SvelteForm from '../components/SvelteForm.svelte';
---
<SvelteForm client:visible />
Sample Program

This example shows a page with static content and two islands. The React greeting loads right away, and the Vue timer loads only when visible. This keeps the page fast and interactive.

Astro
---
import ReactGreeting from '../components/ReactGreeting.jsx';
import VueTimer from '../components/VueTimer.vue';
---
<html lang="en">
  <head>
    <title>Island Framework Example</title>
  </head>
  <body>
    <h1>Welcome to My Site</h1>
    <ReactGreeting client:load />
    <p>This is static content that loads immediately.</p>
    <VueTimer client:visible />
  </body>
</html>
OutputSuccess
Important Notes

Islands let you mix static and interactive parts easily.

Loading islands only when needed improves speed and user experience.

Choose frameworks based on what fits each island's needs best.

Summary

Islands are small interactive parts of a page.

Use different frameworks for different islands to get the best results.

Load islands only when needed to keep your site fast.