Digital Transformation
Islands Architecture
Pola arsitektur frontend yang merender halaman sebagai HTML statis, lalu menghidupkan komponen interaktif sebagai pulau JavaScript independen, sehingga total bundle yang dikirim ke pengguna jauh lebih kecil.
TL;DR: Islands Architecture adalah pola frontend yang mengirim halaman sebagai HTML statis dan hanya menghidupkan komponen interaktif tertentu sebagai pulau JavaScript terisolasi. Hasilnya: bundle kecil, time to interactive lebih cepat, dan pengalaman tetap kaya di area yang membutuhkan interaksi.
Apa itu Islands Architecture?
Islands Architecture, sering disebut Component Islands, adalah pendekatan rendering yang dipopulerkan oleh framework seperti Astro dan diadopsi parsial oleh Next.js melalui React Server Components yang dipadu dengan client component. Halaman dirender sebagai HTML statis di server. Hanya bagian yang benar-benar butuh interaksi (form, slider, search bar) yang dihidrasi sebagai pulau JavaScript independen. Sisa halaman tetap HTML murni.
Analogi sederhananya: bayangkan sebuah peta dengan beberapa pulau. Lautan adalah HTML statis yang sudah jadi. Pulau adalah area interaktif yang punya logika dan state sendiri. Antar-pulau tidak saling tergantung, jadi satu pulau boot sendiri tanpa menunggu yang lain.
Cara Kerja vs Hydration Tradisional
| Pendekatan | JavaScript dikirim | Hydration |
|---|---|---|
| SPA klasik (Create React App) | Semua komponen + framework | Seluruh pohon di-hydrate sekaligus |
| Next.js App Router (RSC) | Server component dirender ke HTML, client component dihidrasi | Hibrida, masih ada shared runtime |
| Islands (Astro, Fresh) | Hanya komponen interaktif tertentu | Per pulau, paralel, independen |
Pulau bisa di-hidrasi dengan strategi: client:load (segera), client:idle (saat browser idle), client:visible (saat masuk viewport). Strategi ini langsung berdampak ke LCP dan INP.
Kenapa Penting?
Tim produk Indonesia yang melayani audiens dengan jaringan rata-rata 4G dan device kelas menengah merasakan dampak langsung dari bundle besar. Dalam beberapa proyek terakhir, saya melihat halaman landing yang mengirim 400-600 KB JavaScript hanya untuk menampilkan teks dan satu form. Islands Architecture memangkas itu ke 50-100 KB karena hanya pulau form yang dikirim. Skor Core Web Vitals ikut membaik tanpa mengorbankan interaktivitas.
Pertanyaan Umum
Apakah Next.js mendukung Islands Architecture?
Sebagian. App Router dengan React Server Components mendekati pola yang sama: server component dirender statis, client component menjadi pulau. Tapi Next.js belum punya kontrol granular seperti Astro dalam menentukan kapan tiap pulau dihidrasi.
Kapan sebaiknya pakai Islands?
Untuk konten dominan statis seperti blog, landing page, dokumentasi, atau e-commerce katalog. Untuk aplikasi yang seluruh halamannya interaktif seperti dashboard kompleks, SPA tradisional masih lebih sederhana.
Istilah Terkait