Panduan Komponen Astro: Arsitektur dan Implementasi

Apa Itu Komponen Astro?

Komponen Astro adalah unit dasar pembangunan antarmuka dalam framework Astro. Berbeda dengan framework berbasis JavaScript tradisional, komponen Astro (.astro) bersifat server-side only secara default. Artinya, kode di dalam komponen tidak dikirim ke browser pengguna, melainkan dieksekusi saat proses build atau request, sehingga menghasilkan HTML statis yang sangat ringan.

Struktur Dasar File .astro

Setiap file .astro terdiri dari dua bagian utama: Component Script (diapit oleh code fences ---) dan Component Template (HTML). Berikut adalah contoh implementasi dasar:

--- 
// JavaScript/TypeScript di sini (Server-side)
const title = "Halo Dunia";
---

<!-- HTML di sini -->
<h1>{title}</h1>

Tabel Perbandingan Komponen

Client Directives: Mengaktifkan Interaktivitas

Astro menggunakan konsep Islands Architecture. Anda dapat menyisipkan komponen dari framework lain (seperti React atau Vue) ke dalam file .astro dan menentukan kapan JavaScript tersebut dimuat menggunakan client directives:

• client:load: Memuat dan menjalankan JS segera setelah halaman dimuat.
• client:idle: Memuat JS setelah thread utama bebas.
• client:visible: Memuat JS hanya saat komponen masuk ke viewport.
• client:media: Memuat JS berdasarkan query media (misal: mobile vs desktop).

Tips Implementasi

1. Gunakan komponen .astro untuk elemen statis seperti header, footer, dan kartu konten guna menjaga performa.
2. Gunakan framework UI eksternal hanya untuk bagian yang membutuhkan state kompleks (seperti shopping cart atau form interaktif).
3. Manfaatkan Astro.props untuk mengirim data antar komponen secara efisien.
4. Selalu gunakan client:visible untuk komponen di bagian bawah halaman guna meningkatkan skor Core Web Vitals.