Apa Itu AstroJS?

Astro adalah salah satu framework pengembangan web untuk proses pembuatan yang cepat dan website dengan fokus konten. Meski fokus ke konten, astro yang bermarkas di astro.build ini juga memberikan keleluasaan memaksimalkan interaktivitas pada website yang dibangun. Kenapa bisa demikian?

Kita mulai dari fitur-fitur yang ditawarkannya. Apa saja?

• Pulau komponen. Ditransliterasi ke bahasa Indonesia jadinya aneh ya.. Istilah aslinya adalah component island. Jadi ini semacam konsep arsitektur yang relatif baru untuk membangun website yang lebih cepat. Jadi, dengan konsep ini, setiap bagian dari website itu dianggap komponen-komponen. Setiap komponen itu diibaratkan sebagai sebuah pulau tersendiri. Setiap pulau itu memiliki keleluasaan untuk me-load javascript masing-masing, jika memang dirasa perlu. Bahkan untuk menjamin cepatnya loading website ke hadapan pengunjung, javascript itu bisa dipanggil ketika komponen itu, atau katakanlah, pulau itu, muncul di pandangan pengunjung. Ada konsep direktif client:visible yang memungkinkan hal itu terjadi.
• Desain API server-first. Jadi, astro didesain untuk memberikan rendering di sisi server terlebih dahulu, selama memungkinkan, ketimbang di sisi client. Makanya, selaras dengan fitur berikutnya di bawah ini.
• Zero JS, by default. Artinya tak ada eksekusi JavaScript (runtime) pada saat loading halaman yang bisa jadi membuat halaman website menjadi berat ketika pertama kali dibuka.
• Edge-ready: website dengan astro ini bisa di-deploy atau bisa dijalankan di mana saja, bahkan pada platform runtime javascript seperti Deno atau Cloudflare.
• Bisa kustomisasi, seperti dengan Tailwind, MDX, dan 100+ macam integrasi lainnya.
• UI-agnostic, bisa mengadopsi berbagai teknologi librari javascript, seperti React, Preact, Svelte, Vue, Solid, Lit dan masih banyak yang lain.

Itu bicara dari sisi fitur. Ada banyak alasan lainnya mengapa kita perlu memanfaatkan astro ini. Salah satunya adalah kemudahan penggunaannya. Dengan kata lain, learning curve-nya relatif landai. Tidak akan berat sekali untuk memanfaatkan teknologi yang ditawarkannya. Kita buktikan saja dengan mencoba mempraktikkan menggunakan astro.

Untuk instalasi, kita membutuhkan npm, pnpm, atau yarn.

# create a new project with npm
npm create astro@latest

Untuk menjalankan server-nya, kita cukup gunakan perintah run dev. Jika menggunakan npm, jadinya seperti perintah di bawah ini:

npm run dev

Biasanya kita akan diberikan alamat localhost dengan nomor port 3000. Dengan demikian, kita bisa mengakses di browser dengan alamat http://localhost:3000.

Setelah terinstal, kita bisa memainkan file based router atau router URL yang berbasis file. Setiap file di folder 'src/page' bisa kita jadikan router. Misal kita buat nama filenya page/about.astro, kita bisa panggil alamatnya http://localhost:3000/about.

Jika kita buat file di folder baru sebagai subfolder dari 'page', misalnya page/blog/index.astro, kita bisa panggil lewat alamat http://localhost:3000/blog. Dan begitu seterusnya.

Jika kita ingin memanfaatkan fitur komponen, kita bisa membuat komponen apa saja di folder 'src/components'. Lebih lanjut, sangat disarankan untuk kita belajar tutorial singkat melalui laman resmi astro di https://docs.astro.build/en/tutorial/0-introduction/. Selamat mencoba, selamat belajar! Semoga sukses!