Rute dinamis & getStaticPaths

getStaticPaths adalah tempat kamu memutuskan berapa banyak halaman yang dirender saat build. Untuk portal berita dengan arsip besar, keputusan itu punya konsekuensi langsung ke lama build dan ke biaya.

Bentuk dasarnya

---
// src/pages/berita/[slug].astro
import type { GetStaticPaths } from "astro";
import { ambilSemuaSlugTerbit, ambilArtikelPublik } from "@/lib/artikel";

export const getStaticPaths: GetStaticPaths = async () => {
  const artikel = await ambilSemuaSlugTerbit();

  return artikel.map((a) => ({
    params: { slug: a.slug },
    props: { artikel: a },     // ikut terkirim, tidak perlu kueri lagi
  }));
};

const { artikel } = Astro.props;
---
<h1>{artikel.judul}</h1>

Nama kunci di params harus sama persis dengan nama di kurung siku pada nama berkas. Berkas [slug].astro butuh params: { slug: … }. Salah nama tidak menghasilkan error yang jelas — halamannya cuma tidak pernah dibuat.

Keputusan yang sebenarnya: berapa yang di-prerender?

Portal berita punya distribusi trafik yang sangat timpang. Beberapa ribu artikel terbaru menyerap hampir seluruh pembaca; ratusan ribu artikel arsip diakses sesekali dari pencarian. Merender semuanya saat build berarti membayar waktu build untuk halaman yang mungkin tidak dibuka sebulan sekali.

Hibrida: prerender yang panas saja

---
// Prerender 500 artikel terbaru; sisanya dirender saat diminta.
export const prerender = true;

export const getStaticPaths: GetStaticPaths = async () => {
  const panas = await ambilArtikelTerbaru("semua", 500);
  return panas.map((a) => ({ params: { slug: a.slug }, props: { artikel: a } }));
};
---

Ini butuh output: "server" plus fallback yang sesuai di adapter — dan jujur saja, kerumitannya jarang sepadan kalau CDN-mu sudah bekerja. Ketahui bahwa polanya ada, lalu pilih on-demand sampai ada pengukuran yang menuntut sebaliknya.

Paginasi

---
// src/pages/berita/[...halaman].astro  →  /berita, /berita/2, /berita/3
import type { GetStaticPaths, Page } from "astro";
import { ambilSemuaTerbit } from "@/lib/artikel";

export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
  const artikel = await ambilSemuaTerbit();
  return paginate(artikel, { pageSize: 20 });
};

const { page } = Astro.props as { page: Page<Artikel> };
---
<h1>Berita — halaman {page.currentPage} dari {page.lastPage}</h1>

<ul>
  {page.data.map((a) => <li><a href={`/berita/${a.slug}`}>{a.judul}</a></li>)}
</ul>

<nav>
  {page.url.prev && <a href={page.url.prev} rel="prev">← Sebelumnya</a>}
  {page.url.next && <a href={page.url.next} rel="next">Berikutnya →</a>}
</nav>

Beberapa parameter dan rute rest

---
// src/pages/perusahaan/[kode]/[tab].astro
export const getStaticPaths: GetStaticPaths = async () => {
  const perusahaan = await ambilSemuaPerusahaan();
  const tab = ["ringkasan", "keuangan", "pemegang-saham"];

  return perusahaan.flatMap((p) =>
    tab.map((t) => ({ params: { kode: p.kode, tab: t }, props: { perusahaan: p } })),
  );
};
---

// Rute rest: [...jalur].astro
// /a/b/c  →  Astro.params.jalur === "a/b/c"
// /       →  Astro.params.jalur === undefined  (bukan string kosong)

Perbedaan undefined dan string kosong itu nyata dan menggigit. params.jalur.split("/") akan meledak di rute akar. Selalu tangani undefined-nya.

Kesalahan yang paling sering