Islands Architecture with Astro: A Zero‑JS Front‑End Approach

After a period focused on back‑end work, the author returns to front‑end topics and decides to share recent learnings, starting with the Islands Architecture pattern.

Islands Architecture

Islands Architecture treats a page as static HTML that contains interactive UI components—called islands—that are rendered independently, allowing multiple islands on a single page without requiring the whole page to be hydrated.

Static HTML

Interactive UI components

Multiple independent islands

Astro is a prominent framework that embodies this pattern and promotes a “zero‑JS frontend architecture”, meaning the server renders complete HTML and the client does not need to load additional JavaScript for static parts.

Demo

Below is a simple React counter component:

import { useState } from 'react'

export const Counter = () => {
  const [count, setCount] = useState(0)
  return
setCount(i => i + 1)}>click me to increment: {count}
}

And an Astro file that uses the component:

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import { Counter } from '../components/Counter';
---

Astro’s syntax blends ideas from Vue SFC, React JSX, and MDX, allowing developers to write components in a familiar way while the framework handles static rendering.

Unlike typical SSR frameworks that render HTML on the server but still require full‑bundle JavaScript for client‑side hydration, Astro serves pure HTML for static parts and only loads JavaScript for islands that need interactivity.

Turning a React Component into an Island

By adding the client:load directive, Astro treats the component as an island, bundling its code and dependencies for client‑side loading and hydration:

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import { Counter } from '../components/Counter';
---

Now the Counter component becomes interactive on the client without affecting the rest of the page.

Advantages of Islands Architecture

The pattern excels for content‑centric sites such as blogs, documentation, and news portals. Compared with SPA frameworks like Next.js, Astro can reduce JavaScript payload by up to 94%, load 34% faster, and cut network usage by 65%.

In essence, Islands Architecture offers a modern, developer‑friendly alternative to traditional MPA or SPA approaches, delivering better performance and a smoother development experience for static‑first websites.

Conclusion

Islands Architecture is a straightforward yet powerful evolution in front‑end engineering, preserving the front‑back separation while providing selective interactivity and significant performance gains for content‑driven projects.

References

Islands Architecture

Rendering on the Web: Performance Implications of Application Architecture

Is 0kb of JavaScript in your Future?