Islands Architecture: Why We Moved from Vite React

The original mlebotics.com was built with Vite + React. It loaded fast enough, but every page — including purely static ones like the blog and about page — shipped the entire React runtime. For a portfolio site where most pages are just reading text, that felt wrong.

What's Wrong with a React SPA?

Nothing, for the right use case. But a portfolio site is not a dashboard or a complex app. Most of what we needed was:

Static HTML pages (home, about, projects, blog)
A few interactive components (contact form, project filter, blog search)

A React SPA makes the browser download, parse, and execute the entire app before it can render anything. For content-heavy pages, that's wasteful.

The Islands Mental Model

Astro flips this. Every page is static HTML by default. React components are "islands" — isolated, opt-in, hydrated only where needed. The rest of the page is zero JS.

---
// This is an Astro page — renders to pure HTML
import Layout from '../components/static/Layout.astro'
import ContactForm from '../components/react/ContactForm.jsx'
---

<Layout title="Contact">
  <!-- Static HTML — no JS -->
  <h1>Get in Touch</h1>
  
  <!-- React island — hydrated on load, only this component -->
  <ContactForm client:load />
</Layout>

Real-World Impact

On the blog index page, zero JavaScript ships to the browser unless you start typing in the search bar (which triggers the BlogSearch island's hydration). The HTML is already on the page; JS is only loaded if and when you interact.

Was It Worth the Migration?

Yes. The Astro build produces leaner bundles, better Lighthouse scores, and the code is cleaner because static and interactive concerns are explicitly separated. The trade-off is learning a new mental model — but once it clicks, it's hard to go back.