Choosing the right framework for each island in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does 'island architecture' mean in Astro?

Island architecture means building a mostly static page but adding small interactive parts called islands that load JavaScript only when needed.

beginner

Why choose different frameworks for different islands in Astro?

Because each island can use the best framework for its needs, making the page faster and easier to build.

intermediate

Name one benefit of using React for an island in Astro.

React is great for complex interactive UI with lots of state changes.

intermediate

When might you pick Svelte for an island in Astro?

Choose Svelte if you want very small JavaScript bundles and fast loading interactive parts.

advanced

What is a key consideration when mixing frameworks in Astro islands?

Make sure the frameworks don’t add too much JavaScript together, or the page might become slow.

What is the main idea behind Astro's island architecture?

A Load small interactive parts separately

B Use only one framework for the entire page

C Load the whole page with JavaScript at once

D Avoid using JavaScript completely

Astro loads small interactive parts called islands separately to keep pages fast.

Which framework is best for highly interactive UI with complex state?

A Static HTML

B Markdown

C CSS only

D React

React handles complex UI and state changes well, making it good for interactive islands.

Why might you choose Svelte for an Astro island?

A It produces large JavaScript bundles

B It has no interactivity

C It creates small, fast-loading interactive parts

D It only works on server side

Svelte compiles to small JavaScript, making islands fast and lightweight.

What is a risk of mixing many frameworks in Astro islands?

A Page loads too fast

B Too much JavaScript slows down the page

C Page becomes too static

D No interactivity is possible

Using many frameworks can add too much JavaScript, slowing down the page.

How does Astro improve page speed with islands?

A By loading JavaScript only for interactive islands

B By avoiding HTML

C By loading all JavaScript upfront

D By using only one framework

Astro loads JavaScript only for islands that need interactivity, improving speed.

Explain how choosing different frameworks for each island in Astro can improve website performance.

Think about loading only what is needed for each interactive part.

Describe a scenario where you would pick React for an island and Svelte for another in the same Astro page.

Consider the complexity and size of each interactive part.