Astro 7.0: Framework Modern untuk Static Sites, Dynamic Content, dan Performa Maksimal

Astro baru aja rilis versi 7.0, dan ini update yang cukup signifikan. Buat yang gak familiar: Astro adalah web framework yang menggabungkan static site generation (SSG) dengan server-side rendering (SSR) secara seamless. Lo bisa bikin halaman statis yang loading-nya instant — tapi juga bisa punya halaman dinamis yang render di server. Best of both worlds.

Di toolkuy.com, kita pake Astro untuk site ini. Dari pengalaman migrasi dari Hugo ke Astro tahun lalu, dan upgrade ke Astro 7.0 minggu ini, gue breakdown apa yang berubah, apa yang baru, dan apakah lo harus upgrade.

Yang Baru di Astro 7.0

Astro 7.0 bukan cuma minor bump — ada beberapa perubahan fundamental yang bikin framework ini jauh lebih powerful:

1. Content Collections v2 dengan Referensi

Ini fitur yang gue tunggu-tunggu. Di versi sebelumnya, content collections (misal: blog posts) gabisa saling referensi. Sekarang lo bisa bikin relationship antar koleksi:

// src/content/config.ts
import { defineCollection, reference, z } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content',
  schema: ({ image }) => z.object({
    title: z.string(),
    date: z.date(),
    author: reference('authors'),  // Referensi ke collection authors
    relatedPosts: z.array(reference('blog')).optional(),
    image: image().optional(),
    tags: z.array(z.string()),
  })
});

const authorsCollection = defineCollection({
  type: 'data',
  schema: z.object({
    name: z.string(),
    avatar: z.string(),
    bio: z.string(),
  })
});

export const collections = {
  blog: blogCollection,
  authors: authorsCollection,
};

Dengan referensi, lo bisa query related content tanpa manual join di frontend. Contoh: di setiap artikel blog, lo bisa tampilin "Artikel terkait dari penulis yang sama" — semua di level build time, tanpa runtime overhead.

2. Server Islands (Dynamic Islands 2.0)

Di Astro 6, lo punya "islands" — komponen interaktif yang terisolasi dari static HTML. Di 7.0, islands ini bisa di-render di server dan di-stream ke client secara bertahap. Bedanya dengan server components React/Next.js: Astro gak render ulang seluruh halaman — cuma island tertentu yang berubah.

---
// Halaman Astro — static generation dengan server island
import ProductCard from '../components/ProductCard.astro';
import LivePrice from '../components/LivePrice.astro';
---

<html>
  <body>
    <h1>Produk Terbaru</h1>
    
    <!-- Ini static — render sekali di build -->
    <ProductCard product={product} />
    
    <!-- Ini server island — render tiap request -->
    <ServerIsland client:visible>
      <LivePrice productId={product.id} />
    </ServerIsland>
  </body>
</html>

Server Islands render di server tiap ada request — tapi gak nge-block rendering halaman. HTML utama dikirim duluan (instant!), server island di-stream setelahnya. Ini berarti: user liat konten statis dalam <100ms, sementara data real-time muncul beberapa detik kemudian. UX yang luar biasa buat e-commerce, dashboard, atau portal berita.

3. Astro Actions

Ini yang bikin Astro jadi full-stack framework yang proper. Actions adalah fungsi server yang bisa dipanggil dari client — mirip Server Actions di Next.js, tapi lebih simpel dan gak perlu API routes:

// src/actions/index.ts
import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

export const server = {
  newsletter: defineAction({
    accept: 'form',
    input: z.object({
      email: z.string().email(),
      name: z.string().min(2),
    }),
    handler: async (input, context) => {
      // Validasi + simpan ke database
      const { email, name } = input;
      await db.insert(newsletter).values({ email, name });
      
      // Kirim email konfirmasi
      await sendConfirmation(email, name);
      
      return { success: true, message: 'Terima kasih sudah subscribe!' };
    }
  })
};

Di client, pake actions.newsletter() — Astro handle serialization, validation, type safety, dan error handling secara otomatis. Gak perlu nulis fetch manual, gak perlu nulis API endpoint terpisah.

Benchmark: Astro 7.0 vs 6.0

Metric	Astro 6.0	Astro 7.0	Improvement
Build time (500 pages)	18.4 detik	12.1 detik	34% lebih cepat
Dev server startup	1.8 detik	0.8 detik	56% lebih cepat
HMR (file change)	~120ms	~45ms	63% lebih cepat
HTML output size	4.2KB (avg)	3.8KB (avg)	10% lebih kecil
JS bundle size (default)	~0KB (static)	~0KB (static)	Sama — zero JS by default
Server island TTFB	N/A (baru)	~120ms	N/A

Yang paling berasa: dev server startup 0.8 detik. Buka proyek, ngetik pnpm dev, dan langsung liat perubahan. Gak ada lag kayak Next.js yang bisa 5-10 detik. Ini penting buat developer experience — lo makin sering ngoding kalau feedback loop-nya cepet.

Migrasi dari Astro 6.x ke 7.0

Proses migrasi relatif mulus — gak ada breaking change yang bikin lo harus rewrite dari 0. Ini step-step-nya:

# 1. Update dependencies
pnpm update astro@latest @astrojs/*

# 2. Update Content Collections (jika punya)
# - Ganti type: 'content' schema untuk image: image() bukan z.string()
# - Tambah referensi antar collection kalau perlu

# 3. Cek deprecated APIs
npx astro check

# 4. Upgrade content config (jika perlu migrate ke v2)
# Schema: z.image() → image() dari astro:content
# Referensi: z.string() → reference('collection-name')

# 5. Test build
pnpm astro build

# 6. Deploy
pnpm astro deploy

Gw migrasi site ini (toolkuy.com) dalam waktu ~30 menit. Content collections butuh penyesuaian kecil — terutama bagian schema image yang berubah dari z.string() ke image() helper. Sisanya smooth.

Kapan Lo Harus Upgrade?

Jawaban jujur: kalau lo butuh fitur baru — Server Islands, Actions, Content References. Kalau site lo cuma static blog tanpa interaktivitas, Astro 6.x udah cukup dan stabil.

Tapi kalau lo:

Bikin e-commerce atau site dengan data real-time → Server Islands wajib
Bikin aplikasi dengan form submission → Actions simplify banget
Punya banyak content yang saling terkait → Content References bikin query jauh lebih rapi
Mau build time lebih cepet → Upgrade aja, 34% improvement noticeable

Satu hal yang menarik: Astro 7.0 makin competitive dengan Next.js — terutama buat use case content-heavy site yang butuh sedikit interaktivitas. Next.js masih unggul kalau lo butuh full-fledged app routing (RSC, parallel routes, intercepting). Tapi untuk marketing site, blog, documentation, portal — Astro 7.0 sekarang pilihan terbaik.

Untuk setup deployment Astro production, baca Docker multi-stage build — gue pake strategi yang sama buat optimize Docker image Astro site ini dari 1.2GB jadi 180MB. Juga kernel tuning untuk static file serving yang optimal di VPS.