Astro adalah kembalinya ke dasar-dasar web

"Astro adalah framework terbaik untuk developer"

• Astro adalah framework web generasi baru yang dioptimalkan untuk situs web berfokus konten, dengan kebijakan Zero JavaScript secara default, performa unggul, dan pengalaman pengembangan yang sederhana
• Dengan pendekatan unik bernama Island Architecture, JavaScript hanya diterapkan pada bagian yang diperlukan, sementara sisanya diproses sebagai HTML statis yang cepat
• Situs Astro menunjukkan kecepatan muat lebih dari 40% lebih cepat dibanding pendekatan berbasis React tradisional, sehingga memberi manfaat nyata pada SEO, pengalaman pengguna, dan tingkat konversi
• Berbeda dari framework lain, logika data dan komponen frontend dipisahkan dengan jelas, serta bisa dipakai bersama berbagai framework seperti React dan Vue
• Namun, untuk kasus yang memerlukan SPA, manajemen state yang kompleks, atau routing skala besar, framework yang sudah mapan seperti Next.js bisa jadi lebih cocok

---

Apa itu Astro

• Astro adalah framework web yang muncul pada 2021 dan dirancang dengan fokus pada situs berpusat pada konten, berbeda dari framework JS lama yang ditujukan untuk aplikasi kompleks
• Filosofi dasarnya adalah "content first, server first, Zero JavaScript sebagai default", dan keunggulannya juga terletak pada tooling yang intuitif dan mudah digunakan

Island Architecture

• Astro memperkenalkan konsep "Island Architecture", sehingga JavaScript tidak diterapkan ke seluruh halaman, melainkan hanya ke bagian tertentu yang memang perlu
• Halaman seperti posting blog yang sebagian besar berisi teks dirender hanya dengan HTML, dan JS dimuat hanya untuk bagian interaktif seperti komentar atau carousel
• Hasilnya, halaman menjadi sangat cepat dan ringan

Performa dan dampak nyata

• Situs berbasis Astro mencatat waktu muat lebih dari 40% lebih cepat dibanding framework React tradisional
• Peningkatan performa ini berdampak pada peringkat mesin pencari, kepuasan pengguna, dan tingkat konversi
• Pada perangkat lambat dan jaringan berkecepatan rendah, perbedaan kecepatannya terasa jauh lebih signifikan

Pengalaman developer (Developer Experience)

• Setup proyek sederhana, dan asisten setup ramah bernama “Houston” akan memandu prosesnya
• Komponen Astro mendukung logika yang hanya berjalan saat build time seperti pengambilan data dan pemanggilan API
• Tanpa perlu terlalu memikirkan manajemen state yang rumit, lifecycle, atau hooks, developer bisa memanfaatkan JS sisi klien hanya saat benar-benar dibutuhkan

Kompatibilitas dengan berbagai framework

• Framework utama seperti React dan Vue bisa digunakan bebas bersama Astro
• Contoh: dashboard admin memakai React, visualisasi data memakai Vue, dan sisanya dibangun dengan Astro

Fitur praktis yang benar-benar berguna

• Markdown bisa diimpor langsung seperti komponen
• Mendukung pipeline build modern seperti TypeScript, Sass, optimasi gambar, dan hot module replace
• Bisa memilih static site/SSR/rendering campuran sesuai kebutuhan proyek

Area di mana Astro paling menonjol

• Memberikan performa luar biasa pada situs berfokus konten seperti situs marketing, blog, katalog e-commerce, dan portofolio
• Ideal untuk lingkungan yang tidak memerlukan manajemen state sisi klien yang kompleks

Trade-off

• Untuk proyek yang menuntut SPA, routing kompleks, atau berbagi state antar komponen, framework lain seperti Next.js bisa lebih sesuai
• Ukuran ekosistemnya masih relatif kecil, dan routing berbasis file bisa terasa terbatas pada proyek besar

Cara memulai dengan cepat

• npm create astro@latest my-site
• Jika perlu, tambahkan framework dengan npx astro add react dan sejenisnya
• Tambahkan halaman di src/pages/ dan komponen di src/components/, lalu mulai pengembangan

Makna Astro

• Di tengah framework JS modern yang makin kompleks, Astro mengajak kembali ke dasar-dasar web—pengalaman berbasis konten yang cepat dan mudah diakses—tanpa mengorbankan kenyamanan developer
• Filosofi desainnya, yaitu "situs cepat sebagai default, interaktivitas hanya ditambahkan saat perlu, dan bebas memakai framework yang diinginkan", sangat menarik bagi developer
• Dari blog hingga e-commerce, Astro layak sangat direkomendasikan untuk proyek yang berfokus pada konten

[GN⁺]

Komentar Hacker News

• Framework web tradisional selalu melakukan “hydration” seluruh halaman dengan JavaScript; misalnya, bahkan jika sebuah posting blog sederhana hanya punya satu widget interaktif, seluruh halaman tetap diproses dengan JavaScript. Sebaliknya, Astro menggunakan HTML statis secara default, lalu hanya bagian yang perlu saja yang dijalankan sebagai “JavaScript islands”. Dulu pendekatan seperti ini disebut “progressive enhancement” atau sekadar “halaman web”, dan inilah standar saat membuat situs web. Setelah itu SPA muncul dan progressive enhancement makin jarang dipakai. Sekarang disebut “JavaScript islands”, tapi pada akhirnya ini hanyalah kembali ke cara lama. Untuk para pengembang web pemula yang tertarik, saya ingin merekomendasikan konsep progressive enhancement

  • Sering kali orang mendengar penjelasan fitur dari tool baru lalu mengira itu sama saja dengan hal yang dulu sudah kita lakukan. Namun nilai nyata Astro adalah ia bisa terintegrasi dengan berbagai framework JavaScript dan membiarkan hanya subtree HTML tertentu diproses secara terpisah. Pada saat itu, state awal dirender sebagai string lalu di-hydrate di sisi klien dengan data yang sudah diambil sebelumnya. Ini berguna saat Anda ingin memakai framework seperti React/Svelte/Solid/Vue hanya pada sebagian halaman, dan ingin memuat data lebih dulu dari server. Tapi pendekatan ini bukan “progressive enhancement”. HTML sebelum hydration tidak harus berfungsi dengan baik; misalnya, <form> tidak perlu bekerja tanpa JavaScript. Detail seperti inilah yang hanya bisa dipahami jika kita mendekatinya dengan rasa ingin tahu, bukan dengan sikap sinis

  • Sangat setuju. Astro adalah tool yang keren, tetapi bagian tersulitnya justru memahami segala macam istilah yang diciptakan pengembang yang mulai bekerja setelah 2010 untuk menjelaskan cara kerja web

  • Ini bukan konsep baru, tetapi pendekatan sekarang terasa jauh lebih rapi. Dulu saya membuat web interaktif dengan PHP dan jQuery, sebelum era React dan SPA. Kalau dipikir-pikir lagi sekarang, secara arsitektur cara lama justru lebih elegan, tetapi saat itu debugging dan DX benar-benar buruk. Saya sama sekali tidak ingin kembali ke masa menghabiskan waktu debug frontend dengan PHP. SPA masih punya kegunaan untuk dashboard kompleks atau aplikasi interaktif. Astro memungkinkan kita mengelola kode server dan klien di satu tempat dengan pemisahan yang jelas, jadi tidak perlu lagi mem-parsing data lewat PHP lalu meneruskannya ke JS, dan DX pun meningkat jauh

  • Saya ingat masa ketika ini disebut AJAX. Rasanya seperti benar-benar kehilangan alur perkembangan

  • Menurut saya framework web awal justru sangat tepat dalam menangani situs web stateless dan server-side rendering

• Secara pribadi saya sangat merekomendasikan Astro. Awalnya saya menganggapnya hanya sebagai “tool yang menambahkan fitur include ke html dan css”, tetapi setelah memakainya untuk situs pribadi dan pembaruan situs Matrix Conference, ternyata sangat menyenangkan karena bisa dipakai tanpa banyak kerepotan
  Kelebihan utama Astro:

  • Tetap berpusat pada html dan css
  • Setelah build, secara default tidak memerlukan js
  • Bisa menambahkan js secara selektif hanya di bagian yang butuh interaktivitas
  • Fitur content collections-nya rapi
  • Optimasi kecepatannya sangat bagus, dan maintainernya benar-benar paham caranya
  • Ada Devbar untuk pengembangan yang secara visual menunjukkan bagian mana dari situs yang masih bisa dipercepat (misalnya lazy load gambar di bagian bawah layar)
  • CSS minifier-nya meng-inline sebagian CSS untuk mengurangi query tambahan
  • Komponen gambar otomatis menetapkan atribut width/height untuk mencegah content layout shift, dan juga menyediakan responsive image

  • Jika Astro memang berpusat pada html dan css lalu hanya menambahkan js saat perlu, bukankah pengalaman yang sama bisa didapat hanya dengan membuat dan men-deploy .html, .css, .js langsung di direktori file? Bahkan mungkin itu lebih cepat karena tidak ada overhead saat development atau bloat yang tidak perlu. Selain itu, saya tidak pernah merasa meng-inline CSS benar-benar menjadi isu performa besar. Dari pengalaman dengan ratusan situs web, CSS hampir tidak pernah jadi bottleneck; yang sebenarnya jadi masalah biasanya jaringan

  • Hanya ada satu hal yang saya sayangkan: saat routing makin kompleks, abstraksinya cepat bertambah dan justru menjadi membingungkan. Karena kompleksitas selalu membawa friction, pada akhirnya saya memilih pendekatan lain

  • Jika yang dibutuhkan hanya “fitur include untuk html dan css”, Anda bisa mengaktifkan server-side includes di web server umum seperti nginx. Itu solusi yang sudah stabil lebih dari 20 tahun dan nyaris tidak butuh perawatan. Tidak ada risiko keamanan tambahan seperti pada template engine, dan Anda bisa menghindari redundancy sambil tetap memakai include murni tanpa khawatir soal kerentanan backend

  • Setelah 20 tahun hanya berkutat di data/backend, saya kembali karena ada proyek frontend. Saya sempat menderita dengan React, lalu beralih ke Astro+Svelte dan hasilnya benar-benar sukses. Karena tetap berpusat pada HTML/CSS, struktur kodenya bisa diprediksi dan bersih, tetapi ketika frontend diserahkan ke pengembang berpengalaman React pun mereka hampir langsung bisa beradaptasi

• Melihat istilah “framework tradisional” dipakai untuk menyebut framework SPA/Virtual DOM terasa menunjukkan perbedaan generasi. Backbone, jQuery, dan sejenisnya itulah framework web yang benar-benar tradisional, dan memang bekerja seperti yang dijelaskan dalam posting blog itu

  • Menurut saya “tradisional” pada akhirnya tergantung kapan seseorang lahir. Bagi saya internet tradisional adalah modem 56k, forum vbulletin, mod GTA:VC, IRC, dan semacamnya. Bagi generasi yang lebih tua mungkin BBS, dan bagi yang lebih muda mungkin Discord adalah internet “tradisional”. Hal serupa juga ada di politik; semua orang cenderung menganggap masa mudanya sebagai masa terbaik

  • Saya ingat Backbone memang ditujukan untuk pure SPA dengan pendekatan MVC di sisi klien

• Saya penasaran kenapa framework SSR seperti Astro, NextJS, dan lainnya tidak mendukung halaman statis dengan rute dinamis seperti yang ada di SvelteKit. Misalnya halaman seperti /todos/[todoId] sama sekali tidak bisa dimasukkan ke static bundle di NextJS. Sementara itu, SvelteKit menggunakan 404.html sehingga secara teknis memang 404, tetapi tetap berfungsi sempurna di Cloudflare atau lingkungan mobile webview. Fitur seperti ini sangat berguna terutama saat membundel untuk mobile webview

  • Saya sebagian setuju, tetapi desain seperti ini juga punya kelemahan. Jika URL seperti /todos/123 di-hard reload di SPA, server akan diminta mengecek apakah file itu benar-benar ada, dan jika tidak ada akan mengembalikan 404. Karena itu, halaman 404 harus mengambil data lagi lewat client-side routing untuk menanganinya, dan ini memerlukan konfigurasi HTTP server seperti nginx. Artinya, hal ini tidak mungkin dilakukan hanya dengan file statis murni. Selain itu, menurut spesifikasi HTTP, cache browser tidak pernah menyimpan respons 404, jadi saat hard reload atau membuka bookmark, cache sama sekali tidak bisa dipakai. Jika konfigurasi seperti ini terasa membebani, menurut saya justru lebih baik memakai query parameter seperti /todo?id=123

  • Mungkin saya salah paham, tetapi saya pernah membuat routing/halaman dinamis bahkan pada static build Next maupun Astro. Saat memakai CMS seperti contentful atau storyblok, saya membiarkan editor bebas membuat route dan komponen, lalu mencakup semua route dengan pola [...slug]. Saya menggunakan fungsi getStaticPaths untuk pregenerate semua halaman. Jika opsi ISR/ISP diaktifkan, halaman yang tidak diketahui saat build-time pun bisa diprerender secara dinamis. Di Next ini disebut dynamic routes, di Astro disebut dynamic pages
    Referensi: Next dynamic routes, Astro dynamic pages

  • Mungkin saya salah mengerti, tetapi fungsi getStaticPaths di Astro tampaknya mendukung hal yang Anda inginkan
    Referensi

  • Saya juga suka deployment statis, jadi sebagai informasi tambahan, NextJS juga mendukung generate static params

  • Saya memang belum sepenuhnya memahami Astro atau berbagai framework lain, tetapi mungkin Anda bisa melihat apakah server islands di Astro mirip dengan yang Anda inginkan

• Saya merasa diskusi frontend sendiri terlalu membingungkan. Hal yang dibahas artikel ini pada akhirnya bermuara pada “apakah browser dipakai sebagai HMI atau sebagai application runtime”. Namun sebagian besar diskusinya justru berupa klaim samar seperti “terasa segar” atau “memuat lebih cepat”. Suasana promosi framework seperti brand terasa sangat mirip dengan industri mode

  • Menurut saya justru industri mode adalah analogi terbaik untuk menjelaskan diskusi seputar framework frontend. Klaim seperti “content-driven” atau “server-first” hampir tidak pernah diperiksa secara teknis dengan ketat

  • Saya tidak paham bagaimana “memuat lebih cepat” bisa dianggap ilusi; itu jelas faktor yang penting

• Baru-baru ini saya membuat situs web lembaga medis dengan Astro, dan itu jauh lebih mudah daripada saat dulu membuatnya dengan Wordpress. Hosting-nya juga bisa gratis di tempat seperti Netlify, jadi tidak perlu terlalu khawatir soal diretas. Saya bahkan membuat CMS sederhana berbasis git agar klien bisa mengubah konten sendiri. Rasanya pengembangan web benar-benar sudah berkembang sangat jauh

  • Apakah itu dibuat karena diminta kenalan, atau bagaimana cara mendapatkan proyek pembuatan situs untuk lembaga medis?

  • Perlu diperhatikan bahwa biaya bandwidth Netlify lebih tinggi daripada Vercel

• Kelebihan terbesar Astro adalah bisa bekerja hanya dengan HTML atau Web Component tanpa ketergantungan pada framework lain seperti React atau Vue. Namun Astro juga mendukung SSR, ISR, SSG, dan middleware seperti Next dan Nuxt
  Pembeda utamanya adalah arsitektur islands, yang memungkinkan implementasi micro-frontend
  Misalnya, dalam satu perusahaan, beberapa tim bisa masing-masing membuat pembayaran, keranjang belanja, dan halaman produk, lalu semuanya digabungkan dalam satu halaman. Cara render-nya juga bisa dikendalikan langsung, dan global state bisa dibagikan, sehingga tiap tim bisa bekerja dan melakukan deployment secara independen sambil tetap memiliki tanggung jawab penuh atas bagiannya
  Namun struktur seperti ini adalah solusi yang dibutuhkan proyek besar. Jika semua tim masing-masing memakai React dengan cara berbeda, berbagai versi akan bercampur, tetapi jika dipisahkan secara arsitektural seperti Astro, masalah itu bisa diselesaikan
  Secara pribadi saya tidak yakin ini akan benar-benar mengubah web sepenuhnya. Rasanya seperti Next/Nuxt yang dihilangkan ketergantungan framework-nya lalu ditambahkan arsitektur islands. Meski begitu, saya tetap merekomendasikan untuk mencobanya
  Jika Anda ingin keluar dari React/Vue menuju web-component atau ingin mengganti Next/Nuxt, Astro layak direkomendasikan sebagai jalan transisi bertahap

• Bagi saya Astro tidak sempurna untuk semua situasi. Ada kalanya jika hanya butuh offline rendering, tidak ada alasan untuk memaksakan penggunaan JavaScript
  Arsitektur islands juga punya batas, dan hasil build-nya sering menjadi terlalu banyak inline
  Sejujurnya saya rasa hype Astro lebih banyak terbantu oleh Vite. Vite memang luar biasa

  • Saya ingin bertanya, kapan tepatnya “arsitektur islands mencapai batasnya”?

• Saya berharap Next.js tidak direkomendasikan sebagai framework standar React. Frontend butuh pemikiran yang lebih kritis. Remix (React Router v7) atau TanStack adalah alternatif yang jauh lebih baik

  • Saya juga setuju. Next.js memang punya potensi, tetapi sejak Vercel ikut campur rasanya banyak mundur. Saya memakainya sejak v10, melewati masa kacau v13 sampai v15, dan saya sangat kecewa. React dan Next.js berubah terlalu cepat sampai mustahil diikuti, dan rasanya lebih banyak perubahan demi perubahan daripada perubahan yang benar-benar diperlukan

  • Saya bahkan ingin berhenti merekomendasikan React sendiri sebagai framework default. Menurut saya HTML/CSS/JS jauh lebih baik untuk pengembangan frontend

  • Saya rasa Remix/React Router v7 adalah arah yang benar. Terutama jika Remix memakai preact dan berpusat pada web standard, saya berharap cara membuat situs web yang lebih kokoh bisa kembali. Hanya saja, transisi dari Remix ke RR7 tidak mulus sehingga saya harus me-rewrite proyek

• Saya rasa prinsip-prinsip dasar web masih tetap berlaku. Bagi pengembang yang memakai PHP, Spring, Quarkus, atau ASP.NET MVC, mungkin sulit merasakan betapa beratnya lingkungan pengembangan web berbasis framework JS saat ini. Karena suasana industri yang sangat digerakkan tren, rasanya tidak mudah untuk kembali ke dasar