Memulai dengan Astro: Framework Modern untuk Web yang Cepat

Astro adalah framework web modern yang dirancang untuk membangun website yang super cepat. Dengan pendekatan unik yang disebut “Islands Architecture”, Astro memungkinkan Anda untuk membangun situs yang loading-nya kilat sambil tetap memberikan interaktivitas yang diperlukan.

Apa itu Astro?

Astro adalah static site generator yang berbeda dari yang lain. Alih-alih mengirim seluruh JavaScript bundle ke browser, Astro hanya mengirim HTML statis dan JavaScript yang benar-benar diperlukan.

Keunggulan Utama Astro

Zero JavaScript by Default - Astro mengirim HTML murni secara default
Islands Architecture - Komponen interaktif dimuat secara selektif
Framework Agnostic - Bisa menggunakan React, Vue, Svelte, dll dalam satu project
Built-in Optimizations - Image optimization, CSS bundling, dan lainnya

Cara Memulai

Untuk memulai project Astro baru, jalankan perintah berikut:

npm create astro@latest my-astro-site
cd my-astro-site
npm install
npm run dev

Struktur Project

my-astro-site/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── styles/
├── public/
└── astro.config.mjs

Membuat Komponen Pertama

Berikut adalah contoh komponen Astro sederhana:

---
// Component Script (runs at build time)
const greeting = "Hello, World!";
---

<!-- Component Template -->
<div class="greeting">
  <h1>{greeting}</h1>
  <p>Welcome to Astro!</p>
</div>

<style>
  .greeting {
    padding: 2rem;
    text-align: center;
  }
  
  h1 {
    color: #3b82f6;
    font-size: 2rem;
  }
</style>

Islands Architecture

Konsep Islands Architecture adalah inti dari Astro. Bayangkan halaman web Anda sebagai lautan HTML statis dengan “pulau-pulau” JavaScript interaktif:

Lautan (Ocean): HTML statis yang cepat dimuat
Pulau (Islands): Komponen interaktif yang dimuat sesuai kebutuhan

Contoh Penggunaan Islands

---
import Counter from '../components/Counter.jsx';
import SearchBox from '../components/SearchBox.vue';
---

<html>
  <body>
    <h1>My Static Content</h1>
    <p>This loads instantly!</p>
    
    <!-- Interactive islands -->
    <Counter client:load />
    <SearchBox client:visible />
  </body>
</html>

Tips untuk Performa Optimal

Gunakan client directives dengan bijak:
- client:load - Load immediately
- client:idle - Load when browser is idle
- client:visible - Load when element is visible

Optimasi gambar:

---
import { Image } from 'astro:assets';
import myImage from '../assets/hero.jpg';
---

<Image src={myImage} alt="Hero image" />

Gunakan CSS scoped untuk menghindari bloat

Kesimpulan

Astro adalah pilihan yang excellent untuk:

Blog dan content sites
Marketing websites
Documentation sites
E-commerce sites

Dengan pendekatan yang fokus pada performa dan developer experience yang luar biasa, Astro adalah framework yang patut dicoba untuk project web Anda selanjutnya.

Pro Tip: Mulai dengan template yang sudah ada di astro.new untuk mempercepat development!

Artikel ini adalah bagian dari seri tutorial web development. Ikuti blog ini untuk mendapatkan tips dan tutorial terbaru!