Mengambil data dari API di Astro

Satu fetch tanpa timeout di frontmatter adalah satu-satunya hal yang dibutuhkan untuk membuat portalmu tergantung pada uptime pihak lain.

Bentuk paling sederhana, dan kenapa ia berbahaya

---
// JANGAN begini di produksi
const res = await fetch("https://api-data.internal/perusahaan/BBCA");
const perusahaan = await res.json();
---

Tiga hal salah sekaligus:

1. Tidak ada timeout. fetch di Node akan menunggu selama koneksi terbuka. API yang menggantung berarti halamanmu menggantung — dan tiap request yang menggantung memegang satu koneksi ALB dan satu slot di event loop.
2. Tidak ada pemeriksaan status. fetch hanya melempar untuk kegagalan jaringan. Respons 500 dianggap sukses, lalu .json() yang meledak — dengan pesan error tentang JSON, bukan tentang API yang mati.
3. Tidak ada validasi. perusahaan bertipe any. Seluruh keuntungan TypeScript hilang di baris ini.

Bentuk yang layak produksi

// src/lib/api.ts
export class GalatApi extends Error {
  constructor(pesan: string, readonly status?: number) {
    super(pesan);
  }
}

export async function ambilJson<T>(
  url: string,
  opsi: RequestInit & { timeoutMs?: number } = {},
): Promise<T> {
  const { timeoutMs = 3000, ...sisa } = opsi;

  const res = await fetch(url, {
    ...sisa,
    signal: AbortSignal.timeout(timeoutMs),
    headers: {
      Accept: "application/json",
      "User-Agent": "portal-berita/1.0",
      ...sisa.headers,
    },
  });

  if (!res.ok) {
    throw new GalatApi(`${url} menjawab ${res.status}`, res.status);
  }

  return res.json() as Promise<T>;
}

AbortSignal.timeout() tersedia di Node 22 tanpa dependensi apa pun. Tiga detik adalah titik awal yang masuk akal untuk API internal; untuk API pihak ketiga yang memang lambat, naikkan — tapi selalu ada angkanya.

Paralel, bukan berurutan

---
// BURUK: 120 ms + 90 ms + 150 ms = 360 ms
const berita = await ambilJson<Berita[]>(URL_BERITA);
const kurs = await ambilJson<Kurs>(URL_KURS);
const indeks = await ambilJson<Indeks>(URL_INDEKS);
---

---
// BAIK: yang terlama saja = 150 ms
const [berita, kurs, indeks] = await Promise.all([
  ambilJson<Berita[]>(URL_BERITA),
  ambilJson<Kurs>(URL_KURS),
  ambilJson<Indeks>(URL_INDEKS),
]);
---

Ini kesalahan yang paling sering di beranda portal, karena kodenya dibaca dari atas ke bawah dan await berurutan terasa alami. Setiap kali kamu menulis dua await berturut-turut, tanyakan: apakah yang kedua butuh hasil yang pertama? Kalau tidak, gabungkan.

Kegagalan sebagian: allSettled

---
const [beritaHasil, kursHasil] = await Promise.allSettled([
  ambilJson<Berita[]>(URL_BERITA),
  ambilJson<Kurs>(URL_KURS),
]);

// Berita wajib — tanpa ini halaman tidak ada gunanya
if (beritaHasil.status === "rejected") {
  Astro.response.status = 503;
  return Astro.rewrite("/gangguan");
}
const berita = beritaHasil.value;

// Kurs opsional — widget-nya sembunyi kalau gagal
const kurs = kursHasil.status === "fulfilled" ? kursHasil.value : null;

// Jangan simpan kegagalan di edge selama lima menit.
const ttl = kurs ? 300 : 30;
Astro.response.headers.set("Cache-Control", `public, s-maxage=${ttl}`);
---

{kurs && <WidgetKurs data={kurs} />}

Peta keputusan: setiap API luar butuh jawaban ini

Baris terakhir itu penting. Data yang bergantung pada siapa pembacanya tidak boleh diambil di frontmatter halaman yang di-cache — hasilnya akan ikut tersimpan di edge dan tersaji ke orang lain. Tempatnya di server island (Fase 1).

Jangan panggil API-mu sendiri lewat HTTP

---
// BURUK: halaman memanggil endpoint-nya sendiri
const res = await fetch(new URL("/api/artikel.json", Astro.url));
---

Ini menambah satu round-trip HTTP penuh — lewat loopback, lewat middleware lagi, dan menghabiskan satu koneksi server untuk melayani servermu sendiri. Di trafikmu itu menggandakan jumlah request yang harus ditangani Node. Panggil fungsinya langsung:

---
// BAIK
import { ambilArtikelTerbaru } from "@/lib/artikel";
const artikel = await ambilArtikelTerbaru("semua", 20);
---

Endpoint /api/artikel.json tetap ada untuk konsumen luar. Halamanmu sendiri memakai fungsi yang sama yang dipakai endpoint itu — satu sumber logika, nol hop tambahan.