Cara Mengatasi Server Component Serialization Error karena Props Tidak Serializable

Ditulis oleh Next.js

Perbaiki cara mengatasi server component serialization error dengan mengubah props yang dikirim dari Server Component ke Client Component menjadi data serializable. Data serializable berarti plain object, array, string, number, boolean, atau null. Fungsi, Date mentah, Map, Set, dan class instance tidak bisa lewat batas server ke client.

Penyebab Server Component Serialization Error

App Router merender Server Component di server, lalu mengirim hasilnya ke client sebagai payload. Payload ini memakai format serialisasi React Flight, bukan JSON biasa.

  • Fungsi atau event handler seperti onClick ikut dikirim sebagai props.
  • Object Date, Map, Set, BigInt, Symbol, atau undefined ikut terkirim mentah.
  • Instance class dari ORM atau library ikut terkirim lengkap dengan method internal.
  • Stack error biasanya menyebut nama props dan file Client Component tujuan, periksa bagian itu dulu.

Tabel Cek Cepat Props yang Gagal Serialize

Prioritaskan perbaikan di Server Component pengirim, bukan di Client Component penerima.

Masalah Penyebab Solusi
Fungsi handler Function tidak serializable Pindah fungsi ke Client Component
Date mentah Object Date ikut terkirim Kirim sebagai string ISO
Map, Set, class Struktur non-plain Ubah ke plain object atau array

BACA JUGA:

Langkah Memperbaiki Props Tidak Serializable

  1. Isolasi props bermasalah dari pesan error, misalnya createdAt atau onSelect.
  2. Ubah data menjadi plain object, string, atau number sebelum dikirim ke Client Component.
  3. Konversi Date dengan toISOString(), ubah Map atau Set menjadi array.
  4. Pindahkan fungsi dan state interaktif ke dalam Client Component, Server Component hanya mengirim data awal.
// app/users/page.tsx, Server Component
import UserList from "./user-list";

export default async function Page() {
  const users = await getUsers();
  const safeUsers = users.map((u) => ({
    id: u.id,
    name: u.name,
    createdAt: u.createdAt.toISOString(),
  }));
  return <UserList users={safeUsers} />;
}
// app/users/user-list.tsx
"use client";

export default function UserList({ users }) {
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>
          {u.name} - {new Date(u.createdAt).toLocaleDateString("id-ID")}
        </li>
      ))}
    </ul>
  );
}

FAQ

Apakah semua props harus diubah jadi string?

Tidak. Plain object, array, number, boolean, dan null tetap aman, hanya tipe non-plain yang perlu dikonversi.

Kenapa use client tidak memperbaiki serialization error?

Directive itu hanya menandai komponen berjalan di client, batas serialisasi antara server dan client tetap berlaku.

Kapan data diambil ulang di Client Component?

Ambil ulang di client bila data butuh interaksi browser, polling, atau akses setelah render awal.

Artikel Terkait