Islands Architecture: Cara Tim Frontend Indonesia Mengirim JavaScript Lebih Sedikit di 2026

TL;DR: Islands Architecture adalah pola frontend yang merender halaman sebagai HTML statis dan hanya menghidupkan komponen interaktif tertentu sebagai pulau JavaScript independen. Untuk audiens Indonesia dengan jaringan rata-rata 4G dan device mid-range, pola ini memangkas time to interactive 30-50% pada landing page tipikal.

Banyak tim frontend Indonesia yang saya temui dalam dua tahun terakhir punya masalah yang sama. Halaman landing tampak ringan, tapi Lighthouse menampilkan skor performance 60-an. Setelah audit, ternyata bundle JavaScript yang dikirim mencapai 400-600 KB hanya untuk halaman yang isinya 80% teks dan satu form. JavaScript itu berisi seluruh framework, router, state management, dan komponen yang sebenarnya tidak interaktif.

Pola lama mengirim segalanya ke client supaya React bisa hydrate seluruh pohon. Pola yang lebih baru memilih lebih cermat: kirim HTML untuk yang statis, kirim JavaScript hanya untuk yang interaktif. Itulah inti Islands Architecture.

Apa yang Membedakan Islands dari SPA Tradisional

Pada SPA tradisional, server mengirim shell HTML kosong, lalu browser mengunduh bundle JavaScript besar yang merender seluruh halaman. Pada Islands Architecture, server mengirim HTML lengkap. Browser menerima halaman yang bisa langsung dibaca, lalu hanya mengunduh JavaScript untuk pulau-pulau interaktif yang ditandai eksplisit oleh developer.

Konsep ini terkait erat dengan Server Component di React dan implementasi di Astro. Yang membedakan Astro adalah kontrol granular: developer bisa memilih client:load (boot saat halaman ready), client:idle (saat browser idle), atau client:visible (saat pulau masuk viewport). Strategi ini langsung berdampak ke LCP dan INP, dua dari tiga Core Web Vitals yang menjadi sinyal peringkat Google.

Framework yang Mendukung Pola Islands

Untuk tim Indonesia yang sudah memakai Next.js, App Router dengan disiplin batas Server vs Client Component memberikan manfaat serupa. Praktiknya: tahan godaan menambah "use client" di file akar, taruh di komponen daun yang benar-benar butuh state atau event handler. Pendekatan ini sejalan dengan rekomendasi resmi di Next.js documentation.

Studi Kasus: Memangkas Bundle di Landing Vetmo

Saat tim membangun ulang landing page Vetmo (pet care platform), kami menemukan halaman utama mengirim 380 KB JavaScript hanya untuk menampilkan hero, daftar layanan, dan form booking. Setelah memetakan komponen, hanya form booking yang benar-benar interaktif. Sisanya markup statis dengan animasi kecil.

Migrasi ke pola Islands menghasilkan: hero dan section layanan dirender penuh server, tinggal 12 KB JavaScript untuk pulau form booking yang dibungkus client:visible agar baru di-hydrate saat pengguna scroll mendekati. LCP turun dari 3,4 detik ke 1,8 detik di koneksi 4G, dan halaman bisa dibaca instan saat HTML sampai. Skor Lighthouse mobile naik dari 64 ke 92.

Yang penting: pengalaman pengguna tidak menurun. Form tetap responsif saat dibutuhkan, hanya tidak boot di awal saat tidak dipakai.

Kapan Islands Tidak Cocok

Pola ini bukan peluru perak. Untuk aplikasi dashboard kompleks dengan banyak interaksi simultan, real-time data, dan state global, SPA tradisional atau hybrid (Next.js dengan client component dominan) masih lebih sederhana untuk tim. Islands paling unggul ketika rasio konten statis vs interaktif berat ke statis, kondisi yang umum di marketing site, blog, e-commerce katalog, dan dokumentasi.

Hindari over-engineering. Jika halaman saat ini sudah memuat di bawah 2 detik dan bundle di bawah 100 KB, migrasi ke Islands mungkin tidak memberikan ROI yang sepadan dengan effort refactor.

Pertanyaan Umum

Apakah Islands Architecture menggantikan React?

Tidak. Astro mendukung React, Vue, Svelte, dan Solid sebagai framework di dalam pulau. Yang berubah adalah cara hydration dijalankan, bukan framework pulau itu sendiri.

Bagaimana SEO dampaknya?

Positif. HTML lengkap dirender di server, jadi crawler Googlebot menerima konten lengkap tanpa perlu menjalankan JavaScript. Kombinasi ini juga membantu di AI search yang lebih mengandalkan parsing HTML.

Bisakah Next.js mencapai performa setara Astro?

Bisa, dengan disiplin. Pakai Server Component sebagai default, batasi "use client" ke komponen daun, manfaatkan dynamic import untuk komponen client besar, dan gunakan fetchpriority untuk LCP image. Hasilnya bisa sangat dekat dengan Astro untuk kebanyakan use case.

Apakah Islands cocok untuk aplikasi besar?

Untuk modul yang dominan konten (marketing, blog, public pages), iya. Untuk modul aplikasi internal dengan interaksi tinggi, evaluasi case-by-case. Banyak perusahaan menjalankan Islands di public site dan SPA tradisional di authenticated app, dipisah by route.

Penutup

Islands Architecture bukan tren baru, tapi 2026 menjadi waktu yang tepat untuk mengadopsinya di pasar Indonesia. Audiens kita semakin sensitif terhadap kecepatan, dan device serta jaringan masih bervariasi. Mengirim JavaScript lebih sedikit adalah keputusan yang menghormati pengguna sekaligus membantu metrik bisnis.

Mulailah dari halaman landing yang paling penting, ukur baseline LCP dan total bundle, lalu lakukan satu eksperimen kecil. Hasilnya biasanya cukup meyakinkan untuk membangun momentum tim dalam adopsi yang lebih luas.