🚀 Mengenal Astro JS: Framework Ringan untuk Web Super Cepat

Dalam dunia pengembangan web modern, kecepatan dan efisiensi menjadi faktor utama dalam menentukan kualitas sebuah website. Pengguna tidak ingin menunggu lama untuk membuka halaman, dan mesin pencari seperti Google pun menjadikan kecepatan sebagai salah satu faktor penilaian SEO. Di sinilah Astro JS hadir sebagai solusi revolusioner.

🌟 Apa Itu Astro?

Astro adalah framework web modern yang berfokus pada pembuatan website statis yang sangat cepat. Astro memungkinkan developer menulis komponen menggunakan framework favorit seperti React, Vue, Svelte, atau bahkan Solid, namun hanya mengirimkan HTML statis ke browser secara default, tanpa JavaScript tambahan yang tidak diperlukan.

Framework ini cocok digunakan untuk:

Blog pribadi
Dokumentasi produk
Portfolio
Landing page
Website statis perusahaan

Astro mengikuti pendekatan yang dikenal sebagai island architecture, yaitu hanya merender JavaScript saat diperlukan pada komponen interaktif (client-only islands), dan membiarkan sisanya tetap statis.

⚙️ Mengapa Memilih Astro?

✅ Zero JavaScript by Default

Astro hanya mengirimkan HTML ke klien, tanpa JavaScript tambahan kecuali kamu memang membutuhkannya. Ini menghasilkan waktu muat yang sangat cepat.

✅ Gunakan Banyak Framework Sekaligus

Tidak bisa memilih antara React atau Svelte? Di Astro, kamu bisa menggunakan keduanya dalam satu proyek.

✅ SEO Friendly

Karena menghasilkan HTML statis, konten lebih mudah diindeks oleh mesin pencari.

✅ Markdown & MDX Support

Astro punya dukungan bawaan untuk menulis konten blog menggunakan Markdown maupun MDX (Markdown + JSX).

✅ Kompatibel dengan CMS Headless

Mau integrasi dengan Strapi, Sanity, atau Contentful? Bisa banget!

🧱 Struktur Dasar Proyek Astro

📁 my-astro-project/
├── public/               # File aset statis (gambar, favicon, dll)
├── src/
│   ├── components/       # Komponen UI seperti header, footer, card, dll
│   ├── layouts/          # Layout reusable untuk halaman
│   ├── pages/            # Halaman website (*.astro, *.md, *.mdx)
│   └── content/          # (Opsional) Konten blog menggunakan collections
├── astro.config.mjs      # Konfigurasi utama proyek
└── package.json          # Konfigurasi dependensi NPM