Islands architecture in Fresh in Deno - Performance & Optimization

Performance: Islands architecture in Fresh

HIGH IMPACT

This affects page load speed by reducing JavaScript bundle size and improves interaction responsiveness by hydrating only small interactive parts.

Rendering a mostly static page with some interactive widgets

Deno

import { h } from 'preact';
import Counter from '../islands/Counter.tsx';

export default function Page() {
  return (
    <div>
      <h1>Welcome</h1>
      <Counter />
      <p>Static content here...</p>
    </div>
  );
}

// islands/Counter.tsx
import { useState } from 'preact/hooks';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Only the interactive Counter island is hydrated, reducing JS size and speeding up page load and input responsiveness.

📈 Performance GainReduces JS bundle by ~40kb; hydration time cut by 60%; improves LCP and INP

Rendering a mostly static page with some interactive widgets

Deno

import { h } from 'preact';
import { useState } from 'preact/hooks';

export default function Page() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Welcome</h1>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <p>Static content here...</p>
    </div>
  );
}

Hydrating the entire page including static content causes large JavaScript bundles and delays interactivity.

📉 Performance CostBlocks rendering for 200-300ms on slow devices; adds 50-70kb to JS bundle

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full page hydration	High (all nodes hydrated)	Multiple reflows due to JS execution	High paint cost from layout thrashing	[X] Bad
Islands architecture	Low (only interactive islands)	Single reflow per island	Lower paint cost, smoother rendering	[OK] Good

Rendering Pipeline

The browser first renders static HTML and CSS. Only small interactive islands trigger hydration, which runs JavaScript to add event listeners and state. This reduces layout recalculations and paint work.

→HTML Parsing

→Style Calculation

→Layout

→Paint

→Hydration (JS Execution)

⚠️ BottleneckHydration stage is most expensive if done for the whole page.

Core Web Vital Affected

LCP, INP

This affects page load speed by reducing JavaScript bundle size and improves interaction responsiveness by hydrating only small interactive parts.

Optimization Tips

1Hydrate only interactive islands, not the whole page.

2Keep JavaScript bundles small by splitting code per island.

3Measure hydration time to ensure fast input responsiveness.

Performance Quiz - 3 Questions

What is the main performance benefit of using islands architecture in Fresh?

A Loading all JavaScript at once reduces network requests.

B Hydrating only small interactive parts reduces JavaScript execution time and speeds up page load.

C Hydrating the entire page ensures all content is interactive immediately.

D Using islands architecture increases CSS complexity.

DevTools: Performance

How to check: Record a performance profile while loading the page and interacting with islands. Look for long scripting tasks and layout shifts.

What to look for: Shorter scripting times and fewer layout recalculations indicate good islands hydration. Long blocking scripts indicate full hydration.

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