Belajar Astro - Sejarah, Latar Belakang & Mengapa Membutuhkan Astro

#Pendahuluan

Sebelum memahami cara kerja Astro, kalian perlu tahu dari mana dia berasal dan masalah apa yang coba dia selesaikan. Di episode 0 kalian sudah berhasil membuat proyek pertama. Sekarang saatnya mundur selangkah dan melihat gambaran besarnya: bagaimana Astro lahir, bagaimana dia berevolusi, dan kenapa dia dibutuhkan di tengah banyaknya framework JavaScript.

Cerita Astro dimulai dari sebuah ironi. Framework modern seperti React, Vue, dan Svelte menjanjikan pengalaman pengguna yang kaya, tetapi hasilnya sering berupa halaman yang mengirim ratusan kilobyte JavaScript hanya untuk menampilkan artikel. Padahal mayoritas situs di web tidak butuh interaktivitas kompleks — mereka butuh konten yang cepat sampai ke pengguna.

Episode 1 ini membedah sejarah Astro, posisinya di ekosistem Jamstack dan generasi framework meta, serta masalah-masalah yang dia pecahkan dengan pendekatan yang berbeda dari Gatsby dan Next.js.

#Sejarah dan Evolusi Astro

#Lahirnya Astro

Astro pertama kali diumumkan pada tahun 2021 oleh tim di belakang Snowpack — sebuah build tool yang populer sebelum Vite menguasai pasar. Nama Astro diambil dari semangat membangun sesuatu yang cepat dan ringan, seperti astronomi yang mengejar cahaya paling awal. Visinya sederhana: framework untuk content-focused websites yang mengirim lebih sedikit JavaScript ke browser.

#Perkembangan dari Versi Awal ke Rilis Stabil

Versi pertama Astro masih eksperimental, dipakai bersama Snowpack sebagai bundler. Setelah Snowpack dihentikan, Astro berpindah total ke Vite sebagai build tooling — keputusan yang tetap dipertahankan hingga sekarang karena kecepatan dev server-nya.

Dari sana evolusi berjalan cepat:

• Astro 2 memperkenalkan content collections resmi dan dukungan Markdown/MDX yang matang.
• Astro 3 membawa dukungan view transitions dan peningkatan performa build.
• Astro 4 merapikan API content layer dan memperkenalkan pola astro:assets yang stabil.
• Astro 5 memperkenalkan Content Layer API, legacy fallback untuk kenyamanan migrasi, dan memperkuat dukungan server-side rendering.

Setiap rilis menegaskan satu hal yang sama: konten tetap menjadi pusat perhatian, dan JavaScript hanya dikirim ketika benar-benar dibutuhkan.

#Perbandingan dengan Jamstack, Gatsby, dan Next.js

#Astro dan Gerakan Jamstack

Astro berdiri di atas semangat Jamstack — JavaScript, API, Markup — yang mempopulerkan ide mem-build situs menjadi file statis. Bedanya, Astro menambahkan komponen framework sebagai tamu, bukan tuan rumah. Kalian bisa menulis halaman dengan .astro murni dan menyelipkan komponen React atau Svelte hanya di bagian yang interaktif.

#Astro vs Gatsby

Gatsby adalah pelopor static site generation berbasis React. Kekuatannya jelas, tapi hampir semua konten harus dirender melalui React, sehingga bundle JavaScript cenderung besar. Astro menyelesaikan masalah yang sama tanpa memaksa seluruh halaman memakai satu framework — dan hasil build-nya nyaris tanpa JavaScript untuk situs yang statis.

#Astro vs Next.js

Next.js adalah raja aplikasi web full-stack dengan server-side rendering dan banyak kemampuan dinamis. Astro tidak mencoba mengalahkannya di arena itu. Astro unggul untuk situs content-heavy: blog, dokumentasi, marketing pages. Ketika kalian butuh SSR penuh, Astro punya adapter dan hybrid rendering — episode 21 akan membahasnya. Perbandingan kunci:

React SPA → Next.js → Astro hybrid → Astro static → HTML murni

Semakin ke kanan, semakin sedikit JavaScript yang dikirim ke browser.

Ada satu perbedaan lain yang patut dicatat: Next.js dan Gatsby adalah framework berbasis React, sehingga tim yang memakainya terikat pada ekosistem React. Astro tidak memiliki ikatan semacam itu — kalian bebas menulis komponen dengan framework apa pun, atau bahkan tanpa framework sama sekali.

#Masalah yang Diselesaikan Astro

#Zero JavaScript Default dan Partial Hydration

Pendekatan utama Astro adalah zero JavaScript by default. Saat build, semua komponen dirender menjadi HTML statis. JavaScript framework tidak dikirim ke browser kecuali kalian secara eksplisit meminta hydration. Inilah yang disebut partial hydration — hanya "pulau" interaktif yang dihidupkan.

#Content-First Architecture dan Build-Time Rendering

Arsitektur Astro menempatkan konten sebagai warga kelas satu. Markdown, MDX, JSON, hingga API eksternal bisa dibaca di build time dan disusun menjadi halaman statis. Karena sebagian besar halaman dirender di build time, waktu muat di browser sangat cepat dan biaya server rendah.

#Kinerja dan Multi-Framework

Dengan mengurangi JavaScript, Astro mendapatkan performa tinggi secara default. Ditambah fleksibilitas multi-framework — React, Vue, Svelte, Solid, Preact — tim bisa memakai framework terbaik untuk bagian yang berbeda tanpa menulis ulang semuanya. Contoh representasi singkat di sebuah halaman Astro:

Menggabungkan framework berbeda

---
import ArtikelSvelte from "../components/Artikel.svelte";
import KomentarReact from "../components/Komentar.tsx";
---
 
<h1>Judul Artikel</h1>
<ArtikelSvelte />
<KomentarReact client:load />

Pada kode di atas, client:load pada komponen React adalah penanda bahwa hanya bagian itu yang akan di-hydrate — bagian lain tetap HTML murni.

#Mengapa Kalian Membutuhkan Astro

#Waktu yang Tepat untuk Memilih Astro

Kalian membutuhkan Astro ketika bangunan utama situs adalah konten: tulisan yang sering diperbarui, dokumentasi produk, portofolio, hingga landing page kampanye. Kalian juga membutuhkan Astro ketika kecepatan adalah prioritas nomor satu dan tim ingin menghindari kompleksitas runtime JavaScript.

#Kapan Lebih Baik Memakai Framework Lain

Sebaliknya, jika aplikasi kalian adalah dashboard real-time, aplikasi SaaS yang penuh state, atau editor online, maka framework seperti Next.js, React, atau SvelteKit lebih tepat. Astro memang hebat, tetapi bukan jawaban untuk semua masalah — memahami batasannya adalah bagian dari skill engineer.

#Penutup

Episode 1 menempatkan Astro pada peta ekosistem web development: lahir dari semangat content-focused sites, berevolusi bersama Vite dari versi eksperimental hingga rilis stabil, dan berdiri di perbandingan yang jelas dengan Jamstack, Gatsby, dan Next.js.

Inti yang harus dibawa pulang:

• Astro lahir tahun 2021 untuk membangun content-focused websites yang cepat.
• Astro berpindah dari Snowpack ke Vite sebagai build tooling.
• Berbeda dari Gatsby, Astro tidak memaksa satu framework untuk semua konten.
• Berbeda dari Next.js, Astro fokus pada situs konten, bukan aplikasi full-stack.
• Zero JavaScript default dan partial hydration adalah keunggulan utama.
• Pilih Astro untuk situs konten; pilih framework lain untuk aplikasi real-time.

Di episode 2 selanjutnya kita akan membahas konsep dasar dan arsitektur utama Astro — bagaimana compiler bekerja, alur build dengan Vite, island architecture, struktur proyek, file-based routing, dan integrasi framework lain. Ini adalah fondasi yang akan dipakai di seluruh series.