AstroJS vs Next.js: Framework Mana yang Paling Pas untuk Web Personal?

Konteks: Website Ini Menggunakan AstroJS

Disclaimer upfront: website portfolio dan blog yang Anda baca ini dibangun dengan AstroJS. Tapi pilihan tersebut bukan tanpa alasan - saya bandingkan secara objektif dengan Next.js selama 2 minggu sebelum commit. Artikel ini adalah rangkuman temuan saya.

AstroJS: Islands Architecture

Konsep kunci Astro: Islands. Halaman HTML mayoritas statis, dengan pulau-pulau kecil interaktivitas JavaScript. Browser hanya mengunduh JS untuk komponen yang interaktif. Hasilnya: website (yang 95% konten) jadi nol JavaScript di client.

---
// BeritaCard.astro (zero JS shipped)
---
<article class="border p-4 rounded">
  <h2>{post.title}</h2>
  <p>{post.excerpt}</p>
</article>

---
---
<!-- Komponen interaktif React dibungkus client:only -->
<client:only client:visible>
  <NewsletterForm ReactComponent />
</client:only>

Next.js: Server-Side Rendering Default

Next.js (App Router) berpikir secara berbeda. Semua komponen Server Component berjalan di server, tapi Next.js mengirim runtime React ke client. Atomic hydration: hanya komponen Client yang dirender di browser mengirim JS.

// app/blog/page.tsx (Server Component)
export default async function BlogPage() {
  const posts = await getPosts();
  return (
    <>
      {posts.map(p => <PostCard key={p.id} post={p} />)}
      {/* Interactive component: 'use client' */}
      <NewsletterForm />
    </>
  );
}

// components/NewsletterForm.tsx
'use client';
export default function NewsletterForm() {
  // ...form logic
}

Benchmark: Blog dengan 50 Artikel

Build Time

Metric	AstroJS	Next.js
Build duration	2.1s	8.4s
Output size (static)	1.8 MB	4.5 MB
JS shipped to client (homepage)	0 KB (zero by default)	89 KB
Total pages generated	52 (50 blog + 2 statis)	52

Lighthouse Score (Mobile)

Metric	AstroJS	Next.js
Performance	100	92
Accessibility	100	100
Best Practices	100	100
SEO	100	100
Time to Interactive (TTI)	0.8s	1.9s
Largest Contentful Paint (LCP)	0.9s	1.6s

Developer Experience

AstroJS

Pros:

• Quick start: npm create astro@latest - setup dalam 30 detik
• .astro files: syntax familier (mirip HTML + frontmatter)
• Built-in MDX support, image optimization, sitemap
• Content Collections: schema validation untuk markdown frontmatter
• Integrasi mudah dengan React/Vue/Svelte components (bila perlu)

Cons:

• Tidak ideal untuk aplikasi web interaktif (dashboard, admin panel)
• Routing terbatas pada file-system based (tidak ada route groups App Router Next.js)
• State sharing antar halaman dengan localStorage (client-side) atau cookie (server)

Next.js

Pros:

• Fullstack: API routes, server actions, middleware
• Image optimization otomatis dengan <Image>
• Route groups, layouts nested, parallel routes
• Server Actions untuk form submission tanpa API dedicated
• Ekosistem middleware (auth, rate limiting)

Cons:

• Runtime bawaan: browser butuh ~80 KB JS minimum
• Hot reload relatif lambat untuk project besar
• ABI App Router masih relative baru - banyak breaking changes antar minor versions

Content Collections: Astro's Killer Feature

Untuk portal berita, fitur Content Collections adalah tembaga keemas. Validasi skema markdown frontmatter di compile-time!

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    author: z.enum(['donostia', 'guest']).default('donostia'),
    coverImage: z.string().optional(),
  }),
});

export const collections = { blog };

---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
const post = posts.find(p => p.slug === Astro.params.slug);

// Akses frontmatter dengan type safety
const { Content } = await post.render();
---
<Content />

Kalau ada field yang salah type di markdown, build akan gagal dengan pesan error jelas. Next.js membutuhkan setup tambahan (contentlayer, frontmatter-validation) untuk ini.

Kapan Pilih Astro?

• Blog dengan ribuan artikel MDX
• Documentation sites (DOCS Vue, Preact, SolidJS menggunakan Astro)
• Portfolio websites performa tinggi
• Landing pages marketing - conversion tinggi dengan load time rendah
• News portal dengan konten mostly static

Kapan Pilih Next.js?

• SaaS dashboards dengan banyak state & interaksi
• E-commerce dengan cart dinamis, auth flows
• Aplikasi web (member areas, admin panels)
• Cross-platform (web + iOS/Android dengan React Native)
• Real-time features (chat, collaboration)

Trade-off Utama: JavaScript vs Server

Astro mengurangi JavaScript = makin cepat first load, makin bagus SEO. Next.js menambah JavaScript = makin interaktif, makin banyak feature di client.

AstroJS:               Next.js:

  Konten (Static)        Server Components
   |                      |
  HTML murni            HTML + JS minimum
   |                      |
  Islands interaktif     Hydration
   |                      |
  Hybrid (opt-in JS)    JavaScript-heavy

Kesimpulan

Untuk portal berita, blog personal, atau website portfolio - AstroJS adalah pilihan yang menang telak. Performa nol JavaScript defaultnya memberi skor Lighthouse sempurna. Content Collections membuat manajemen konten MDX aman dan terskema.

Untuk web app kompleks yang butuh state management, real-time, atau e-commerce dengan banyak flow interaktif - Next.js adalah pilihan tepat.

Pilihan terakhir saya: website ini pakai AstroJS untuk performa dan DX editorial, sementara project SaaS klien saya pakai Next.js untuk ekosistem React dan server actions.