Astro

#references #programming #javascript #typescript #frameworks #ssr #deployment #performance

Astro adalah framework web untuk situs berbasis konten seperti blog, dokumentasi, situs pemasaran, portofolio, dan etalase e-commerce. Astro bermula sebagai static site generator, tetapi versi modern juga dapat merender route saat permintaan masuk. Perbedaan utamanya dari framework aplikasi yang berpusat pada browser adalah pendekatan server-first: komponen dirender menjadi HTML, lalu JavaScript sisi klien hanya dikirim untuk bagian yang memang interaktif.

Pada Agustus 2026, rilis terkini yang ditemukan adalah Astro 7.2. Astro 7 memakai Vite 8 dan Rolldown, compiler .astro berbasis Rust, pipeline Markdown dan MDX Sätteri, queued rendering, Advanced Routing, serta route caching. Incremental static builds hadir di 7.2 sebagai fitur eksperimental, jadi perilakunya masih dapat berubah.

Islands architecture

Astro memakai islands architecture untuk memisahkan konten statis dari bagian interaktif atau personal. Sebagian besar halaman tetap berupa HTML biasa. Komponen yang membutuhkan JavaScript menjadi client island dan dihidrasi secara terpisah. Teknik ini juga disebut partial atau selective hydration.

Komponen Astro dan komponen framework UI dirender menjadi HTML tanpa runtime browser secara default. Direktif client:* mengaktifkan hidrasi untuk komponen tertentu. client:load memuat komponen segera, client:idle menunggu browser senggang, client:visible menunggu komponen masuk viewport, client:media mengikuti media query, sedangkan client:only melewati rendering server. Pilihan direktif menentukan kapan JavaScript komponen dikirim dan dijalankan.

Island tidak membuat semua jenis aplikasi otomatis ringan. Komponen interaktif tetap membawa kode komponen dan runtime framework yang diperlukan. Jika sebagian besar halaman membutuhkan state bersama dan hidrasi luas, keuntungan pendekatan islands mengecil. Arsitektur ini paling efektif ketika interaktivitas hanya menempati sebagian kecil halaman.

Astro juga memiliki server islands. Direktif server:defer memisahkan komponen dinamis atau personal dari render utama. Halaman dapat menampilkan fallback lebih dulu, lalu browser meminta HTML island dari endpoint khusus. Pola ini memungkinkan shell dan konten utama diprerender atau dicache lebih agresif tanpa menunggu data seperti avatar pengguna atau status keranjang. Server islands memerlukan adapter dan membawa persoalan operasional seperti serialisasi props, cache request, serta sinkronisasi encryption key pada rolling deployment.

Komponen dan framework UI

Berkas .astro memakai sintaks yang dekat dengan HTML, dengan component script di antara pagar --- untuk logika server. Astro tidak memiliki runtime reaktif di browser untuk komponen .astro; event interaktif dapat dibuat melalui elemen HTML, <script>, Web Components, atau komponen framework UI.

Integrasi resmi tersedia untuk React, Preact, Vue.js, Svelte, SolidJS, dan Alpine.js. Beberapa framework dapat dipakai dalam satu halaman selama komponen-komponen itu dirangkai dari berkas .astro. Namun, setiap island tetap mengikuti aturan framework asalnya. Komponen React tidak dapat langsung mengimpor komponen .astro, dan props untuk komponen terhidrasi harus dapat diserialisasi.

Script biasa di komponen Astro mendapat pemrosesan TypeScript, bundling import, type="module", deduplication, dan inlining untuk script kecil. Interaktivitas sederhana karena itu tidak selalu memerlukan React atau framework UI lain.

Routing dan rendering

Astro memakai file-based routing dari direktori src/pages. Berkas .astro, .md, dan .mdx menjadi route sesuai nama dan lokasinya. Segmen dinamis memakai [param], sedangkan [...path] menangkap beberapa tingkat URL. Dalam static output, route dinamis harus menyediakan getStaticPaths() agar Astro mengetahui halaman yang dibangun.

Prerendering statis adalah perilaku default. Hasil build dapat dilayani sebagai berkas dari CDN atau web server sederhana. Route tertentu dapat memilih on-demand rendering dengan export const prerender = false setelah proyek memasang adapter. Untuk aplikasi yang sebagian besar dinamis, konfigurasi output: 'server' membalik default sehingga route dirender saat diminta, sementara halaman tertentu masih dapat diprerender.

On-demand rendering mendukung cookie, respons personal, endpoint API, dan HTML streaming. Kemampuan runtime bergantung pada adapter untuk Node.js, Cloudflare, Netlify, Vercel, atau target lain. Perbedaan adapter perlu diperiksa karena API platform dan fitur deployment tidak selalu sama.

Astro 7 menambahkan Advanced Routing melalui src/fetch.ts. Entry point ini dapat menjalankan pipeline Astro lengkap atau menyusun handler untuk actions, middleware, pages, dan i18n. Integrasi dengan Hono juga tersedia. Fitur ini memperluas Astro melampaui static site generator sederhana, tetapi menambah area konfigurasi yang tidak diperlukan oleh situs statis biasa.

Konten Markdown dan Content Collections

Astro mendukung GitHub Flavored Markdown, frontmatter YAML atau TOML, dan MDX melalui integrasi. Berkas Markdown di src/pages dapat langsung menjadi halaman. Untuk kumpulan konten terstruktur, Content Collections memberi loader, schema, validasi, autocomplete, dan tipe TypeScript.

Build-time collections cocok untuk konten yang relatif stabil dan dapat dioptimalkan saat build. Live content collections mengambil data saat permintaan masuk untuk CMS, API, database, stok, atau data pengguna yang sering berubah. Pilihan live menghindari rebuild, tetapi data diambil pada setiap request kecuali aplikasi menambahkan cache. Live collections juga tidak memiliki dukungan MDX dan image optimization yang sama dengan build-time collections.

Astro 7 memakai Sätteri sebagai processor Markdown dan MDX default. Pipeline Rust ini menggantikan Unified sebagai default, tetapi Unified tetap tersedia untuk proyek yang bergantung pada ekosistem plugin remark atau rehype.

Aset dan navigasi

Komponen Image dan Picture dapat mengoptimalkan gambar lokal atau remote yang diizinkan, menghasilkan beberapa format atau ukuran, dan membuat gambar responsif. Aset di src dapat diproses saat build, sedangkan berkas di public disalin tanpa optimasi. Native <img> tetap dapat dipakai ketika pemrosesan Astro tidak dibutuhkan.

Navigasi default Astro adalah perpindahan dokumen standar melalui elemen <a>. View Transitions browser dapat menambahkan animasi tanpa mengubah model multi-page application. Komponen ClientRouter bersifat opsional untuk client-side routing, state persisten, dan fitur transisi yang lebih luas. Memakainya berarti script dan state tertentu perlu diinisialisasi ulang setelah navigasi.

Deployment dan batas penggunaan

Situs statis Astro menghasilkan output ke dist dan dapat di-host di layanan static hosting. On-demand rendering, server islands, sessions, dan fitur server membutuhkan adapter yang sesuai. Dokumentasi menyediakan panduan untuk banyak penyedia, tetapi dukungan adapter resmi berfokus pada Node.js, Cloudflare, Netlify, dan Vercel.

Astro tepat untuk proyek dengan porsi konten besar dan interaktivitas lokal: blog, dokumentasi, landing page, situs pemasaran, katalog, media, serta storefront yang sebagian besar dapat dicache. Dukungan beberapa framework juga berguna saat tim ingin memakai komponen yang sudah ada tanpa mengubah seluruh situs menjadi SPA.

Astro kurang cocok ketika hampir seluruh layar merupakan aplikasi interaktif dengan state klien yang saling terhubung, navigasi client-only, dan komunikasi intensif antarkomponen. Proyek seperti itu dapat lebih sederhana dengan Vite, Next.js, atau TanStack Start, tergantung kebutuhan routing dan server. Klaim "zero JavaScript by default" menjelaskan baseline Astro, bukan jaminan bahwa aplikasi akhir bebas JavaScript atau selalu lebih cepat.

Lihat juga

Sumber

Enter your search text in the box above

Select a result to preview