Menu docs ＋

Catatan Belajar · · 3 menit baca

Belajar Astro: situs cepat dengan nol JavaScript default

Tutorial Astro dari instalasi: halaman .astro, komponen + scoped style, islands architecture (client:load vs client:visible), dan content collections untuk blog markdown.

AstroIslandsMarkdown

Astro adalah framework untuk situs yang kontennya lebih banyak daripada interaksinya — landing page, blog, dokumentasi, company profile. Prinsipnya radikal: nol JavaScript di browser secara default, dan kamu “menyalakan” interaktivitas hanya di komponen yang membutuhkannya (islands architecture).

1. Instalasi

Prasyarat: Node.js 20+.

npm create astro@latest situs-saya
# pilih template "Empty" untuk belajar dari nol
cd situs-saya
npm run dev          # buka http://localhost:4321

2. Halaman = file .astro

Setiap file di src/pages/ otomatis jadi route (index.astro → /, tentang.astro → /tentang):

---
// Bagian antara pagar ini berjalan DI SERVER saat build — tidak pernah sampai ke browser.
const produk = await fetch("https://api.example.com/produk").then(r => r.json());
const judul = "Toko Saya";
---
<html lang="id">
  <body>
    <h1>{judul}</h1>
    <ul>
      {produk.map(p => <li>{p.nama} — Rp {p.harga.toLocaleString("id-ID")}</li>)}
    </ul>
  </body>
</html>

Sintaksnya seperti JSX, tapi hasil akhirnya HTML murni — fetch di atas terjadi saat build, bukan di browser pengunjung.

3. Komponen & props

---
// src/components/Kartu.astro
const { judul, harga } = Astro.props;
---
<article class="kartu">
  <h3>{judul}</h3>
  <p>Rp {harga.toLocaleString("id-ID")}</p>
</article>

<style>
  /* scoped otomatis — tidak bocor ke komponen lain */
  .kartu { border: 1px solid #e4e4e7; padding: 1rem; }
</style>

---
import Kartu from "../components/Kartu.astro";
---
<Kartu judul="Kopi Gayo" harga={85000} />

4. Islands: interaktif hanya di tempat yang perlu

Butuh komponen React/Vue/Svelte yang benar-benar interaktif? Pasang sebagai “pulau”:

npx astro add react

---
import Keranjang from "../components/Keranjang.jsx";
---
<h1>Halaman ini 100% HTML statis...</h1>
<Keranjang client:load />   <!-- ...kecuali pulau yang satu ini -->

Direktif client:* menentukan kapan JavaScript-nya dimuat:

  • client:load — segera saat halaman dibuka
  • client:visible — baru saat komponen masuk viewport (paling sering kupakai)
  • client:idle — saat browser senggang

Tanpa direktif itu, komponen React pun dirender jadi HTML statis — nol JS terkirim.

5. Konten markdown terkelola (content collections)

Simpan artikel di src/content/blog/*.md, definisikan skemanya dengan Zod di src/content.config.ts, dan Astro memvalidasi frontmatter setiap artikel saat build — judul lupa diisi = build gagal, bukan halaman rusak diam-diam.

Tips dari pengalaman

  • Astro menang di kasus yang sama dengan pendekatan situs ini (Hono SSR + HTMX): konten dulu, JavaScript belakangan. Ukur dengan Lighthouse dan bandingkan sendiri dengan SPA.
  • Mulai dari client:visible, bukan client:load — sebagian besar interaktivitas ada di bawah lipatan layar.
  • Kalau semua halamanmu butuh data real-time per request, Astro mode server (SSR adapter) bisa, tapi pertimbangkan apakah framework lain lebih cocok — kekuatan utama Astro tetap konten statis yang cepat.

Mau fitur seperti ini dibangun untuk bisnismu?

Mulai projectDocs lainnya