Jangan Dipaksa Async: Cara Mengatasi Async Client Component Next Js

Ditulis oleh Next.js

Solusi cara mengatasi async client component next js adalah memindahkan await ke Server Component, bukan memaksa fungsi Client Component jadi async. React membutuhkan Client Component yang sinkron karena ia dirender ulang di browser dan menangani state serta event. Jika butuh data server untuk UI interaktif, fetch di Server Component lalu teruskan lewat props.

Kenapa Async Client Component Ditolak di App Router

Client Component dengan direktif "use client" tidak boleh dideklarasikan sebagai async function. Fungsi async mengembalikan Promise, sedangkan React di browser butuh elemen yang bisa dirender langsung.

Peran keduanya berbeda. Server Component cocok untuk fetch data, akses database, dan membaca cookie. Client Component cocok untuk useState, useEffect, klik, form interaktif, dan API browser seperti window.

Baca pesan error asli di terminal sebelum mengubah kode. Error biasanya menunjuk file dan baris yang memakai pola async bersama "use client".

Tabel Penyebab dan Gejala Async Client Component

Masalah Pemicu Arah Perbaikan
Komponen async pakai "use client" Await fetch di body komponen Pindah fetch ke Server Component
Await langsung di event render Data diambil saat render client Pakai useEffect atau SWR
Hydration tidak cocok Data dinamis beda server dan client Kunci loading state dan sumber data

BACA JUGA:

Cara Mengatasi Async Client Component Next Js dengan Pola Benar

Ikuti langkah ini agar fetch tetap di server dan interaktivitas tetap di client:

  1. Buat induk sebagai Server Component async untuk mengambil data.
  2. Buat anak sebagai Client Component sinkron untuk tombol, form, atau state.
  3. Teruskan data server ke anak melalui props, bukan fetch ulang tanpa perlu.
  4. Jika data memang milik browser, ambil di Client Component dengan useEffect plus state loading.

Sebelum:

"use client";

export default async function Tombol() {
  const res = await fetch("/api/produk");
  const data = await res.json();
  return <button>{data.jumlah}</button>;
}

Sesudah:

export default async function Halaman() {
  const res = await fetch("https://api.example.com/produk");
  const data = await res.json();
  return <Tombol jumlah={data.jumlah} />;
}
"use client";

export default function Tombol({ jumlah }) {
  return <button>{jumlah}</button>;
}
  • Tidak ada hook seperti useState di Server Component.
  • Tidak ada window, document, atau localStorage di Server Component.
  • Tidak ada async pada file yang memakai "use client".
  • Props yang dikirim ke client bisa diserialisasi.

FAQ

Apakah cukup hapus use client agar bisa async?

Bisa, tetapi komponen itu berubah menjadi Server Component dan tidak dapat memakai state, effect, atau event handler.

Kapan fetch tetap boleh di Client Component?

Boleh untuk data setelah interaksi, seperti pencarian, pagination client, atau data yang bergantung pada browser.

Bagaimana mengirim data async ke komponen interaktif?

Ambil data di Server Component async, lalu teruskan hasilnya sebagai props ke Client Component sinkron.

Artikel Terkait