Data Fetching di Server Component
Penjelasan
Karena Server Component dirender di server (bukan browser), komponennya BOLEH langsung berupa fungsi async dan memanggil fetch() atau query database langsung di dalamnya — TANPA perlu useEffect, useState untuk loading, atau library data-fetching tambahan seperti di React biasa. Next.js otomatis menunggu Promise-nya selesai sebelum mengirim HTML ke browser.
Contoh Konsep
// app/produk/page.js — Server Component, boleh langsung async
export default async function DaftarProduk() {
const res = await fetch('https://api.contoh.com/produk');
const produk = await res.json();
return (
<ul>
{produk.map((item) => <li key={item.id}>{item.nama}</li>)}
</ul>
);
}Praktikum
Buat Server Component async DaftarArtikel yang fetch dari 'https://api.contoh.com/artikel', lalu tampilkan sebagai daftar <li> dengan judul tiap artikel, key memakai item.id.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
Fungsi async langsung sebagai komponen HANYA berlaku untuk Server Component — Client Component ('use client') TIDAK BOLEH berupa fungsi async, untuk fetch data di Client Component tetap harus pakai useEffect seperti React biasa (dibahas di materi Fetching Data di Client Component).