Islands architecture in Fresh in Deno - Step-by-Step Execution

Concept Flow - Islands architecture in Fresh

Page Request Received

↓

Server Renders Static HTML

↓

Send HTML to Browser

↓

Browser Loads HTML

↓

Identify Islands Components

↓

Load JS for Islands Only

↓

Hydrate Islands (Make Interactive)

↓

User Interacts with Islands

↓

Islands Handle Events Locally

The page is server-rendered as static HTML, then only small interactive parts (islands) load JavaScript and become interactive in the browser.

Execution Sample

Deno

export default function Page() {
  return (
    <div>
      <Counter />
      <StaticContent />
    </div>
  );
}

This Fresh page renders static content and an interactive Counter island that hydrates separately.

Execution Table

Step	Action	Server Output	Browser Action	Result
1	Page request received	Start rendering HTML	Waiting for HTML	Server prepares static HTML
2	Render <StaticContent>	<div>Static text</div>	Receives static HTML	Static content displayed immediately
3	Render <Counter> island	<button>Count: 0</button>	Receives HTML with island marker	Button shown but not interactive yet
4	Send full HTML to browser	Complete HTML sent	Starts parsing HTML	Page visible with static parts
5	Browser identifies island scripts	N/A	Loads JS only for <Counter>	Only Counter JS downloaded
6	Hydrate <Counter> island	N/A	Runs JS to add interactivity	Button becomes clickable
7	User clicks button	N/A	Counter state increments	Count updates on button
8	No JS for <StaticContent>	N/A	Static content remains static	No extra JS loaded
9	End	N/A	Page fully interactive for islands	Efficient loading and interactivity

💡 Execution stops after all islands hydrate and user interactions are handled locally.

Variable Tracker

Variable	Start	After Step 3	After Step 6	After Step 7	Final
Counter state	0 (initial)	0 (rendered static)	0 (hydrated, ready)	1 (after click)	1 (final)
StaticContent	N/A	Rendered static	No change	No change	No change

Key Moments - 3 Insights

Why does only the Counter island load JavaScript and not the whole page?

Because Fresh uses islands architecture, only interactive parts (islands) load JS to keep the page fast and lightweight, as shown in execution_table step 5.

What happens before the islands hydrate in the browser?

The server sends static HTML for the whole page, so users see content immediately but interactive parts are not yet active, as seen in steps 3 and 4.

How does user interaction update the Counter state?

After hydration (step 6), the Counter island runs JS locally in the browser to update state on clicks without reloading the page, shown in step 7.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the browser load JavaScript only for the interactive island?

A Step 3

B Step 5

C Step 7

D Step 2

💡 Hint

Check the 'Browser Action' column for when JS loads for islands.

According to the variable tracker, what is the Counter state after the user clicks the button?

A 1

B Undefined

C 0

D 2

💡 Hint

Look at the 'After Step 7' column for Counter state.

If the StaticContent component needed to be interactive, what would change in the execution flow?

A No change, StaticContent stays static

B The whole page would reload on interaction

C JS would also load and hydrate StaticContent island

D StaticContent would render on the server only

💡 Hint

Islands architecture hydrates only interactive parts as JS islands.

Concept Snapshot

Islands architecture in Fresh:
- Server renders full static HTML page
- Only interactive components (islands) load JS
- Islands hydrate separately in browser
- Improves performance by limiting JS
- User interacts with hydrated islands locally

Full Transcript

Islands architecture in Fresh means the server sends a full static HTML page first. Then, only small parts called islands that need interactivity load JavaScript and become interactive in the browser. For example, a Counter island shows a button that updates count when clicked. Static parts show immediately without JS. This approach speeds up page load and reduces unnecessary JavaScript. The execution table shows steps from server rendering, sending HTML, browser loading JS for islands, hydrating them, and user interaction updating state locally. The variable tracker follows the Counter state from 0 to 1 after a click. Key moments clarify why only islands load JS and how hydration works. The visual quiz tests understanding of when JS loads, state changes, and how adding interactivity affects flow.

Practice

1. What is the main purpose of the Islands architecture in Fresh?

easy

A. To split pages into static and interactive parts for better performance

B. To make all parts of the page fully interactive

C. To load the entire page on the client side only

D. To disable JavaScript on the page

Solution

1. Step 1: Understand Islands architecture concept

   Islands architecture divides a web page into static parts and small interactive components called islands.

2. Step 2: Identify the main benefit

   This split improves page speed and maintainability by only hydrating interactive parts.

3. Final Answer:

   To split pages into static and interactive parts for better performance -> Option A

4. Quick Check:

   Islands architecture = split static + interactive [OK]

Hint: Islands means splitting page into static and interactive parts [OK]

Common Mistakes:

• Thinking all page parts are interactive
• Believing Islands disables JavaScript
• Assuming full client-side rendering

2. Which syntax correctly marks an interactive island component in Fresh?

easy

A. <ISLAND>MyComponent</ISLAND>

B. <Island>MyComponent</Island>

C. <island>MyComponent</island>

D. <ISLAND />

Solution

1. Step 1: Recall correct tag casing

   Fresh uses uppercase ISLAND tag to mark interactive components.

2. Step 2: Check tag usage

   The ISLAND tag wraps the component, so it needs opening and closing tags.

3. Final Answer:

   <ISLAND>MyComponent</ISLAND> -> Option A

4. Quick Check:

   Correct tag is uppercase ISLAND with open/close [OK]

Hint: Use uppercase <ISLAND> tags to mark interactive parts [OK]

Common Mistakes:

• Using lowercase or mixed case tags
• Using self-closing without children
• Confusing with other component tags

3. Given this Fresh page snippet, what will be interactive on the rendered page?

export default function Page() {
  return (
    <main>
      <h1>Welcome</h1>
      <ISLAND><Counter /></ISLAND>
      <p>Static text</p>
    </main>
  );
}

medium

A. Nothing is interactive because ISLAND is not a valid tag

B. The entire page including the heading and paragraph is interactive

C. Only the Counter component inside the ISLAND tag is interactive

D. Only the heading is interactive

Solution

1. Step 1: Identify ISLAND usage

   The Counter component is wrapped inside the ISLAND tag, marking it interactive.

2. Step 2: Understand static vs interactive parts

   The heading and paragraph are outside ISLAND, so they remain static and non-interactive.

3. Final Answer:

   Only the Counter component inside the ISLAND tag is interactive -> Option C

4. Quick Check:

   ISLAND wraps interactive parts only [OK]

Hint: Only components inside <ISLAND> are interactive [OK]

Common Mistakes:

• Assuming whole page is interactive
• Thinking ISLAND tag is invalid
• Believing static parts become interactive

4. What is wrong with this Fresh island component usage?

export default function Page() {
  return (
    <main>
      <ISLAND><Button /></ISLAND>
      <ISLAND><Button /></ISLAND>
    </main>
  );
}

medium

A. ISLAND tags must be self-closing

B. Using multiple ISLAND tags with the same component can cause duplicate hydration issues

C. Button component cannot be used inside ISLAND

D. ISLAND tags must wrap only one element, not components

Solution

1. Step 1: Analyze multiple ISLAND usage

   Using the same interactive component multiple times inside separate ISLAND tags can cause hydration conflicts if keys are missing.

2. Step 2: Understand hydration uniqueness

   Each island needs a unique key or identifier to avoid duplicate hydration errors.

3. Final Answer:

   Using multiple ISLAND tags with the same component can cause duplicate hydration issues -> Option B

4. Quick Check:

   Duplicate islands need unique keys to avoid errors [OK]

Hint: Multiple identical islands need unique keys to avoid errors [OK]

Common Mistakes:

• Thinking ISLAND tags must be self-closing
• Believing components can't be inside ISLAND
• Assuming ISLAND wraps only HTML elements

5. You want to optimize a Fresh page with many interactive buttons. Which approach best uses Islands architecture to improve performance?

hard

A. Use <ISLAND> tags only on static content to reduce JavaScript

B. Wrap all buttons together in a single <ISLAND> to hydrate them all at once

C. Do not use <ISLAND> tags and hydrate the entire page client-side

D. Wrap each button in its own <ISLAND> with unique keys to hydrate only needed parts

Solution

1. Step 1: Understand hydration granularity

   Wrapping each button in its own ISLAND allows independent hydration, improving performance by loading only needed parts.

2. Step 2: Importance of unique keys

   Assigning unique keys to each island prevents hydration conflicts and ensures smooth interactivity.

3. Final Answer:

   Wrap each button in its own <ISLAND> with unique keys to hydrate only needed parts -> Option D

4. Quick Check:

   Separate islands with keys = better performance [OK]

Hint: Use separate islands with unique keys for many interactive parts [OK]

Common Mistakes:

• Grouping all buttons in one island causing unnecessary hydration
• Not using ISLAND tags and hydrating whole page
• Misusing ISLAND on static content