skip to content

Cara Partial Component Saling Berkomunikasi

Kalau full hydration kan mudah berkomunikasi antarkomponen. Lalu, bagaimana kalau partial hydration?

Ada dua jenis hydration; full hydration dan partial hydration. Full hydration digunakan pada framework JavaScript seperti Vue, React, dan Svelte. Kalau partial hudration digunakan oleh Iles dan Astro.

Apa kelebihan dan kekurangan di antara keduanya?

Kalau full hydration, sangat cocok digunakan untuk membangun aplikasi berbasis website. Sedangkan, kalau partial hydration, cocok untuk website berbasis konten seperti blog.

Kenapa kok cocok untuk konten? Itu karena pada partial hydration, yang diutamakan adalah HTML. Jadi, kalau misalnya menggunakan komponen-komponen pada Astro maupun Iles, itu akan dicompile menjadi elemen HTML. Untuk kode-kode yang memang kita perlu hydration (misal, menambahkan Svelte/Vue/React), maka hydration itu diletakkan di lokasi yang diinginkan aja. Misalnya di header dan di sidebar. Maka, di bagian lain adalah murni HTML.

Lalu, kita dihadapkan pada kondisi harusnya terjadi komunikasi state antara header dan sidebar. Bagaimana cara melakukannya?

Jadi, kita akan memanfaatkan event listener storage.

Berikut ini adalah contoh simpelnya:

Bagian setter:

javascript
localStorage.data = "Hello World"
dispatchEvent(new Event("storage"))

Bagian getter:

javascript
addEventListener("storage", x => {
if (x.key == "data"){
console.log(localStorage.data)
}
})

Jadi, dengan memanfaatkan event listener storage, kita bisa membuat state antarkomponen itu saling berinteraksi.

Catatan

Kurasa tutorial ini nggak recommended karena dari Astro sendiri udah merekomendasikan Nano Stores yang menurutku lebih powerful. Ini linknya: https://docs.astro.build/en/core-concepts/sharing-state/.