Astro.js: Masa Depan Website Statis yang Lebih Cepat, Lebih Ringan, dan Lebih Sadar JavaScript

Iyan Zuli

5 Juli 2025 •

9 min read

https://images.unsplash.com/photo-1515378960530-7c0da6231fb1?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y29tcHV0ZXJ8ZW58MHx8MHx8fDA%3D

Category: Technology

Tags:

astrojavasript

Apa Itu Astro.js? Kenapa Lagi Populer?

Dalam pembuatan website, pasti mengenal istilah yang namanya server side rendering (SSR) maupun static site generation (SSG) atau istilah yang lain. Beberapa istilah tersebut muncul dari cara konten dalam website tersebut dimuat. Sebagai contoh SSG, konten website dimuat dengan cara website di build terlebih dahulu dalam mode deploying lalu ditampilkan hasilnya dalam mode production cocok untuk website yang memiliki konten jarang update. Hasilnya SSG memiliki build time lebih lama tetapi memiliki render time lebih cepat karena tidak perlu merender halaman website dari awal alias website nya sudah dibuat terlebih dahulu. Umpama nya kamu beli bakso di tukang bakso dengan pentol yang sudah siap saji, tinggal tuang kuah & ambil pentol saja karena memasaknya di rumah. Berbeda dengan SSR, tidak ada build dalam deploying sehingga konten website dimuat atau dirender saat itu juga ketika ditampilkan, cocok untuk website realtime. Jika diumpamakan seperti tukang bakso tadi, si tukang bakso langsung berangkat mencari pembeli dan mulai memasak ketika terdapat pembeli. Memang lebih lama waktu memasak tetapi setidaknya lebih baru dan bisa update kapan aja.

Selama saya menggunakan Astro.js, terdapat beberapa tantangan dan keseruan. Tantangannya ialah kamu harus belajar hal-hal serta konsep baru dalam Astro.js. Sedangkan letak keseruannya ialah kembali ke jalan yang benar dalam pembuatan website yang efisien, dan tentunya juga merasa keren 😎. Biar lebih paham, akan kujelaskan secara detail tentang Apa itu Astro.js dan pengalaman saya dalam menggunakan Astro.js. Contoh website yang saya buat dengan Astro.js ialah sebagai berikut:

iyan-zuli-armanda.netlify.app, Portfolioku 😁
software-techs-portal.vercel.app, Serta blog ini sendiri 😅

Definisi Astro.js

Astro.js adalah framework modern untuk membangun website static site generation (SSG) yang cepat, ringan, dan efisien. Astro.js dirancang dengan pendekatan islands architecture, yaitu hanya bagian-bagian tertentu dari halaman yang membutuhkan interaktivitas akan dirender dengan JavaScript. Sementara sisanya disajikan sebagai HTML statis seperti cara web bekerja di masa lalu, namun dengan sentuhan modern dan integrasi penuh dengan ekosistem web masa kini.

Pendekatan ini membuat Astro.js menjadi pilihan menarik bagi pengembang yang ingin membangun website yang performanya tinggi, cepat dimuat bahkan di jaringan lambat, serta ramah SEO. Contohnya seperti portfolio, blog, artikel, atau website statis lainnya.

Kepopuleran Astro.js dapat dilihat dari yang dikumpulkan oleh HTTP Archive dan Chrome UX Report. Dalam laporan tersebut, Astro.js menunjukkan performa yang sangat baik dibandingkan framework web populer lainya seperti WordPress, Next.js, Nuxt.js, Gatsby, dan lainnya. Untuk melihat visualisasi data lengkapnya, klik disini

Sejarah Astro.js

Astro.js pertama kali diumumkan oleh Fred K. Schott dan tim di Snowpack pada Juni tahun 2021.Tujuan awal yang dibawa ialah “Build the web, lighter and faster”, framework untuk membuat website statis yang super cepat. Astro.js membuat konsep unik berupa Island Architecture dan Partial Hydartion yang membuat kepopuleran Astro.js meningkat.

Pada tahun 2021, Astro.js hanyalah project eksperimen tetapi mulai dilirik oleh komunitas hingga pada Agustus tahun 2022, Astro.js merilis versi pertama (1.0) yang menandakan siap untuk produksi. Pada Januari 2023, Astro.js versi 2.0 rilis yang meningkatkan DX (Developer Experience) lalu diiringi dengan Google yang mendorong Core Web Vitals. Astro.js mulai sering dipakai pada perusahaan-perusahaan besar, komunitasnya terus meningkat, hingga bersaing langsung dengan Next.js, Nuxt.js, SvelteKit, dan lain sebagainya.

Sumber : docs.astro.build

Tujuan Astro.js

Astro.js diciptakan untuk membuat website dengan pendekatan “pakai logic itu jika itu digunakan” sehingga menghasilkan website yang ringan dan cepat. Oleh karena itu, Astro.js adalah pilihan tepat jika kamu ingin membangun:

Website cepat dan ringan
Dengan waktu muat di bawah 1 detik, sangat cocok untuk pengalaman pengguna yang optimal. Hal ini juga meningkatkan SEO dari website itu sendiri (SEO friendly).
Konten statis
Contohnya seperti blog, artikel, landing page, portofolio, dokumentasi produk, atau situs dengan konten yang jarang berubah.
Minim JavaScript
Jika kamu ingin menghindari beban JavaScript berlebih yang bisa memperlambat performa, Astro.js punya keunggulan besar di sini.
Kombinasi framework UI
Astro.js memungkinkan penggunaan berbagai framework seperti React, Vue, Svelte, dan lainnya dalam satu proyek. (Walaupun ini lebih cocok untuk use-case khusus sih).

Real World Use Case

Walau kelihatannya remeh, ternyata Astro.js bukan hanya dipakai oleh project kecil atau perusahaan kecil melainkan juga dipakai oleh beberapa perusahaan besar 😮. Berikut ialah beberapa website yang dibuat dengan Astro.js:

Ikea - https://www.ikea.com
Porsche - https://www.porsche.com
Unilever - https://www.unilever.com
Netlify - https://www.netlify.com
Cloudflare - https://www.cloudflare.com
Firebase - https://firebase.studio
Dan masih banyak lagi

Kamu dapat melihat showcase lengkap nya dari beberapa link berikut:

astro.build/showcase - showcase resmi dari Astro.js
datafragment.com - menampilkan data terkait website yang dibuat dengan framework frontend beserta trafic nya
jenxi.com - menampilkan website yang dibuat dengan Astro.js dimulai dari tingkat individu hingga korporat

Contoh Perbandingan

Saya akan membandingkan secara sederhana dan umum untuk perbandingan Astro.js dengan tools lain. Dalam pembuatan web SSG atau SSR, saya akan membandingkan Astro.js dengan Next.js

Pembanding	Next.js	Astro.js
Tujuan	Web kompleks	Web yang lebih simple dan lebih cepat
Kemudahan Belajar	Mudah tetapi butuh waktu	Sedikit lebih susah karena hal baru, tetapi lebih cepat
Ukuran Bundle	Besar	Lebih ringan dari Next.js
Performa	Cepat	Lebih cepat dari Next.js (jika dimanfaatkan dengan benar)
Skalabilitas	Menengah-Tinggi	Kecil-Menengah (tinggi juga bisa tetapi lebih banyak setting)
Komunitas	Luas	Luas, tetapi lebih kecil dari Next.js (growing)
Dokumentasi	Lengkap & Mudah dipahami	Lengkap & Mudah dipahami, tetapi tidak selengkap Next.js

*Sekali lagi, perbandingan tersebut hanya gambaran kasar saja, real use case pasti berbeda sesuai dengan kebutuhan dan cara menggunakannya.

Kelebihan dan Kekurangan Astro.js

Astro.js bukan sekadar hype—ada alasan nyata mengapa banyak developer mulai meliriknya. Namun, Astro.js memiliki beberapa hal yang perlu dihadapi dalam proyek realita. Berikut ialah kelebihan dan kekurangan dari Astro.js:

Kelebihan Astro.js

Zero JavaScript by Default

Secara default, Astro.js tidak mengirimkan JavaScript apa pun ke browser. Artinya, halaman yang dihasilkan sangat ringan dan cepat dimuat. Kamu bisa menambahkan JavaScript secara eksplisit hanya di komponen yang memang membutuhkan interaktivitas. Ini sangat ideal untuk situs konten seperti blog, dokumentasi, portofolio, atau landing page.

Contohnya, website blog pribadi tanpa komentar atau interaksi berat bisa dibuka hampir instan bahkan di HP lama dengan koneksi 3G. Tidak ada JS, tidak ada render blocking. Website yang kumaksud tentu website ini 😁
Kompatibilitas Multi-Framework

Astro.js memungkinkan kamu untuk menggunakan berbagai framework UI seperti React, Vue, Svelte, Preact, bahkan SolidJS dalam satu proyek. Ini memudahkan migrasi bertahap dari proyek lama, atau eksplorasi kombinasi terbaik untuk kebutuhan spesifik.

Contohnya, website portfolioku dibuat dengan Astro.js. Dalam komponen frontend nya, terdapat komponen berekstensi .astro untuk komponen statis ringan, dan komponen berekstensi .tsx (react) untuk komponen interaktif. Silahkan mampir di iyan-zuli-armanda.netlify.app untuk melihat-lihat 😁
Static Site Generation (SSG) Seutuhnya

Astro.js fokus pada pembuatan situs statis. Ini membuatnya cocok untuk SEO, hemat bandwidth, dan bisa dihosting di layanan gratis seperti GitHub Pages, Vercel, atau Netlify.

Jika tidak percaya terkait optimasi SSG nya, kamu bisa cek performa website ini di lighthouse sebagai contoh.
Optimasi Otomatis

Astro.js secara default mengoptimalkan HTML, CSS, dan gambar ketika proses build. Tidak perlu pasang plugin tambahan hanya untuk minify atau lazyload gambar—semua sudah disiapkan.

Yang artinya developer backend bisa tetap fokus di logika aplikasi, tanpa perlu pusing mengonfigurasi Webpack atau Vite untuk optimasi dasar. Selain itu, tidak perlu juga untuk mengkompres asset-asset secara brutal 😅

Kekurangan Astro.js

Masih Framework Baru

Astro.js pertama kali rilis versi 1.0 pada 2022. Meskipun perkembangannya cepat dan komunitasnya tumbuh, dokumentasinya masih jauh lebih terbatas dibanding Next.js, Nuxt, atau SvelteKit.

Contohnya, ketika kamu mentok di error yang tidak umum, bisa jadi kamu harus menggali GitHub issue, Discord, atau bahkan source code Astro.js sendiri untuk menemukan solusinya. Ini sering terjadi di pembuatan web portfolio ku karena first time 😔
Kurva Belajar Tersendiri

Konsep islands architecture bisa jadi membingungkan, apalagi jika kamu terbiasa membangun SPA (Single Page Application) dengan React atau Vue secara penuh. Pemisahan antara konten statis dan bagian interaktif memerlukan pemahaman tentang bagaimana dan kapan komponen “di-hydrate”.

Contohnya, beberapa developer pemula merasa “gagal paham” ketika komponen React mereka tidak merespon klik karena lupa menyetel client:load atau client:visible. Btw itu bukan aku walau waktu itu sempet sedikit bingung 😅
Kompleksitas untuk Aplikasi Dinamis

Astro.js bukan pilihan terbaik untuk aplikasi yang penuh interaksi kompleks seperti dashboard admin, live chat, atau aplikasi dengan real-time data. Meskipun bisa dilakukan, konfigurasi menjadi lebih rumit, dan sering kali kamu akhirnya menyematkan SPA di dalam Astro.js yang bertolak belakang dengan tujuan awalnya.

Contohnya, kamu berakhir membuat hampir semua halaman dengan komponen React full-hydration karena butuh banyak interaksi. Pada akhirnya, kamu bertanya, “kenapa tidak langsung pakai Next.js saja?”

Contoh lain ada di website https://puri-ranilasem.vercel.app. Karena kompleksitas interaktif SPA, website tersebut beralih dari Astro.js ke React + Vite. Iya betul, itu website yang saya buat 😅

Getting Started

Dokumentasi Astro.js secara lengkap dapat dilihat dengan link sebagai berikut:

https://astro.build/

Jika ingin memulai secara cepat, saya akan menjelaskan beberapa step nya:

Prerequisites

Sebelum menggunakan Astro.js, pastikan memiliki beberapa tools berikut:
- Node.js
  Selaku runtime environment JavaScript, dibutuhkan dengan versi v18.20.8, v20.3.0, v22.0.0, atau lebih tinggi. Jika belum memiliki Node.js atau versi nya sudah jadul, silahkan install di https://nodejs.org/id.
- Text Editor
  Text Editor yang disarankan ialah Visual Studio Code karena terdapat ekstensi official Astro.js. Silahkan install VS Code di https://code.visualstudio.com/
- Terminal
  Ya kalau ini tidak usah ditanya lagi lah ya 🗿
Browser Kompatibilitas

Astro.js dibuat dengan menggunakan vite. Sehingga Browser yang diperlukan ialah browser modern seperti Chrome, Edge, Firefox, Safari. Untuk informasi rincinya, klik disini.
Instalasi

Jalankan perintah berikut di terminal untuk menginstall Astro.js:

Jika menggunakan npm:
```
npm create astro@latest
```
Jika menggunakan pnpm:
```
pnpm create astro@lastest
```
Atau jika menggunakan yarn:
```
yarn create astro
```
Jika ingin instalasi yang disertai integrasi beberapa tools, tema atau starter template, ataupun manual setup, bisa dilihat pada dokumentasi Astro.js.
Struktur Project

Walau tidak saya jelaskan secara rinci (karena kalau mau rinci, liat dokumentasi saja-_-), berikut ialah gambaran struktur project secara sederhana
- src/* - source code project (components, pages, styles, images, dll)
- public/* - static file, none-code, atau assets yang tidak diproses
- package.json - project manifestasi
- astro.config.mjs configurasi Astro.js
- tsconfig.json - configurasi TypeScript (tenang aja, bisa makai JavaScript kok 😂)
Develop & Build
- Development Mode
  
  Untuk mode development, jalankan perintah berikut di terminal:
  
  Jika menggunakan npm:
```
npm run dev
```
  Jika menggunakan pnpm:
```
pnpm run dev
```
  Jika menggunakan yarn:
```
yarn dev
```
  Lalu website langsung jalan di http://localhost:4321 (biasanya). Astro.js sudah otomatis hot serta perubahan secara live pada folder src/*.
- Build and Perview
  
  Jika dirasa sudah yakin dan ingin di build, maka jalankan perintah berikut pada terminal:
  
  Jika menggunakan npm:
```
npm run build
```
  Jika menggunakan pnpm:
```
pnpm build
```
  Jika menggunakan yarn:
```
yarn build
```

Itu hanya dasarannya saja. Untuk yang selebihnya, akan saya tinggalkan link dokumentasi nya disini.

Kesimpulan

Astro.js membawa semangat kembali ke akar web: cepat, sederhana, dan ringan. Tapi ia juga mengajak kita untuk berpikir ulang—bahwa JavaScript tidak harus menjadi standar baku dalam setiap elemen halaman web. Alih-alih menggunakannya secara membabi buta, Astro.js mendorong pendekatan JavaScript on demand, yaitu hanya menambahkan interaktivitas ketika memang benar-benar dibutuhkan.

Astro.js sangat cocok untuk website yang kontennya lebih penting daripada interaksi, peforma tinggi, serta ramah pengguna dan ramah search engine. Namun untuk aplikasi web berskala besar dan dinamis, kamu mungkin akan menemukan bahwa Astro.js bukan jalan termudah atau bahkan bukan jalan terbaik.

Jadi, Kapan Sebaiknya Menggunakan Astro.js?

Kalau kamu ingin membangun situs yang cepat, bersih, dan tetap fleksibel menggunakan teknologi modern, lebih mementingkan konten daripada interaktivitas, gas aja pakai Astro.js. Asik kok 😅

Tapi kalau kamu sedang membuat sistem informasi mahasiswa, aplikasi marketplace, game berbasis web, atau yang kompleks dan lebih interaktif lainnya, sebaiknya jangan gegabah 🗿

Catatan dari penulis terkait Astro.js:

Astro.js itu mudah dipelajari, dokumentasi nya tergolong mudah, komunitasnya terus berkembang, konsepnya juga seru. Jika skala website nya sudah mulai besar, maka disitulah sisi asli Astro.js muncul. Jangan panik, mudah kok kalau dimulai secara bertahap ☺️.