Next.js 15 vs Astro 5 untuk proyek Indonesia — kapan pakai mana

Quick verdict

Sebelum masuk detail:

Proyek	Framework
Dashboard dengan login user	Next.js 15
E-commerce dengan cart	Next.js 15
Platform SaaS	Next.js 15
Aplikasi dengan real-time data	Next.js 15
Blog atau media	Astro 5
Company profile	Astro 5
Landing page / marketing site	Astro 5
Dokumentasi	Astro 5
Portofolio	Astro 5

Kalau proyek Anda butuh user login, database query per request, atau state yang berbeda per user — Next.js. Kalau kontennya sama untuk semua pengunjung dan prioritasnya kecepatan load — Astro.

---

Kapan Next.js 15

Next.js adalah full-stack React framework. Server-side rendering, API routes, middleware, edge runtime — semuanya ada dalam satu package. Ini keunggulannya sekaligus alasan ia overengineered untuk proyek content-heavy.

Use case yang tepat untuk Next.js 15

Real-time atau dynamic data per user. Dashboard analytics, aplikasi yang menampilkan data berbeda per akun, notifikasi real-time. Next.js dengan React Server Components bisa fetch data langsung di server, hasil berbeda per request — sesuatu yang static site tidak bisa lakukan tanpa API call tambahan dari client.

Autentikasi dan session management. Login, logout, protected routes, role-based access. Next.js (dengan library seperti NextAuth atau Lucia) handle auth flow dengan rapi. Middleware bisa protect route sebelum halaman dirender. Di Astro, ini bisa dilakukan tapi butuh setup API endpoint eksternal atau SSR mode yang mengubah karakteristik Astro jadi lebih mirip Next.js.

E-commerce dengan cart dan checkout. State cart, proses checkout, payment gateway integration, order history — semua butuh server-side logic dan session. Next.js adalah pilihan natural. Astro bisa jadi storefront static, tapi cart logic akan di-offload ke client-side JavaScript atau API terpisah, yang jauh lebih kompleks dikelola.

API routes bawaan. Next.js bisa sekaligus jadi backend API. Untuk proyek Indonesia yang tim-nya kecil dan tidak mau maintain dua codebase (frontend + backend terpisah), ini practical.

Dashboard internal. Admin panel, CMS interface, internal tools yang dipakai karyawan. Interaktif, data fresh, banyak form dan state — ini Next.js territory.

Next.js 15 highlights yang relevan

Partial Prerendering (stable di 15) memungkinkan satu halaman punya bagian static dan bagian dynamic bersamaan — navigasi dan shell halaman dirender statically, konten dynamic load menyusul. Ini menarik untuk proyek hybrid yang selama ini terpaksa pilih antara full SSR dan full SSG.

Turbopack sudah lebih mature di versi 15 — dev server start lebih cepat, terutama terasa di proyek medium-large.

---

Kapan Astro 5

Astro 5 mengambil pendekatan berbeda dari framework React mainstream: zero JS by default. HTML yang dikirim ke browser adalah static HTML murni kecuali Anda explicitly mengatakan komponen ini butuh hydration.

Use case yang tepat untuk Astro 5

Blog dan media. Astro didesain untuk content sites. MDX support built-in, content collections dengan schema validation, dan proses build yang menghasilkan static HTML per artikel. Untuk blog 500 artikel, build Astro menghasilkan 500 HTML files yang bisa di-serve dari CDN tanpa server.

Company profile. Halaman About, Services, Contact, Team — kontennya tidak berubah per user, tidak ada login, tidak ada cart. Untuk ini, mengirim bundle React ke browser adalah overhead yang tidak perlu. Astro skip ini by default.

Landing page dan marketing site. Conversion-focused pages butuh load cepat. Astro menghasilkan PageSpeed score secara natural lebih tinggi karena tidak ada JavaScript yang memblokir rendering. Untuk landing page yang harganya diukur dari conversion rate, 0.5 detik lebih cepat itu bermakna.

Dokumentasi. Astro dengan Starlight (official docs theme) adalah kombinasi yang sangat powerful untuk dokumentasi teknis. Navigasi, search, versioning — semuanya tersedia.

Portofolio. Zero overhead, static, bisa deploy gratis ke Netlify atau Cloudflare Pages.

---

Island Architecture — keunggulan kunci Astro

Ini konsep yang membedakan Astro dari framework lain: islands of interactivity.

Bayangkan halaman sebagai lautan HTML statis, dengan beberapa “pulau” kecil yang interaktif. Pulau-pulau inilah yang di-hydrate dengan JavaScript — sisanya tetap HTML murni.

---
// Halaman ini: mostly static
---

<html>
  <body>
    <!-- Static — tidak ada JS dikirim -->
    <header>Company Name</header>
    <main>
      <h1>Tentang Kami</h1>
      <p>Teks statis...</p>
    </main>

    <!-- Island — hanya ini yang di-hydrate dengan React -->
    <ContactForm client:load />

    <!-- Static lagi -->
    <footer>© 2026</footer>
  </body>
</html>

client:load memberitahu Astro: hydrate komponen ini saat page load. Sisanya tidak dikirim JavaScript sama sekali.

Pilihan hydration strategy:

• client:load — hydrate langsung saat halaman dimuat
• client:idle — hydrate saat browser idle (tidak mengganggu first load)
• client:visible — hydrate saat komponen masuk viewport (lazy)
• client:media — hydrate berdasarkan media query

Untuk company profile yang mayoritas static tapi punya contact form, navigasi mobile, atau newsletter signup — Astro kirim JS hanya untuk bagian tersebut. Hasilnya: bundle size fraction dari Next.js untuk use case yang sama.

---

DX Comparison

Next.js — keuntungan

Ekosistem React paling mature. Library, tutorial, Stack Overflow answer — semuanya tersedia. Di Indonesia, developer yang familiar dengan Next.js jauh lebih banyak daripada yang familiar dengan Astro. Kalau tim Anda perlu hire, lebih mudah cari developer Next.js.

Vercel (pembuat Next.js) invests heavily di DX — error messages, Fast Refresh, deployment integration. Kalau Anda deploy ke Vercel, experience-nya seamless.

Astro — keuntungan

Simpler untuk content-focused developer. Sintaks Astro (.astro files) adalah superset HTML — kalau bisa nulis HTML dan JavaScript, bisa pakai Astro. Tidak perlu paham semua konsep React seperti hooks, context, dan effects untuk buat halaman yang bagus.

Config lebih minimal. Next.js next.config.js bisa jadi kompleks — redirects, headers, image optimization, middleware config. Astro config untuk content site biasanya jauh lebih simpel.

Build output predictable. Astro menghasilkan static files yang bisa di-inspect langsung — Anda tahu persis HTML apa yang akan diterima browser.

---

Untuk konteks Indonesia khususnya

Ini dimensi yang sering tidak masuk perbandingan teknis global tapi relevan untuk proyek Indonesia:

Mobile-first, 4G majority. Mayoritas pengguna internet Indonesia akses lewat mobile dengan koneksi 4G yang tidak selalu stabil, terutama di luar kota. Bundle JavaScript besar berarti halaman lambat dan bounce rate tinggi. Untuk content sites yang audiensnya luas (bukan hanya pengguna di area dengan koneksi bagus), ini concern nyata.

PageSpeed sebagai sinyal SEO. Google menggunakan Core Web Vitals sebagai faktor ranking. Astro secara natural menghasilkan skor lebih tinggi untuk content sites karena minim JavaScript. Untuk bisnis lokal di Indonesia yang bersaing di local SEO, ini keunggulan konkret.

Bandwidth cost. Beberapa pengguna masih di data plan yang limited. Halaman yang load lebih ringan adalah user experience yang lebih baik. Next.js app sederhana bisa ship 200-400KB JavaScript ke browser. Astro untuk halaman setara bisa di bawah 10KB.

Biaya hosting. Astro static output bisa di-host di Cloudflare Pages atau Netlify gratis selamanya untuk konten yang tidak butuh server. Next.js membutuhkan server atau serverless functions — tetap bisa murah, tapi tidak gratis kalau traffic mulai besar.

---

Verdict

Next.js 15 kalau:

• Ada login dan autentikasi user
• Data berubah per user atau per request
• Butuh API routes sebagai backend
• E-commerce dengan cart dan checkout
• Dashboard atau admin panel

Astro 5 kalau:

• Blog, company profile, marketing site, dokumentasi, portofolio
• Prioritas PageSpeed dan SEO
• Konten sama untuk semua pengunjung
• Tim kecil, tidak mau maintain complexity yang tidak perlu
• Budget hosting terbatas

Jangan pakai Next.js untuk company profile atau blog karena “lebih terkenal.” Anda akan ship hundreds of KB JavaScript untuk halaman yang seharusnya static HTML.

Jangan pakai Astro untuk platform SaaS atau e-commerce karena “lebih cepat.” Anda akan reverse-engineer fitur yang sudah ada di Next.js.

Keduanya adalah tools yang excellent untuk use case yang tepat. Pilih berdasarkan apa yang proyek butuhkan, bukan berdasarkan mana yang lebih sering muncul di Twitter.