Astro Itu Apa Sih?
Kenalan sama Astro, framework web yang bikin website kamu ringan, cepat, dan bebas JS bloat.
Jadi gini ceritanya.
Saya lumayan lama pake Next.js buat berbagai project — project iseng, project kecil, sampai yang agak serius. Udah nyaman sih. SSR-nya solid, dokumentasinya lengkap, komunitasnya gede.
Suatu hari temen yang sering ngajarin saya nanya: “Kamu udah coba Astro belum?”
Astro? Jujur, saya belum pernah denger.
“Framework buat bikin website. Tapi output-nya HTML semua. Nggak ngirim JavaScript kalau nggak perlu.”
Reaksi pertama saya: ragu. Framework modern tapi hasil akhirnya HTML doang? Masa iya?
Tapi karena yang nyaranin ini orangnya jarang salah soal tech, ya udah saya coba.
Begini. Bayangin kamu bikin website pake React. Kamu nulis komponen kayak biasa. Tapi pas di-build, React-nya nggak ikut dikirim ke browser. Yang nyampe ke pengguna cuma HTML. Polos. Bersih.
Nah, itu Astro.
Dia static site generator. Kamu tetep bisa nulis komponen pake React, Vue, Svelte, Solid — terserah. Tapi output akhirnya HTML statis. Nggak ada JavaScript ngegantung yang bikin loading berat.
Bedanya sama framework lain di mana? Biasanya framework frontend ngirim dua hal ke browser: konten + JavaScript yang dibutuhkan buat ngejalanin konten itu. Astro motong bagian kedua. Dia cuma kirim konten.
Lucunya, ini bukan bug. Ini emang sengaja.
Dan efeknya langsung kerasa. Halaman kamu lebih kecil ukurannya karena nggak ada JavaScript framework yang numpuk. Lebih cepet dimuat karena browser cuma perlu baca HTML. Search engine juga langsung bisa baca konten tanpa ngejalanin JavaScript dulu — ini penting banget buat SEO.
Pertanyaan yang wajar.
Framework kayak React atau Next.js punya kebiasaan: begitu halaman masuk browser, semuanya langsung “diaktifkan.” Navbar jadi React. Sidebar jadi React. Footer jadi React. Padahal ketiganya statis. Nggak bakal berubah. Tapi tetep aja ikut kena proses.
Nah, di sinilah Astro ngambil jalan yang lebih cerdas.
Konsepnya disebut Islands Architecture. Idenya simpel: kamu yang nentuin bagian mana yang butuh JavaScript. Sisanya? Biarin aja jadi HTML.
Nih contohnya di halaman blog:
- Navbar — HTML doang
- Konten artikel — HTML doang (ini bagian paling gede)
- Kolom komentar — nah ini baru React, karena emang butuh interaksi
- Tombol like — ini Vue
Dari empat bagian, cuma dua yang “hidup.” Sisanya diam aja. Makanya disebut islands — pulau-pulau kecil interaktivitas di tengah lautan konten yang statis.
Hasilnya? Website kamu tetep cepet karena mayoritas halaman nggak pake JavaScript, tapi bagian yang emang butuh interaksi tetep jalan. Nggak ada kompromi.
Ini salah satu hal yang bikin saya respect sama Astro: dia nggak maksa kamu milih satu.
Mau komponen React? Pasang @astrojs/react. Mau Vue? @astrojs/vue. Svelte? Solid? Preact? Semuanya bisa. Kamu bahkan bisa nyampur — misalnya navbar pake React sementara form search pake Vue, dalam satu project yang sama.
Ini bukan gimmick.
Satu Project, Empat Library. Sumber: SantriKoding .
Contoh kasusnya gini. Kamu udah punya component library di React yang udah teruji. Tapi kamu pengen coba-coba Svelte buat fitur baru. Di tempat lain, kamu mungkin harus migrasi total atau bikin project terpisah. Di Astro? Tinggal taro dua-duanya. Berdampingan.
Nggak ada overhead tambahan juga. Dia nggak nge-bundle semua library jadi satu paket gede — cuma komponen yang beneran kamu pake yang ikut di-build.
Tapi ya jangan kebablasan. Tetep inget prinsip islands tadi. Kalau semua komponen kamu bikin interaktif cuma karena bisa, ya sama aja boong. Pake secukupnya.
Saya nggak bakal bilang Astro cocok buat semua hal. Karena emang nggak.
Kamu mau bikin dashboard admin yang tiap halamannya penuh chart interaktif, tabel yang bisa di-filter, dan form yang saling dependent? Jangan pake Astro. Next.js atau SvelteKit lebih masuk akal buat itu.
Tapi kalau kamu bikin:
Blog pribadi. Portfolio. Dokumentasi library. Landing page. Website majalah. Company profile.
Nah, itu sweet spot-nya.
Intinya: kalau mayoritas halaman kamu isinya konten yang jarang berubah, Astro tuh pilihan yang nyaman banget. Dia emang didesain dari awal buat content-focused website, bukan web app.
Blog ini sendiri saya bikin pake Astro. Dan prosesnya jauh lebih efisien dibanding pengalaman saya sebelumnya pake framework lain buat project sejenis.
Nggak.
Serius.
Kamu tinggal npm create astro@latest, pilih template, dan dalam beberapa menit project udah jalan. Struktur foldernya gampang dipahami. Nggak ada boilerplate aneh yang bikin kamu mikir “ini apaan?”
Nulis konten? Bikin file .md atau .mdx di folder content/. Udah. Dia otomatis jadi halaman. Nggak perlu setup routing manual, nggak perlu nulis kode buat baca file sendiri.
Mau pake Tailwind? npx astro add tailwind. Kelar. Jalan.
Dev server-nya cepet. Kayak nge-refresh HTML biasa — ya karena emang yang dirender HTML. Nggak ada nunggu compile JavaScript dulu.
Terus astro.config.mjs-nya pendek. Kadang cuma 10-20 baris. Bandingin sama next.config.js yang bisa kayak novel.
Reaksi saya pertama setup: “Udah gini doang?” Terus build: “Cepet amat?”
Oh iya, kalau kamu mau lebih cepet lagi, pake Bun: bun create astro@latest, bun run dev, bun run build. Jauh lebih ngebut dibanding npm.
Dan kalau kamu males bikin dari nol, banyak template keren di astro.build/themes. Tinggal pilih, clone, jalan. Blog ini juga pake salah satu theme dari sana.
Karena output-nya HTML semua, SEO-nya udah bagus dari sananya. Search engine langsung bisa baca konten kamu. Nggak perlu nunggu JavaScript dieksekusi dulu — masalah yang sering muncul di SPA.
Astro juga udah nyediain integrasi buat hal-hal yang biasanya bikin pusing:
- Sitemap — auto-generate
- RSS — tinggal plugin
- OG image — thumbnail pas dibagi ke sosmed
- Canonical URL — biar nggak kena duplicate content
- i18n — bikin blog multibahasa tanpa ribet
Semua itu tinggal tambahin plugin atau config dikit doang.
Ada satu hal yang susah dijelasin sebelum kamu nyoba sendiri: Astro itu bikin tenang.
Framework modern sekarang rasanya makin lama makin kompleks. Setup makin panjang. Konsep makin abstrak. Istilah makin banyak — hydration, streaming, edge rendering, partial prerendering. Kamu cuma pengen bikin blog, portfolio, atau landing page, tapi dipaksa ngerti arsitektur yang kompleks.
Astro ngambil jalan sebaliknya.
Filosofinya simpel: “Bikin halaman statis dulu. Kalau ada yang perlu interaktif, baru tambahin.”
Bukan “semua harus jadi aplikasi dari awal.” Bukan “kirim JS dulu, baru render.” Tapi: statis dulu. Konten dulu. Sisanya belakangan.
Dampaknya lebih kerasa ke cara berpikir daripada ke kode. Fokus kamu balik ke konten — apa yang pengen kamu sampaikan — bukan ke arsitektur JavaScript yang muter-muter.
Kalau kamu lagi bikin website yang isinya mostly konten — blog, portfolio, dokumentasi — dan kamu ngerasa framework yang biasa kamu pake terlalu berat buat kebutuhan kamu, coba aja. Nggak ada ruginya.
Fokus balik ke yang penting: konten yang pengen kamu tulis.