Optimasi Performa Website dengan Astro Island Architecture: Kirim Less JavaScript

Masalah JavaScript yang Terlalu Banyak

Mayoritas framework frontend modern mengirimkan JavaScript ke browser dalam jumlah besar. Setiap komponen, meskipun hanya menampilkan teks statis, seringkali membawa runtime framework yang tidak perlu. Akibatnya, browser harus mengunduh, parse, dan mengeksekusi JavaScript sebelum halaman bisa menampilkan konten — meskipun konten tersebut sebenarnya tidak membutuhkan interaktivitas.

Angka dari HTTP Archive menunjukkan bahwa rata-rata halaman web mengirimkan lebih dari 500 KB JavaScript yang terkompresi. Ketika di-decompress dan dieksekusi, beban CPU pada perangkat mobile menjadi sangat besar. Astro hadir dengan pendekatan berbeda: mengirimkan nol JavaScript secara default, dan hanya menambahkan JavaScript pada komponen yang benar-benar membutuhkan interaktivitas.

Apa Itu Island Architecture?

Island Architecture adalah pola di mana halaman web dirender sepenuhnya di server sebagai HTML statis, dengan "pulau" interaktif kecil yang dihidrasi secara terpisah di client. Konsep ini berlawanan dengan pendekatan SPA (Single Page Application) yang mengirimkan JavaScript bundle besar untuk menghidrasi seluruh halaman sekaligus.

Dalam Astro, setiap komponen UI yang membutuhkan interaktivitas menjadi sebuah "island" — potongan JavaScript terisolasi yang hanya berisi kode yang diperlukan untuk komponen tersebut. Komponen statis seperti header, footer, dan teks tidak mengirimkan JavaScript sama sekali. Hasilnya, halaman jauh lebih ringan dan cepat karena browser hanya memproses bagian yang memang perlu berjalan di client.

Cara Kerja client: Directive di Astro

Astro menggunakan client: directive untuk menandai komponen mana yang perlu dihidrasi di browser. Directive ini menentukan kapan dan bagaimana JavaScript dimuat.

---
import InteractiveCounter from '../components/Counter.jsx';
import StaticHeader from '../components/Header.astro';
import NewsletterForm from '../components/Newsletter.jsx';
---

<StaticHeader />
<InteractiveCounter client:load />
<NewsletterForm client:idle />

Tiga directive yang paling sering digunakan:

• client:load — menghidrasi komponen segera setelah halaman selesai dimuat. Cocok untuk komponen yang langsung terlihat dan interaktif, seperti navigasi atau form utama.
• client:idle — menghidrasi komponen saat browser sedang idle (menggunakan requestIdleCallback). Ideal untuk komponen yang tidak terlihat langsung atau tidak membutuhkan interaksi segera, seperti newsletter form di bagian bawah halaman.

• client:visible — menghidrasi komponen hanya ketika muncul di viewport (menggunakan IntersectionObserver). Pilihan tepat untuk komponen yang berada di bawah fold, seperti carousel atau komentar yang perlu di-scroll terlebih dahulu.

---
import ImageCarousel from '../components/Carousel.jsx';
import SearchBar from '../components/Search.jsx';
import CommentSection from '../components/Comments.jsx';
---

<SearchBar client:load />
<ImageCarousel client:visible />
<CommentSection client:idle />

Pemilihan directive yang tepat akan memastikan JavaScript hanya dimuat ketika benar-benar dibutuhkan. Komponen di atas fold yang langsung digunakan pengguna membutuhkan client:load, sedangkan komponen di bawah fold bisa ditunda dengan client:visible atau client:idle.

Integrasi dengan Beberapa Framework

Keunggulan unik Astro adalah kemampuan menggunakan komponen dari berbagai framework dalam satu halaman yang sama. Karena setiap island terisolasi, React, Svelte, dan Vue bisa berdampingan tanpa konflik runtime.

---
import ReactCounter from '../components/ReactCounter.jsx';
import SvelteToggle from '../components/SvelteToggle.svelte';
import VueModal from '../components/VueModal.vue';
---

<ReactCounter client:load />
<SvelteToggle client:idle />
<VueModal client:visible />

Setiap framework hanya mengirimkan runtime yang dibutuhkan oleh komponen tersebut. Svelte, yang dikenal dengan bundle size kecil, hanya mengirimkan beberapa kilobyte. React mengirimkan runtime yang lebih besar tetapi tetap terisolasi di island-nya sendiri — tidak mencemari komponen lain. Pendekatan ini memungkinkan migrasi bertahap: tim bisa mulai menggunakan Astro untuk halaman baru sambil mempertahankan komponen lama dari framework yang sudah ada.

Mengukur Dampak Performa

Untuk melihat dampak Island Architecture secara konkret, kita bisa membandingkan bundle size antara halaman Astro dan halaman SPA tradisional. Astro menyediakan perintah bawaan untuk menampilkan statistik bundle.

npm run build 2>&1 | grep -i "astro"

Output:

 ✓ built in 1.23s
 ∟ dist/client/Counter.4f2a1b.js   2.3 kB
 ∟ dist/client/Toggle.7e3c2d.js     0.8 kB
 ∟ Total island scripts:            3.1 kB
 ∟ Total page JS:                   3.1 kB (0 kB framework runtime)

Angka-angka ini menunjukkan bahwa hanya 3.1 kB JavaScript yang dikirim ke browser — jauh lebih rendah dibandingkan halaman React biasa yang bisa mencapai 40-100 kB terkompresi untuk runtime saja. Halaman Astro tanpa island interaktif mengirimkan 0 kB JavaScript, karena seluruh konten dirender sebagai HTML statis.

Strategi Optimasi Lanjutan

Selain client: directive, Astro menyediakan beberapa fitur untuk optimasi performa lebih lanjut. client:only berguna ketika komponen tidak bisa dirender di server karena bergantung pada browser API seperti window atau document. Directive ini melewati server rendering dan langsung menghidrasi di client.

---
import BrowserOnlyChart from '../components/Chart.jsx';
---

<BrowserOnlyChart client:only="react" />

Penggunaan client:only harus selektif karena komponen ini tidak memiliki HTML statis sebagai fallback. Search engine crawler dan pengguna dengan JavaScript disabled tidak akan melihat konten dari komponen client:only. Gunakan directive ini hanya untuk komponen yang memang membutuhkan browser API dan tidak relevan untuk SEO.

Kombinasi Island Architecture dengan Astro View Transitions memberikan pengalaman navigasi yang mulus tanpa reload penuh, sembari tetap menjaga bundle size tetap kecil. Setiap transisi hanya memuat island yang berubah, bukan seluruh halaman.

Ingin mempelajari web development modern secara praktis? Kunjungi kursus dan bootcamp di Rumah Coding untuk membangun proyek nyata dengan teknologi terkini dan mendapatkan guidance dari instruktur berpengalaman.