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.

Practice

1. What is the main reason the Islands architecture in Astro improves web performance?

easy

A. It only hydrates interactive parts of the page, not the whole page.

B. It loads all JavaScript at once to speed up rendering.

C. It uses server-side rendering exclusively without any client interactivity.

D. It disables JavaScript to make pages load faster.

Solution

1. Step 1: Understand hydration in Islands architecture

   Islands architecture hydrates only small interactive parts (islands) instead of the entire page.

2. Step 2: Compare hydration scope impact on performance

   Hydrating only parts reduces JavaScript load and speeds up page interactivity.

3. Final Answer:

   It only hydrates interactive parts of the page, not the whole page. -> Option A

4. Quick Check:

   Partial hydration = better performance [OK]

Hint: Remember: hydrate only needed parts, not full page [OK]

Common Mistakes:

• Thinking all JavaScript loads at once
• Confusing server-side rendering with hydration
• Believing JavaScript is disabled entirely

2. Which of the following is the correct way to define an interactive island component in Astro?

easy

A. <MyComponent client:only />

B. <MyComponent client:load />

C. <MyComponent client:idle />

D. <MyComponent client:server />

Solution

1. Step 1: Identify correct hydration directive

   Astro uses client:load to hydrate component when page loads.

2. Step 2: Understand other directives

   client:only loads component only on client, client:idle hydrates when browser is idle, client:server is invalid.

3. Final Answer:

   <MyComponent client:load /> -> Option B

4. Quick Check:

   Use client:load for immediate hydration [OK]

Hint: Use client:load to hydrate on page load [OK]

Common Mistakes:

• Confusing client:only with client:load
• Using invalid client:server directive
• Not closing component tag properly

3. Given this Astro page snippet, what will happen when the page loads?

<script type="module">
  console.log('Page loaded');
</script>

<Counter client:load />

<script type="module">
  console.log('Counter hydrated');
</script>

medium

A. 'Page loaded' logs immediately; 'Counter hydrated' logs only after hydration.

B. Both 'Page loaded' and 'Counter hydrated' messages appear immediately.

C. 'Counter hydrated' logs first, then 'Page loaded'.

D. Neither message logs because scripts are ignored.

Solution

1. Step 1: Understand script execution timing

   Scripts outside components run immediately on page load, so 'Page loaded' logs first.

2. Step 2: Understand hydration timing for client:load

   The Counter component hydrates after page load, so 'Counter hydrated' logs after hydration.

3. Final Answer:

   'Page loaded' logs immediately; 'Counter hydrated' logs only after hydration. -> Option A

4. Quick Check:

   Scripts outside run immediately; hydration scripts run later [OK]

Hint: Scripts outside run immediately; hydration scripts run after [OK]

Common Mistakes:

• Assuming all scripts run at the same time
• Thinking hydration logs appear immediately
• Believing scripts are ignored in Astro

4. You wrote this Astro code but the interactive island does not hydrate:

<MyWidget client:load></MyWidget>

What is the likely error?

medium

A. Astro does not support hydration on components.

B. You used client:load instead of client:idle.

C. You forgot to self-close the component tag with />.

D. You need to import MyWidget as a server component.

Solution

1. Step 1: Check component tag syntax

   Astro requires self-closing tags for components without children, so <MyWidget client:load /> is correct.

2. Step 2: Understand impact of incorrect tag

   Using an opening and closing tag without children can cause hydration to fail.

3. Final Answer:

   You forgot to self-close the component tag with />. -> Option C

4. Quick Check:

   Self-close components without children [OK]

Hint: Self-close components without children to enable hydration [OK]

Common Mistakes:

• Using opening and closing tags without children
• Confusing hydration directives
• Thinking Astro disables hydration

5. How does Islands architecture help reduce JavaScript bundle size on a page with many interactive widgets?

hard

A. By rendering all widgets as static HTML without any interactivity.

B. By bundling all widgets into one large JavaScript file for faster loading.

C. By disabling JavaScript on all widgets except the first one.

D. By hydrating only the widgets that need interactivity, loading less JavaScript overall.

Solution

1. Step 1: Understand hydration scope in Islands architecture

   Islands hydrate only interactive widgets, so only needed JavaScript loads.

2. Step 2: Compare with bundling all widgets

   Bundling all widgets together increases bundle size and slows loading.

3. Step 3: Recognize impact on performance

   Loading less JavaScript reduces page load time and improves user experience.

4. Final Answer:

   By hydrating only the widgets that need interactivity, loading less JavaScript overall. -> Option D

5. Quick Check:

   Partial hydration reduces JS bundle size [OK]

Hint: Hydrate only needed widgets to keep JS small [OK]

Common Mistakes:

• Thinking all widgets load JavaScript at once
• Assuming JavaScript is disabled on widgets
• Believing static HTML means no interactivity