Bagaimana Cara Menggunakan Async Server Component Next Js untuk Fetch Data?

Ditulis oleh Next.js

Buat komponennya async lalu panggil await fetch() langsung di body Server Component. Itu cara menggunakan async Server Component Next.js untuk fetch data di App Router, tanpa useEffect dan tanpa use client.

Bentuk Async yang Valid di App Router

Fungsi komponen async hanya berlaku untuk Server Component. Bentuk paling umum yaitu export default async function Page().

Di dalamnya kamu bisa menunggu fetch API atau query database sebelum JSX dirender di server.

export default async function Page() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

File di atas tidak memakai use client, hook, atau browser API.

Langkah Fetch Data dengan Async Server Component

1. Buat file page.tsx sebagai Server Component async.
2. Tunggu data di server dengan await, lalu render JSX dari hasilnya.
3. Teruskan data yang sudah siap render sebagai props ke Client Component untuk bagian interaktif.

  • Jangan pakai useState atau useEffect di file async.
  • Jangan menulis event handler seperti onClick di komponen async.
  • Jangan mengakses window, document, atau localStorage di sana.
  • Pindahkan tombol, form, dan state ke Client Component terpisah.

BACA JUGA:

Batasan Async dan Pola yang Benar

Pola Status Catatan
async Page Valid Pola utama untuk fetch data halaman
async layout bersyarat Terbatas Hindari bila membuat layout ikut dinamis
async Client Component Dilarang Client Component harus fungsi sync

Client Component tetap sync dan menerima data lewat props. Logika klik, form, dan state tinggal di sana.

Untuk dua fetch yang tidak saling tergantung, jalankan paralel dengan Promise.all. Tangani kegagalan render dengan file error.js di folder route yang sama.

FAQ

Apakah semua Server Component harus async?

Tidak. Buat async hanya bila komponen tersebut memakai await di dalamnya.

Mengapa async Client Component error?

Karena Client Component harus sync, jadi pindahkan logika async ke effect, event handler, atau Server Component.

Di mana validasi data async?

Validasi di server sebelum render dan jangan hanya mengandalkan validasi client.

Artikel Terkait