Why Islands architecture optimizes performance in Astro - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an Island component in Astro.

Astro

export default function [1]() {
  return <button>Click me</button>;
}

Drag options to blanks, or click blank then click option'

AIslandButton

BButtonIsland

CClickComponent

DIslandComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic names that don't indicate the component is an Island.

Naming the component without 'Island' which can confuse its purpose.

The Island component is named IslandButton to clearly identify it as an isolated interactive part.

2fill in blank

medium

Complete the code to hydrate the Island component only on client side.

Astro

import IslandButton from './IslandButton.astro';

<IslandButton client:[1] />

Drag options to blanks, or click blank then click option'

Aload

Bonly

Cvisible

Didle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'client:load' hydrates on page load, not only client.

Using 'client:idle' hydrates when browser is idle, not immediately.

The client:only directive tells Astro to hydrate this Island only on the client side, optimizing performance.

3fill in blank

hard

Fix the error in the code to prevent unnecessary JavaScript loading.

Astro

<script type="module" src="[1]"></script>

Drag options to blanks, or click blank then click option'

A/components/IslandButton.js

B/components/IslandButton.jsx

C/components/IslandButton.ts

D/components/IslandButton.astro

Attempts:

3 left

💡 Hint

Common Mistakes

Loading the .astro file directly causes errors.

Using TypeScript files directly in script tags is invalid.

Only the JavaScript module file (.js) should be loaded for client-side interactivity, not the Astro file.

4fill in blank

hard

Fill both blanks to create a minimal Island that only hydrates when visible.

Astro

export default function [1]() {
  return <div>Interactive Island</div>;
}

<[2] client:[3] />

Drag options to blanks, or click blank then click option'

AVisibleIsland

Cclient:visible

Dclient:load

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for component and tag causes errors.

Using 'client:load' hydrates immediately, not on visibility.

The component is named VisibleIsland and hydrated with client:visible to optimize performance by loading only when visible.

5fill in blank

hard

Fill all three blanks to create an Island with a button that increments a counter only on client.

Astro

import { useState } from 'react';

function [1]() {
  const [count, [2]] = useState(0);
  return <button onClick={() => [3](count + 1)}>Clicked {count} times</button>;
}

export default [1];

Drag options to blanks, or click blank then click option'

AsetCount

BCounterIsland

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names for state setter causes errors.

Not exporting the component prevents it from being used as an Island.

The component is named CounterIsland. The state setter setCount updates the count on button click.