Why Islands architecture optimizes performance in Astro - See It in Action

Why Islands architecture optimizes performance

📖 Scenario: You are building a simple webpage using the Islands architecture in Astro. This architecture helps improve performance by loading only small interactive parts of the page as needed, instead of the whole page at once.

🎯 Goal: Create a basic Astro page with static content and one interactive island component that loads separately to show how Islands architecture optimizes performance.

📋 What You'll Learn

Create a static HTML structure with a heading and paragraph

Add a configuration variable to control if the island is interactive

Implement an island component that only loads its JavaScript when needed

Complete the Astro page by including the island component with proper loading behavior

💡 Why This Matters

🌍 Real World

Islands architecture is used in modern web frameworks like Astro to improve page speed by sending mostly static HTML and loading JavaScript only for small interactive parts.

💼 Career

Understanding Islands architecture helps developers build fast, user-friendly websites that perform well on all devices and networks, a key skill for frontend and full-stack roles.

1

Create static HTML content

Create a variable called pageContent with a string containing a <h1> heading 'Welcome to Islands Architecture' and a <p> paragraph 'This page uses static content for fast loading.'

Astro

# Create a variable called pageContent with the specified HTML string
# Your code here

Hint

Use a template string with backticks to include the HTML tags inside the string.

2

Add interactivity configuration

Create a boolean variable called isInteractive and set it to true to indicate the island component should load interactivity.

Astro

const pageContent = `Welcome to Islands ArchitectureThis page uses static content for fast loading.`;
# Create a boolean variable isInteractive and set it to true
# Your code here

Hint

Use const isInteractive = true; to create the variable.

3

Implement the island component logic

Create a function called IslandComponent that returns a string '' only if isInteractive is true. Otherwise, return an empty string ''.

Astro

const pageContent = `Welcome to Islands ArchitectureThis page uses static content for fast loading.`;
const isInteractive = true;
# Create IslandComponent function that returns button HTML if isInteractive is true
# Your code here

Hint

Use a simple function with a conditional (ternary) operator to return the button HTML only when isInteractive is true.

4

Complete the Astro page with island component

Create a constant called AstroPage that combines pageContent and the result of IslandComponent() inside a <main> tag as a string.

Astro

const pageContent = `Welcome to Islands ArchitectureThis page uses static content for fast loading.`;
const isInteractive = true;
function IslandComponent() {
    return isInteractive ? `Click me` : '';
}
# Create AstroPage combining pageContent and IslandComponent inside 
# Your code here

Hint

Use a template string to combine the static content and the island component inside a main tag.