Arsitektur Islands: Hidrasi Selektif

Arsitektur Pulau, yang dicetuskan oleh Jason Miller pada 2020, memperlakukan halaman web sebagai HTML yang sebagian besar statis dengan "pulau" interaktivitas yang terisolasi dan disisipkan di dalamnya. Lautan HTML statis dikirim ke peramban apa adanya. Hanya pulau interaktif yang mengunduh dan menjalankan JavaScript, sehingga muatan JavaScript sebanding dengan interaktivitas sebenarnya.

Setiap pulau adalah komponen yang dihidrasi secara independen. Server merender HTML awal pulau bersama bagian halaman lainnya. Ketika JavaScript pulau dimuat, JavaScript tersebut hanya menghidrasi subpohon komponen itu. HTML di sekitar pulau tidak pernah disentuh oleh JavaScript — HTML tersebut benar-benar statis.

Pada halaman kiriman blog dengan Arsitektur Pulau, muatan JavaScript mungkin hanya 5kb untuk satu pulau tombol suka. Halaman yang sama jika dibuat sebagai SPA React mungkin mengirimkan lebih dari 200kb JavaScript untuk menghidrasi seluruh halaman. Pendekatan pulau membuat muatan sebanding dengan interaktivitas, bukan ukuran halaman.

Astro, kerangka kerja Arsitektur Pulau terkemuka, mendukung pulau yang dibuat dengan kerangka kerja berbeda pada halaman yang sama. Anda dapat memiliki pulau React di sebelah pulau Vue, lalu pulau JavaScript murni di sebelahnya. Setiap pulau dibundel secara independen, sehingga pengguna hanya mengunduh kode kerangka kerja yang digunakan oleh pulau yang terlihat.

Direktif client:load menghidrasi pulau segera saat halaman dimuat. Gunakan direktif ini untuk pulau yang langsung terlihat dan interaktif, seperti menu navigasi atau bagian utama dengan kolom masukan pencarian. Ini adalah strategi hidrasi dengan prioritas tertinggi.

Direktif client:idle menunggu sampai utas utama peramban senggang (setelah konten penting dimuat) sebelum menghidrasi pulau. Direktif ini ideal untuk widget di bawah tampilan awal atau interaksi sekunder yang tidak segera diperlukan, seperti bilah berbagi sosial.

Direktif client:visible menggunakan Pengamat Persimpangan untuk menghidrasi pulau hanya ketika pulau tersebut bergulir masuk ke area pandang. Direktif ini ideal untuk pulau yang berada jauh di halaman — bagian komentar atau karusel produk terkait — yang mungkin tidak pernah dicapai oleh sebagian besar pengguna. JavaScript bahkan belum dimuat sampai diperlukan.

Direktif client:only sepenuhnya melewati perenderan sisi server dan hanya merender pulau di peramban. Direktif ini diperlukan untuk komponen yang menggunakan API khusus peramban (window, document) atau yang bergantung pada status sisi klien saat dipasang. Konsekuensinya adalah tidak ada HTML yang dirender server untuk pulau tersebut.

Arsitektur Pulau mengatasi masalah hidrasi penuh dengan memastikan JavaScript hanya dimuat dan dijalankan untuk komponen yang benar-benar interaktif. Kiriman blog dengan tombol suka hanya menghidrasi pulau tombol suka — teks artikel sepanjang 1.200 kata, tajuk, dan kaki halaman tidak menghasilkan eksekusi JavaScript sama sekali di klien.

Setiap pulau memiliki statusnya sendiri yang terisolasi. Pulau tidak dapat berbagi status React secara langsung karena pulau-pulau tersebut merupakan pohon React yang terpisah. Ini memang dirancang demikian: jika dua komponen perlu berbagi status, keduanya sebaiknya digabungkan menjadi satu pulau. Komunikasi antar-pulau menggunakan parameter URL, peristiwa DOM, atau pustaka status ringan.

Situs yang bermigrasi dari SPA React ke Arsitektur Pulau (seperti situs dokumentasi Astro) melaporkan peningkatan dramatis: muatan JavaScript berkurang 70–90%, TTI meningkat 2–4 detik pada perangkat seluler, dan nilai performa Lighthouse melonjak dari 60-an menjadi 90-an atau lebih. Peningkatan ini paling terasa pada halaman yang kaya konten.

Direktif hidrasi Astro manakah yang hanya menghidrasi komponen ketika komponen tersebut menggulir masuk ke area pandang?

Arsitektur Pulau mempertahankan sebagian besar halaman sebagai HTML statis dan hanya menghidrasi komponen interaktif yang terisolasi. Astro menyediakan direktif hidrasi: client:load (segera), client:idle (setelah tidak ada aktivitas), client:visible (saat menggulir), dan client:only (render khusus klien). Setiap pulau dihidrasi secara independen, sehingga jumlah JavaScript sebanding dengan tingkat interaktivitas, bukan ukuran halaman.