Astro, Static-First, dan Kenapa Arsitektur Ini Hasilkan SEO Terkuat untuk Situs Konten

Situs yang loadnya cepat dan mudah ditemukan Google bukan kebetulan — itu hasil arsitektur yang dipilih dengan sadar. Saya pakai Astro untuk membangun site kurasi prompt AI, dan hasilnya: Lighthouse 100 di semua kategori SEO, load time di bawah 1 detik, full-text search tanpa backend. Ini breakdown arsitekturnya.

Kenapa Arsitektur Menentukan SEO

Kebanyakan developer masih membangun situs konten di atas framework JavaScript yang berat — React, Next.js dengan client-side rendering, atau CMS berbasis database. Hasilnya: Time to First Byte (TTFB) tinggi, JavaScript bundle besar, dan crawler harus menunggu JS selesai execute sebelum bisa membaca konten.

Google mengindeks konten yang bisa dibaca. Kalau kontenmu ada di balik hydration JS yang lambat, crawler mungkin melewatinya. Static HTML yang digenerate saat build time tidak punya masalah ini — konten ada langsung di respons pertama, tanpa menunggu apapun.

Astro dan Pendekatan Static-First

Astro dibangun dengan filosofi yang berbeda dari framework modern lainnya: zero JavaScript by default. Tidak ada runtime JS yang dikirim ke browser kecuali kamu secara eksplisit memintanya. Setiap halaman digenerate menjadi HTML statis saat build time.

Untuk situs konten seperti direktori prompt AI, ini berarti:

• Setiap prompt punya halaman sendiri — URL kanonik, metadata unik, Open Graph tags yang tepat. Bukan satu halaman SPA yang kontennya diload via fetch.
• Setiap kategori punya halaman statis — crawler bisa crawl semuanya tanpa JavaScript execution.
• Build time routing — tidak ada dynamic routing di runtime, tidak ada server yang harus dijaga.

Content Collections: Struktur Data yang Konsisten

Astro punya fitur bernama Content Collections — cara standar untuk mengelola data terstruktur menggunakan Markdown dengan frontmatter. Setiap prompt disimpan sebagai file Markdown dengan schema yang terdefinisi:

---
title: "Prompt untuk Research Brief"
category: "research"
useCase: "content-creation"
model: "claude"
tags: ["research", "brief", "content"]
difficulty: "beginner"
---

[isi prompt di sini]

Astro memvalidasi schema ini saat build. Kalau ada field yang hilang atau tipenya salah, build gagal — bukan silent error di production. Ini yang dimaksud dengan data terstruktur yang bisa dipercaya.

Dari data terstruktur ini, Astro generate:

• Halaman individual per prompt (/prompts/[slug])
• Halaman listing per kategori (/category/[category])
• Sitemap otomatis dengan semua URL
• Open Graph tags unik per halaman berdasarkan frontmatter

Pagefind: Full-Text Search Tanpa Backend

Salah satu tantangan situs konten statik: search. Opsi biasanya database (butuh server) atau Algolia (butuh akun dan biaya). Pagefind menyelesaikan ini secara elegan.

Pagefind berjalan saat build time — ia crawl semua HTML yang digenerate Astro dan membuat index search yang disimpan sebagai file statik. Hasilnya: search yang di-bundle bersama situs, tanpa API call ke mana pun saat user mengetik.

Ini satu-satunya bagian yang menambahkan JavaScript ke browser — dan hanya di halaman yang punya search widget. Prinsip Islands Architecture Astro: hydrate hanya yang perlu, sisanya tetap HTML mati.

Dari sisi SEO, ini juga menguntungkan: karena tidak ada server-side search, semua konten ada di halaman statis yang bisa di-crawl. Crawler tidak perlu melakukan search request untuk menemukan konten — semuanya sudah ada di sitemap.

Metadata dan Crawlability

Setiap halaman yang digenerate Astro punya metadata yang berasal langsung dari data prompt:

• <title> unik per halaman — bukan template generik
• <meta name="description"> dari frontmatter
• Open Graph tags untuk preview di social media
• Canonical URL yang konsisten
• Structured data (JSON-LD) untuk rich results

Dengan Astro, metadata ini digenerate di komponen layout sekali, berlaku untuk semua halaman. Tidak ada risiko lupa tambah meta description di satu halaman dari ratusan.

Deployment: Zero Server Infrastructure

Astro output HTML, CSS, dan minimal JS — bisa di-deploy ke Cloudflare Pages, Netlify, atau Vercel dengan gratis tier yang cukup untuk sebagian besar use case. Tidak ada server yang harus di-maintain, tidak ada database yang perlu dijaga, tidak ada downtime karena resource limit.

Build time untuk ratusan halaman: di bawah 30 detik. Deploy ke edge CDN otomatis. TTFB dari Cloudflare Pages: biasanya di bawah 50ms dari lokasi manapun karena konten di-serve dari edge node terdekat.

Hasilnya: Lighthouse 100 Semua Kategori SEO

Dengan kombinasi static HTML, metadata yang tepat per halaman, dan zero runtime JS untuk konten — Lighthouse tidak punya banyak yang bisa dikomplain. Performance tinggi karena tidak ada JS blocker. SEO tinggi karena setiap elemen metadata ada. Accessibility bisa dikontrol di komponen karena HTML-nya langsung, tidak di-inject runtime.

Ini bukan sulap. Ini hasil dari memilih arsitektur yang tepat untuk jenis konten yang tepat.

Kapan Astro Bukan Pilihan Tepat

Astro paling efektif untuk situs yang kontennya relatif stabil dan tidak butuh interaktivitas berat per halaman: blog, direktori, dokumentasi, landing page, portfolio. Untuk aplikasi dengan state kompleks per user, real-time data, atau banyak interaksi yang butuh JS — framework SPA lebih masuk akal. Pilih berdasarkan kebutuhan nyata, bukan tren.