Astro Framework: Build Fast Static Sites dengan Island Architecture

Astro adalah framework web yang fokus pada performa. Konsep uniknya: island architecture — komponen interaktif hanya hydrated di tempat yang perlu, sisanya static HTML. Hasilnya: website yang sangat cepat karena minim JavaScript.

Kenapa Astro?

Framework modern seperti Next.js dan Nuxt mengirim JavaScript ke client untuk rendering. Ini powerful, tapi sering overkill untuk content-heavy site (blog, docs, landing page). Astro mengambil pendekatan berbeda:

• Zero JavaScript by default: Semua di-render jadi static HTML di server
• Partial hydration: Komponen interaktif hanya hydrated saat diperlukan
• Framework agnostic: Bisa pakai React, Vue, Svelte, Solid, atau Preact
• Content-first: Built-in support untuk Markdown, MDX, dan content collections

Island Architecture

Analoginya: lautan HTML statis dengan "pulau" interaktif. Sebuah halaman blog bisa 100% statis, tapi punya satu "island" komentar yang interaktif.

---
// Component frontmatter (server-side)
import Counter from '../components/Counter.jsx';
import Header from '../components/Header.astro';
---

<Header />  
<h1>Blog Post Title</h1>
<p>This is all static HTML...</p>

<Counter client:visible />