Fetching Data di Client Component

Penjelasan

Kalau data yang di-fetch bergantung pada interaksi user SETELAH halaman dimuat (mis. hasil pencarian saat mengetik, bukan data awal halaman), fetch dilakukan di Client Component lewat useEffect — sama persis polanya dengan React biasa, karena Client Component memang berperilaku seperti komponen React murni.

Contoh Konsep

'use client';

import { useState, useEffect } from 'react';

export default function HasilPencarian({ kataKunci }) {
    const [hasil, setHasil] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (!kataKunci) return;

        setLoading(true);
        fetch(`/api/cari?q=${kataKunci}`)
            .then((res) => res.json())
            .then((data) => setHasil(data))
            .finally(() => setLoading(false));
    }, [kataKunci]);

    if (loading) return <p>Mencari...</p>;

    return (
        <ul>
            {hasil.map((item) => <li key={item.id}>{item.nama}</li>)}
        </ul>
    );
}

Praktikum

Buat Client Component DaftarKomentar yang menerima props idArtikel. Di useEffect (dependency [idArtikel]), fetch dari `/api/artikel/${idArtikel}/komentar`, simpan hasilnya ke state komentar, dan tampilkan sebagai daftar.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Kalau data yang di-fetch TIDAK bergantung pada interaksi user setelah halaman dimuat (mis. daftar produk awal), lebih baik fetch di Server Component (materi sebelumnya) daripada di Client Component — Server Component lebih cepat karena datanya sudah ada di HTML awal, tidak perlu request tambahan dari browser setelah halaman dimuat.