· 2 min read

Becoming Astron #7 — Komponen Astro dan Keajaiban Frontmatter

# astro # tech

Part of the series: Becoming Astron

Setelah tahu cara memulai project, sekarang kita masuk ke “jantung” dari Astro: file .astro.

Kalau kamu datang dari dunia React atau Vue, file ini mungkin terlihat familiar tapi terasa berbeda. Mari kita bedah kenapa file ini spesial.

src/components/Halo.astro
---
// 1. Bagian Script (Frontmatter)
// Kode JavaScript/TypeScript di sini hanya jalan di SERVER.
// Cocok untuk: ambil data, akses database, kelola variabel.
---


<!-- 2. Bagian Template (HTML) -->
<!-- Struktur website kamu ada di sini. -->
<!-- Astro akan menggabungkan logika di atas ke dalam HTML ini. -->

Struktur Komponen Astro: Pemisahan tegas antara Logika (Server) dan Tampilan (HTML).

Struktur Komponen Astro

Satu file .astro biasanya terbagi menjadi dua bagian besar yang dipisahkan oleh “pagar” (code fence):

---
// 1. Bagian Script (Frontmatter)
// Semua kode di sini jalan di SERVER saat build time.
const name = "Astron";
---


<!-- 2. Bagian Template -->
<!-- Ini adalah HTML biasa dengan sedikit superpower -->
<h1>Halo, {name}!</h1>

Keajaiban Frontmatter: Data Fetching Tanpa Drama

Di framework lain, mengambil data dari API seringkali butuh ritual: useEffect, useState, atau fungsi khusus. Di Astro, kamu cukup melakukannya di dalam frontmatter.

src/pages/posts.astro
---
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await response.json();
---


<ul>
  {posts.map(post => <li>{post.title}</li>)}
</ul>

Kenapa ini keren? Karena await bisa langsung dipakai di tingkat atas (top-level). Tidak perlu membungkusnya dalam fungsi async. Semuanya terasa linear dan mudah dibaca.

Siklus Hidup: Hanya Server, Selamanya

Ini adalah mental model paling penting: Kode di dalam frontmatter TIDAK PERNAH dikirim ke browser.

  • Kamu bisa menulis rahasia API (API Keys) di sini dengan aman.
  • Kamu bisa akses database langsung dari sini.
  • console.log di sini akan muncul di terminalmu, bukan di inspect element browser.

Kenapa Ini Membebaskan?

Dengan memindahkan logika ke server (saat build), browser user tidak perlu memproses JavaScript yang berat hanya untuk menampilkan daftar tulisan. User menerima HTML bersih, dan kamu sebagai developer tetap bisa menikmati kemudahan menulis logika modern.

Di tulisan berikutnya, kita akan melihat bagaimana Astro memperlakukan konten (Markdown) sebagai “warga kelas satu”.