Choosing the right framework for each island in Astro - Step-by-Step Execution

Concept Flow - Choosing the right framework for each island

Start: Identify UI parts

↓

Decide if static or interactive

↓

Static

↓

Combine islands into page

↓

Final page

This flow shows how to split a page into parts, decide which need interactivity, pick frameworks for those, and combine all into one page.

Execution Sample

Astro

const islands = [
  {name: 'Header', interactive: false},
  {name: 'Gallery', interactive: true, framework: 'React'},
  {name: 'Footer', interactive: false}
];

Defines page parts (islands) and marks which need interactivity and which framework to use.

Execution Table

Step	Island	Interactive?	Framework Chosen	Action
1	Header	No	None	Render as static HTML
2	Gallery	Yes	React	Render with React framework
3	Footer	No	None	Render as static HTML
4	Combine	N/A	N/A	Combine all islands into final page

💡 All islands processed and combined into final page

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
islands	[Header, Gallery, Footer]	[Header, Gallery, Footer]	[Header, Gallery, Footer]	[Header, Gallery, Footer]	[Header, Gallery, Footer]
renderedParts	[]	[Header as static HTML]	[Header static, Gallery React]	[Header static, Gallery React, Footer static]	[All combined into page]

Key Moments - 2 Insights

Why do some islands have no framework chosen?

Because those islands are static and don't need interactivity, so rendering plain HTML is enough (see execution_table steps 1 and 3).

How do we decide which framework to use for an interactive island?

We pick the framework best suited for that island's needs, like React for complex UI (see execution_table step 2).

Visual Quiz - 3 Questions

Look at the execution table, which island is rendered with React?

A Header

B Gallery

C Footer

D Combine

💡 Hint

Check the 'Framework Chosen' column in step 2

At which step do we combine all islands into the final page?

A Step 1

B Step 2

C Step 4

D Step 3

💡 Hint

Look for the 'Combine' action in the execution table

If the Gallery island was not interactive, what would change in the execution table?

A Gallery would be rendered as static HTML

B Gallery would still use React

C Footer would use React

D Header would become interactive

💡 Hint

Refer to how non-interactive islands are handled in steps 1 and 3

Concept Snapshot

Split page into islands by UI parts
Decide if each island is static or interactive
Render static islands as plain HTML
Use suitable framework for interactive islands
Combine all islands into one final page

Full Transcript

Choosing the right framework for each island means breaking a webpage into smaller parts called islands. Each island is checked if it needs interactivity. If not, it is rendered as simple static HTML. If yes, we pick a framework like React to render that island. Finally, all islands are combined to form the complete page. This approach helps optimize performance by only loading frameworks where needed.