Perbaiki dari Penyebabnya Cara Mengatasi Server Component Error Next Js

Ditulis oleh Next.js

Cara mengatasi server component error Next.js paling cepat: baca log terminal, bukan overlay browser. Overlay sering hanya menampilkan batas error, sedangkan penyebab asli seperti useState di Server Component atau window is not defined terlihat jelas di terminal.

Pola yang paling sering salah adalah menaruh semua kode di satu file lalu menutupnya dengan use client. Itu menyembunyikan error, bukan memperbaikinya. Pisahkan bagian interaktif ke Client Component kecil dan biarkan data fetching tetap di server.

Penyebab Server Component Error di App Router

Server Component berjalan di server. Ia tidak mengenal lifecycle browser, event klik, atau hook React untuk state.

  • Hook client-only seperti useState, useEffect, useRef, dan useContext dipakai langsung di Server Component.
  • Event handler seperti onClick, onChange, dan onSubmit ditulis di komponen server.
  • Browser API seperti window, document, localStorage, dan navigator dijalankan saat render server.
  • Import komponen client ke server tanpa batas jelas sehingga seluruh pohon ikut menjadi client.
  • Fetch async ditulis berurutan padahal bisa paralel, lalu error dilempar tanpa error.js.

Sebelum mengubah kode, salin pesan lengkap dari terminal. Cari baris pertama yang menyebut nama file dan nomor baris milikmu, bukan baris milik node_modules.

Tabel Troubleshooting Server Component Error

Urutkan perbaikan dari error terminal dulu, baru cek tampilan browser.

Masalah Penyebab Solusi
Hook hanya bisa dipakai di Client Component useState atau useEffect ada di file server Pindahkan ke file dengan use client
window is not defined Browser API dibaca saat render server Pindahkan ke event atau useEffect client
Event handler tidak jalan onClick ditulis di Server Component Isolasi tombol ke Client Component
Data lambat lalu error timeout Fetch berurutan dan tanpa penanganan error Paralelkan fetch, tangani error per komponen

BACA JUGA:

Cara Memperbaiki Server Component Error Langkah demi Langkah

Ikuti urutan ini agar perbaikan tidak melebar ke seluruh aplikasi.

  1. Isolasi komponen bermasalah. Nonaktifkan sementara import anak sampai error hilang, lalu aktifkan satu per satu.
  2. Pindahkan kode client-only. Hook, event, dan akses browser masuk ke Client Component kecil di bawah Server Component.
  3. Perbaiki fetch dan props. Pastikan fungsi async hanya ada di server, lalu kirim hasilnya sebagai props serializable ke client.
  4. Cek ulang dengan build. Jalankan build production lalu periksa kembali log terminal dan perilaku render.
// app/dashboard/page.tsx
export default async function DashboardPage() {
  const stats = await getStats();
  return <RefreshButton total={stats.total} />;
}
// app/dashboard/refresh-button.tsx
'use client';
export default function RefreshButton({ total }: { total: number }) {
  return <button onClick={() => window.location.reload()}>Total: {total}</button>;
}

Jangan langsung menambah no-store atau mengubah semua route menjadi dinamis. Itu hanya menutupi masalah cache dan membuat performa turun.

FAQ

Apakah semua error harus diberi use client?

Tidak. Beri use client hanya pada komponen kecil yang memakai hook, event, atau browser API.

Kapan window atau document boleh dipakai?

Hanya di browser, misalnya di dalam event handler atau useEffect pada Client Component.

Apa yang dicek dulu saat hydration ikut muncul?

Bandingkan HTML server dan client, lalu periksa state awal, data dinamis, format tanggal, dan akses browser saat render.

Artikel Terkait