Fetching Data: Cara Mengambil Data

Fetch di Server Component

Pola standar: buat fungsi async, panggil fetch, lalu await di komponen:

// app/artikel/page.tsx
async function getArtikel() {
  const res = await fetch("https://api.example.com/artikel");
  return res.json();
}

export default async function ArtikelPage() {
  const artikel = await getArtikel();
  return <DaftarArtikel data={artikel} />;
}

Next.js otomatis me-cache hasil fetch ini (dibahas detail di modul caching).

Paralel vs sekuensial

Kalau butuh dua data yang tidak saling tergantung, jalankan paralel dengan Promise.all biar tidak saling menunggu:

export default async function Page() {
  const [user, produk] = await Promise.all([getUser(), getProduk()]);
  return (
    <>
      <Profil user={user} />
      <Katalog produk={produk} />
    </>
  );
}

Kalau data kedua butuh hasil data pertama, sekuensial tidak bisa dihindari. Itu wajar.

Fetch di Client Component

Untuk data yang berubah karena interaksi user (misal filter atau pencarian), fetch di Client Component dengan useEffect atau library seperti SWR:

"use client";

import { useEffect, useState } from "react";

export default function Pencarian() {
  const [q, setQ] = useState("");
  const [hasil, setHasil] = useState([]);

  useEffect(() => {
    if (!q) return;
    fetch("/api/cari?q=" + q)
      .then((r) => r.json())
      .then(setHasil);
  }, [q]);

  return (
    <div>
      <input value={q} onChange={(e) => setQ(e.target.value)} />
      <p>Ditemukan: {hasil.length}</p>
    </div>
  );
}

Kesalahan umum pemula

• Fetch berantai yang sebenarnya bisa paralel. await getA() lalu await getB() padahal tidak saling tergantung. Pakai Promise.all dan hemat waktunya.
• Waterfall di komponen bersarang. Induk fetch, anak menunggu lalu fetch lagi. Naikkan fetch ke komponen yang sama atau paralelkan.
• Fetch di Client Component untuk data awal halaman. Data yang dibutuhkan saat halaman dibuka sebaiknya di-fetch di Server Component agar ikut ter-render di server.

Latihan singkat

1. Buat halaman yang butuh data user dan data produk dari dua API dummy. Ukur waktunya dengan sekuensial vs Promise.all.
2. Refactor satu fetch yang ada di useEffect menjadi fetch di Server Component, lalu oper datanya via props.

Rangkuman

• Fetch di Server Component adalah pola standar: fungsi async + await fetch.
• Data independen di-fetch paralel dengan Promise.all agar tidak saling menunggu.
• Hindari waterfall bertingkat di komponen bersarang.
• Fetch di Client Component hanya untuk data yang berubah karena interaksi user.

Catatan teknis: Hindari pola fetch-then-render bertingkat (waterfall) di beberapa komponen bersarang, di mana komponen anak menunggu data induk lalu fetch lagi. Gabungkan fetch di satu tempat sedekat mungkin dengan pemakai datanya, atau pakai paralelisasi.