Belajar Astro - Data Fetching & Server-side Rendering

#Pendahuluan

Situs konten jarang berdiri sendiri — sering kali butuh data dari API eksternal, database, atau layanan CMS. Episode 6 ini membahas cara Astro mengambil data: kapan data diambil saat build time, kapan diambil per request dengan server-side rendering (SSR), dan bagaimana kedua mode ini bisa hidup berdampingan.

Konsep penting yang akan kalian pelajari adalah time of data fetching. Di mode statis, data diambil sekali saat build dan hasilnya terkunci di HTML. Di mode SSR, data diambil setiap ada request sehingga selalu segar. Masing-masing punya trade-off yang harus kalian pahami.

Episode ini juga memperkenalkan content layer Astro 5, yang menyatukan sumber data Markdown, remote API, dan database ke dalam satu API collection.

#Data Fetching Saat Build Time

#Fetch di Frontmatter

Karena frontmatter berjalan di build time, kalian bisa memakai fetch langsung di sana. Contoh mengambil pengguna dari API:

Fetch data di frontmatter

---
interface Pengguna {
  id: number;
  name: string;
}
 
const res = await fetch("https://api.contoh.dev/pengguna");
const pengguna: Pengguna[] = await res.json();
---
 
<h1>Daftar Pengguna</h1>
<ul>
  {pengguna.map((u) => <li key={u.id}>{u.name}</li>)}
</ul>

Kode await fetch("...") dijalankan sekali saat npm run build. Hasil HTML terkunci sampai build berikutnya — cocok untuk data yang jarang berubah.

#Pola getStaticPaths untuk Banyak Halaman

Jika setiap item data ingin menjadi halaman sendiri, kombinasikan dengan getStaticPaths. Ini analog dengan getStaticProps pada framework lain: daftar item diambil sekali, lalu setiap item dirender menjadi halaman statis terpisah.

Halaman statis per item API

---
export async function getStaticPaths() {
  const res = await fetch("https://api.contoh.dev/artikel");
  const artikel = await res.json();
  return artikel.map((item) => ({ params: { slug: item.slug } }));
}
 
const { slug } = Astro.params;
---
 
<h1>Artikel {slug}</h1>

#Integrasi API Eksternal dan Content Layer

#Content Layer API di Astro 5

Astro 5 memperkenalkan content layer API yang menyatukan berbagai sumber data dalam satu collection. Definisi collection diperluas dengan loader glob untuk file lokal atau loader kustom untuk sumber remote:

Collection dengan loader glob

import { defineCollection } from "astro:content";
import { glob } from "astro/loaders";
 
const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
});

Dengan content layer, getCollection("blog") tetap sama, tetapi sumbernya bisa fleksibel — dari file lokal hingga API jarak jauh. Episode 11 akan memakai pola ini untuk CMS.

#Menangani Kesalahan API

Fetch di build time harus tangguh. Jika API mati, build bisa gagal. Biasakan memeriksa status response dan menyediakan fallback:

Fetch dengan penanganan error

const res = await fetch("https://api.contoh.dev/data");
if (!res.ok) {
  console.error("Gagal mengambil data:", res.status);
  return [];
}
const data = await res.json();

#Server-Side Rendering di Astro

#Mengaktifkan Mode SSR dengan Adapter

Untuk data yang harus selalu segar, aktifkan mode server. Pertama pasang adapter — misalnya untuk Node.js:

npx astro add node

Kemudian atur output di astro.config.mjs:

astro.config.mjs mode server

import { defineConfig } from "astro/config";
import node from "@astrojs/node";
 
export default defineConfig({
  output: "server",
  adapter: node({ mode: "standalone" }),
});

Dengan output: "server", setiap request dirender di server. File .astro kini bisa membaca request langsung:

Membaca query parameter di SSR

---
const cari = Astro.url.searchParams.get("q") ?? "";
const res = await fetch(`https://api.contoh.dev/cari?q=${cari}`);
const hasil = await res.json();
---
 
<h1>Hasil pencarian: {cari}</h1>
<ul>
  {hasil.map((item) => <li>{item.title}</li>)}
</ul>

Pada kode di atas, Astro.url.searchParams hanya tersedia di mode server — di mode statis nilai tersebut sudah terkunci saat build.

#Progressive Hydration dan Partial Hydration

#Dua Mode dalam Satu Situs

Astro memungkinkan mode hybrid: halaman statis secara default, tetapi beberapa halaman di-render di server. Setel prerender = true di frontmatter halaman statis, atau biarkan halaman dirender di server. Prop output: "server" membuat sebagian besar halaman dirender server, dan prerender = true mengecualikan halaman tertentu.

Halaman statis dalam proyek server

---
export const prerender = true;
---
 
<h1>Halaman ini tetap dibangun saat build time</h1>

#Kapan Memakai Mode Apa

Aturan praktisnya:

• Statis: konten yang jarang berubah — artikel, dokumentasi, landing page.
• Server: data personal per user, hasil pencarian, halaman dengan token auth.

Hydration parsial di episode 7 akan melengkapi gambaran ini: konten diambil kapan saja, tetapi JavaScript hanya dikirim ke bagian interaktif.

#Penutup

Episode 6 membuka dua cara Astro mengambil data: saat build time dengan fetch di frontmatter dan getStaticPaths, serta saat request dengan mode SSR dan adapter. Content layer API menyatukan sumber data lokal dan remote, dan mode hybrid memadukan keduanya dalam satu project.

Inti yang harus dibawa pulang:

• Fetch di frontmatter dijalankan sekali saat build time.
• getStaticPaths menghasilkan banyak halaman statis dari satu API.
• Content layer API menyatukan file lokal dan sumber remote.
• npx astro add node mengaktifkan mode server dengan adapter.
• Astro.url.searchParams hanya bekerja di mode server.
• Mode hybrid memadukan halaman statis dan server dalam satu project.

Di episode 7 selanjutnya kita akan membahas interactivity dan hydration: partial hydration dengan client:load, client:idle, dan client:visible, memakai komponen React, Vue, Svelte, atau Solid, serta optimasi bundle JavaScript. Ini kunci agar situs tetap interaktif tanpa kehilangan kecepatan.