Kenalan dengan Astro JS

Sebagai developer yang setiap hari di isi framework-framework baru muncul kembali framwork dengan konsep yang cukup membuatku tertarik untuk di bahas yaitu Astro JS, tapi apa yang sebenarnya menarik dari framework tersebut akan kita bahas satu per satu.

Konsep Astro Island (Pulau)

Astro dikenal dengan konsep Islandnya dimana simplenya Astro hanya akan merender / mengambil data yang perlu di tampilkan yang memang saat di butuhkan, jadi Astro sama sekali tidak akan mengirim html dan css sama sekali jika tidak di tampilkan.

Sama seperti kita mengunjungi suatu pulau dimana kita akan di perlihatkan pulau yang kita lihat, kita akan fokus sejenak dengan pulau yang kita kunjungi, sebelum lanjut ke pulau berikutnya.

Kalo begitu sama aja donk seperti lazy load component ?

Berbeda dengan lazy load component, Ingat kan ? AstroJS tidak akan mengirim HTML dan CSS ke client jika tidak di butuhkan sedangkan Lazy Load Component biasanya berbasis SPA (Single Page Application) dimana sudah pasti seluruh bundle html javascript dan css sudah terload di initial lebih dahulu meski belum di tampilkan.

0KB Javascript .

Yaps Astro JS itu punya 0KB Javascript.

Loh.. loh.. gimana gimana ? tadi katanya Astro JS itu framework javascript udah pasti ada javascriptnya donk?

Eeetss. sabar sabar. yang di maksud 0KB javascript itu dimana Astro akan render html dan css ke client dan tidak akan mengirim Javascript sama sekali.

Jadi ga bisa pake Javascript donk ?

Ya engga juga kita masih bisa pakai javascript dengan memberi tahu Astro bahwa komponent tersebut butuh javascript, kita bisa meminta Astro dengan cara mengirim property di componentnya, contohnya

import MyReactComponent from '../components/MyReactComponent.jsx';

<!-- Property client:load ini akan 
memberitahukan astro bahwa kita butuh render Astro dengan javascriptnya segera -->

<MyReactComponent client:load />

<!-- Property client:idle ini akan
memberitahukan Astro bahwa kita butuh javascript tapi tidak harus saat juga
dan lakukan saat semua html css sudah terload -->

<MyReactComponent client:idle /> 

UI Framework

Astro JS memiliki UI Frameworknya sendiri namun kita bisa bebas menggunakan UI Framework apapun yang populer diantaranya Vue, React, Preact, Svelte, Solid, lit, dan dengan plugin integration yang mudah.

https://docs.astro.build/en/core-concepts/framework-components/

Kesimpulan

Astro JS memperioritaskan performa untuk yang fokus untuk content website. mungkin akan cocok jika tidak butuh Single Page Application dan berbasis content blog dan sebagainya.