Belajar Astro - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Di episode 1 kalian sudah tahu mengapa Astro ada dan masalah apa yang dia pecahkan. Sekarang saatnya membuka kap mesin dan melihat cara kerja di balik layar. Memahami arsitektur Astro akan membuat kalian jauh lebih percaya diri saat membangun proyek nyata — kalian tahu kenapa suatu pola bekerja dan kenapa pola lain menghasilkan bundle yang besar.

Inti arsitektur Astro ada empat pilar: compiler yang mengubah sintaks .astro menjadi JavaScript, build pipeline berbasis Vite, model rendering yang memisahkan statis dan server, serta island architecture yang menjaga agar JavaScript hanya dikirim ke bagian yang benar-benar interaktif.

Episode 2 ini membedah keempat pilar tersebut sekaligus struktur proyek yang akan menjadi peta navigasi kalian di seluruh series.

#Cara Kerja di Balik Layar

#Astro Compiler dan Build Pipeline dengan Vite

File .astro ditulis dalam sintaks yang menyerupai HTML dengan tambahan frontmatter. Astro mengubah file ini melalui Astro compiler menjadi dua hal: fungsi render yang menghasilkan HTML, dan — jika diperlukan — komponen client untuk hydration.

Build pipeline dijalankan oleh Vite: Vite mengumpulkan seluruh modul, mengoptimalkan dependency, dan menghasilkan output dist/. Dev server juga ditangani Vite, sehingga edit file langsung terlihat tanpa menunggu build penuh. Ini alur singkatnya:

src/*.astro → Astro compiler → Vite bundler → dist/ (HTML + aset)

Proses npm run build menjalankan seluruh pipeline ini. Keluaran dist/ adalah folder statis yang siap di-upload ke hosting mana pun.

#Page Rendering: Static dan Server

Astro mendukung dua mode utama. Pada static rendering, halaman dirender sekali saat build dan disimpan sebagai file HTML. Pada server rendering, halaman dirender setiap kali ada request. Default Astro adalah static, dan episode 21 akan membahas mode hybrid yang menggabungkan keduanya.

#Island Architecture dan Component Hydration

#Konsep Pulau Interaktif

Island architecture adalah ide bahwa halaman HTML yang besar bisa mengandung beberapa "pulau" interaktif yang dikelilingi lautan HTML statis. Setiap pulau adalah komponen framework yang di-hydrate secara independen — dengan satu file JavaScript kecil per pulau, bukan satu bundle raksasa untuk seluruh halaman.

#Alur Kerja Komponen

Konsep penting yang membedakan Astro dari framework lain:

• Komponen tanpa directive dirender sebagai HTML statis, tanpa JavaScript di browser.
• Komponen dengan directive hydration seperti client:load diberi JavaScript yang dibutuhkan untuk menjalankan interaktivitasnya.

Hydration directive menentukan kapan dan bagaimana pulau dihidupkan — detail lengkapnya ada di episode 7.

Pulau interaktif di tengah HTML statis

---
import GaleriFoto from "../components/GaleriFoto.vue";
---
 
<main>
  <p>Paragraf statis ini tanpa JavaScript sama sekali.</p>
  <GaleriFoto client:visible />
  <p>Konten lain tetap statis, hanya pulau yang di-hydrate.</p>
</main>

Pada kode di atas, <GaleriFoto client:visible /> hanya memuat JavaScript saat elemen tersebut terlihat di layar — sisa halaman tetap ringan.

#Komponen Utama dan Alur Kerja Struktur Proyek

#Peran Direktori Utama

Struktur proyek Astro memiliki aturan yang jelas:

• src/pages: file .astro, .md, atau .mdx di sini menjadi rute halaman.
• src/components: tempat komponen yang dipakai ulang di banyak halaman.
• src/layouts: layout reusable yang membungkus banyak halaman.
• public/: file statis seperti favicon dan gambar yang disalin apa adanya ke output.
• src/content: konten Markdown/MDX beserta schema-nya.

#File-Based Routing

Routing di Astro mengikuti struktur folder. File src/pages/blog/index.astro menjadi /blog, dan file src/pages/blog/[slug].astro menjadi halaman dinamis berdasarkan parameter URL. Tidak ada file router terpisah — cukup letakkan file di folder yang tepat.

#Content Collections dan Pipeline Markdown

Content collections adalah cara Astro mengelola konten dengan type-safety. Setiap collection memiliki schema yang mendefinisikan frontmatter yang diperbolehkan. Saat build, Astro memvalidasi semua konten terhadap schema dan menghasilkan data terstruktur yang siap dikonsumsi halaman — pipeline ini akan kita bedah tuntas di episode 5.

#Integrasi Framework Lain

#Memasang Integrasi Resmi

Astro bisa menampung komponen dari React, Vue, Svelte, dan Solid. Caranya dengan menambahkan integrasi resmi:

npx astro add react

Perintah npx astro add react memasang package, mengedit astro.config.mjs, dan membuat tsconfig.json siap untuk JSX. Setelah itu komponen .tsx bisa langsung dipakai di dalam file .astro.

#Satu Halaman, Banyak Framework

Karena setiap integrasi independen, satu halaman Astro bisa memakai komponen Vue untuk satu pulau dan Svelte untuk pulau lain. Ini fleksibilitas yang tidak dimiliki kebanyakan framework meta lain, dan justru menjadi kekuatan Astro untuk tim lintas teknologi.

#Penutup

Episode 2 membuka arsitektur inti Astro: compiler yang mengubah sintaks .astro, build pipeline berbasis Vite, model rendering statis dan server, island architecture untuk hydration parsial, struktur proyek yang sederhana, serta fleksibilitas integrasi multi-framework.

Inti yang harus dibawa pulang:

• Astro compiler mengubah file .astro menjadi render function dan aset.
• Vite menangani bundling dan dev server dengan HMR.
• Static rendering dibuat di build time; server rendering dibuat per request.
• Island architecture meng-hydrate komponen secara independen.
• src/pages menentukan rute, public menyimpan aset statis.
• Integrasi framework dipasang dengan npx astro add <framework>.

Di episode 3 selanjutnya kita akan memulai proyek Astro secara nyata: membuat proyek dengan npm create astro@latest, memahami struktur file penting, menjalankan dev server, serta konfigurasi dasar TypeScript, ESLint, dan formatting. Siapkan terminal kalian, karena episode ini penuh praktik.