Belajar Astro: Framework untuk Content-Focused Website

Astro adalah meta-framework yang mengambil pendekatan berbeda dari Next.js atau Nuxt. Focus utamanya adalah content-focused websites dengan performance yang luar biasa.

Kenapa Astro?

Zero JavaScript by Default

---
// Ini adalah component Astro
// Code di sini hanya jalan di build time
const posts = await fetch('/api/posts').then(r => r.json());
---

<ul>
  {posts.map(post => <li>{post.title}</li>)}
</ul>

HTML yang di-generate tidak mengandung JavaScript! Ini membuat website sangat cepat.

Islands Architecture

Astro memungkinkan kita menambahkan interactivity hanya di bagian yang membutuhkan:

---
import Counter from './Counter.jsx';
---

<h1>Welcome!</h1>

<!-- Hanya component ini yang hydrated -->
<Counter client:visible />

Multi-Framework Support

Yang keren dari Astro:

Framework	Support
React	✅
Vue	✅
Svelte	✅
Solid	✅
Preact	✅

Bisa mix and match dalam satu project!

Content Collections

Astro punya built-in support untuk content management:

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()).optional(),
  }),
});

Performance Comparison

Benchmark untuk simple blog:

Metric	Next.js	Astro
JS Bundle Size	89 KB	0 KB
Time to Interactive	1.2s	0.3s
Lighthouse Score	92	100

Kapan Pakai Astro?

• ✅ Blog dan portfolio
• ✅ Documentation sites
• ✅ Marketing pages
• ❌ Complex web apps (gunakan Next.js/Remix)

Kesimpulan

Astro adalah pilihan yang excellent untuk content-focused websites. Portfolio website ini dibuat dengan Astro dan hasilnya sangat memuaskan - fast, SEO-friendly, dan developer experience yang bagus!

Happy coding! 🚀