Island Architecture (Arsitektur Pulau)

TL;DR: Island Architecture adalah pola membangun halaman sebagai HTML statis, lalu hanya bagian yang benar-benar interaktif (pulau) yang diberi JavaScript dan dihidrasi sendiri-sendiri. Hasilnya JavaScript yang dikirim ke browser lebih kecil, sehingga halaman terasa cepat sejak awal. Pola ini populer lewat framework seperti Astro.

Bayangkan satu halaman landing produk. Sebagian besar isinya teks, gambar, dan tabel harga yang tidak butuh interaksi sama sekali. Hanya tombol keranjang dan kolom pencarian yang benar-benar perlu JavaScript. Island Architecture memisahkan keduanya: yang statis tetap statis, yang interaktif berdiri sebagai pulau mandiri.

Apa itu Island Architecture?

Island Architecture adalah pendekatan rendering di mana halaman dikirim sebagai HTML statis terlebih dulu, lalu komponen interaktif tertentu dihidrasi secara independen. Pendekatan ini menyederhanakan masalah klasik hydration penuh, di mana seluruh halaman harus dimuat ulang oleh JavaScript meski sebagian besar kontennya statis.

Istilah ini dipopulerkan oleh Katie Sylor-Miller dan dikembangkan Jason Miller dari Preact. Analoginya: halaman adalah lautan HTML statis yang tenang, dan setiap widget interaktif adalah pulau kecil yang punya "listrik" JavaScript sendiri. Lautan tidak perlu listrik.

Cara Kerja dan Bedanya dengan SSR Biasa

Berbeda dengan server-side rendering tradisional yang menghidrasi seluruh pohon komponen, island hanya mengaktifkan bagian yang ditandai interaktif. Sisanya tetap HTML murni. Ini menurunkan beban main thread dan memperbaiki metrik INP.

Kenapa Penting untuk Bisnis?

Halaman yang ringan JavaScript cenderung lolos ambang Core Web Vitals lebih mudah, dan skor itu memengaruhi peringkat di pencarian. Dalam beberapa proyek terakhir, saya melihat halaman konten-berat seperti glosarium dan artikel justru paling diuntungkan: 90% isinya statis, jadi memangkas hidrasi penuh terasa langsung pada kecepatan muat.

Untuk situs konten dan landing page bisnis di Indonesia yang sering diakses lewat jaringan seluler, lebih sedikit JavaScript berarti lebih sedikit data yang diunduh dan halaman yang lebih cepat responsif. Referensi konsep ini dapat dibaca pada dokumentasi pola island di patterns.dev.

Pertanyaan Umum

Apakah Island Architecture sama dengan SSG?

Tidak persis. Static site generation menghasilkan HTML statis saat build, sedangkan island mengatur bagian mana yang dihidrasi. Keduanya sering dipakai bersama: HTML di-generate statis, lalu hanya pulau yang diberi JavaScript.

Framework apa yang memakai pola ini?

Astro adalah yang paling dikenal, dengan konsep client directive untuk menandai pulau. Beberapa framework lain juga mengadopsi ide serupa lewat partial hydration.