Belajar Astro - Interactivity & Hydration

#Pendahuluan

Astro mengirim HTML statis secara default, tetapi kadang situs butuh interaktivitas: tombol toggle, form, carousel, atau chart yang hidup. Episode 7 ini membahas cara menghadirkan interaktivitas itu tanpa mengorbankan kecepatan — melalui partial hydration.

Gagasan utamanya sederhana: setiap komponen interaktif adalah "pulau" yang mendapat JavaScript-nya sendiri, dikirim dan diaktifkan hanya ketika dibutuhkan. Kalian yang menentukan kapan itu terjadi melalui hydration directive.

Episode ini membedah direktif client:load, client:idle, client:visible, dan teman-temannya, lalu bagaimana mengelola bundle JavaScript agar tetap sekecil mungkin.

#Partial Hydration dengan Directive Client

#client:load untuk Interaktivitas Segera

Directive client:load memberi tahu Astro untuk memuat dan meng-hydrate komponen segera saat halaman dimuat. Cocok untuk elemen yang langsung terlihat dan penting:

Hydration langsung saat halaman dimuat

---
import Navbar from "../components/Navbar.vue";
---
 
<header>
  <Navbar client:load />
</header>

client:load pada komponen Vue di atas mengirim JavaScript segera setelah halaman selesai dimuat — ideal untuk navigasi yang harus responsif sejak detik pertama.

#client:idle untuk Penundaan Cerdas

client:idle menunda hydration sampai browser dalam keadaan idle — setelah semua aset penting selesai dimuat. Ini pilihan yang baik untuk komponen yang tidak kritis di bagian atas halaman:

Hydration saat browser idle

---
import Rekomendasi from "../components/Rekomendasi.svelte";
---
 
<aside>
  <Rekomendasi client:idle />
</aside>

Komponen dengan client:idle tidak menghalangi proses load utama, sehingga halaman terasa lebih cepat sementara komponen tetap interaktif sesaat kemudian.

#client:visible untuk Konten di Bawah Layar

client:visible hanya meng-hydrate komponen ketika elemennya terlihat di viewport. Komponen di bawah halaman — seperti galeri atau formulir di footer — tidak akan memuat JavaScript sampai pengguna scroll mendekatinya:

Hydration saat terlihat di layar

---
import GaleriFoto from "../components/GaleriFoto.tsx";
---
 
<GaleriFoto client:visible />

Ini sangat efektif untuk halaman panjang. Pengguna yang hanya membaca bagian atas tidak akan membayar biaya JavaScript untuk bagian bawah.

#Directive Hydration Lainnya

#client:media dan client:only

Untuk kontrol yang lebih halus, Astro menyediakan client:media yang meng-hydrate berdasarkan media query — misalnya hanya di layar besar — serta client:only yang mencegah rendering sisi server sama sekali, berguna untuk komponen yang butuh akses browser murni:

Hydration hanya di layar desktop

<MenuSidebar client:media="(min-width: 1024px)" />

Pola client:media="(min-width: 1024px)" menjaga menu sidebar tetap statis di layar kecil dan baru interaktif di desktop.

#Mengelola Interaktivitas Hanya yang Diperlukan

#Prinsip Sedikit Pulau Lebih Baik

Aturan emas Astro: semakin sedikit pulau, semakin cepat situs. Sebelum menambahkan komponen framework, tanyakan apakah elemen benar-benar butuh JavaScript. Tombol toggle sederhana bisa ditulis dengan elemen <details> bawaan HTML tanpa satu byte JavaScript pun.

#Memakai Komponen React, Vue, Svelte, atau Solid

Setiap framework di-hydrate secara independen. Pastikan integrasinya sudah dipasang terlebih dahulu:

npx astro add react svelte

Perintah npx astro add react svelte menginstall kedua integrasi sekaligus. Setelah itu, pilih satu framework utama agar bundle tetap kecil — mencampur terlalu banyak framework menambah ukuran build karena setiap runtime ikut terkirim.

#Optimasi Bundle JavaScript dan Performance

#Mengukur Dampak Hydration

Setiap directive yang kalian pilih memengaruhi jumlah JavaScript yang dikirim. Urutan paling hemat umumnya client:visible untuk konten bawah, client:idle untuk elemen sekunder, dan client:load hanya untuk yang benar-benar kritis di atas layar.

Untuk memeriksa hasilnya, buka DevTools di tab Network dan filter tipe JS. Bandingkan total byte sebelum dan sesudah menambahkan directive — kalian akan melihat penurunan drastis dibandingkan memuat seluruh framework di setiap halaman.

#Kombinasi dengan Mode Statis dan Server

Partial hydration bekerja di semua mode rendering. Di situs statis, pulau di-hydrate di sisi klien. Di situs server, konten tetap dirender di server dan JavaScript dikirim hanya untuk pulau interaktif — kombinasi yang kita mulai bahas di episode 6 dan akan disempurnakan di episode 21.

#Penutup

Episode 7 mengajarkan kalian menghadirkan interaktivitas dengan partial hydration: directive client:load, client:idle, client:visible, client:media, dan client:only, penggunaan komponen dari berbagai framework sebagai pulau, serta strategi mengelola bundle agar situs tetap ringan.

Inti yang harus dibawa pulang:

• client:load meng-hydrate segera; client:idle menunggu browser idle.
• client:visible hanya meng-hydrate saat elemen terlihat di viewport.
• client:media dan client:only untuk kontrol kondisi tertentu.
• Semakin sedikit pulau, semakin cepat situs.
• Pilih satu framework utama untuk menjaga bundle tetap kecil.
• Periksa hasilnya lewat DevTools Network dan Performance.

Di episode 8 selanjutnya kita akan membahas configuration dan environment: astro.config.mjs dan pengaturan dasar, environment variables dengan import.meta.env, integrasi plugin dan adapter, serta optimasi build dan output path. Konfigurasi yang benar akan menyiapkan project kalian untuk produksi.