skip to content

Berkenalan dengan HTML Framework Bernama Astro

Heh?

Ada yang men-tweet seperti ini:

2015: Masanya JS Framework
2022: Masanya HTML Framework

Entah ini hanya lelucon selingan atau memang kenyataan. Tapi, yang saat ini aku rasakan, sepertinya Astro ini sebagai HTML framework mendapatkan panggungnya di hati para developer frontend. Soalnya, berbeda dengan JS framework yang kalau nggak selesai hydration-nya, nggak tampil isinya.

Kalau di HTML framework, ya yang tampil di browser itu adalah HTML-nya aja. Jadi, kalau nggak perlu JavaScript, ya nggak bakalan tampil JavaScript. Contohnya aja seperti ini:

astro
---
const nama = "Aku";
---
<h1>Halo, {nama}!</h1>

Nanti, ketika di-build, jadinya adalah:

html
<h1>Halo, Aku!</h1>

Udah. Gitu aja. Nggak ada JavaScript-nya sama sekali. Keren banget kan Astro ini?

Terus, kalau mau pakai JavaScript gimana?

Kita bisa menggunakan Svelte, Vue, React, atau JS framework apapun yang kamu inginkan. Misalnya aja seperti ini:

src/pages/index.astro

astro
---
import Komponen from "../components/Komponen.svelte";
---
<h1>Hello World!</h1>
<Komponen client:load />
<p>Ini adalah footer</p>

src/components/Komponen.svelte

svelte
<script>
import { onMount } from "svelte";
let nama = "Aku";
onMount(() => {
nama = "Kamu";
});
</script>
<h2>Halo, {nama}!</h2>

Maka, nanti di browser, akan tampil seperti ini:

html
<h1>Hello World!</h1>
<h2>Halo, Aku!</h2>
<p>Ini adalah footer</p>

Tapi, di bagian Halo, Aku! itu, merupakan komponen Svelte. Jadi, akan terjadi hydration. Artinya, ketika JavaScript-nya sudah siap, maka akan tampil Halo, Kamu!.

Keren banget kan?

Terus, gimana kalau kita ingin berkomunikasi antara satu bagian dengan bagian lainnya? Misalnya aja, kita ingin mengirim data dari header ke sidebar?

Kita bisa pakai nanostores. Simpel banget kan?

Mungkin, ini hanya pengantar tentang Astro. Nanti, kita akan bahas bagaimana cara menggunakan Astro mulai dari menginstallnya hingga membuat website dengan suatu contoh kasus.