Advanced · Level 10: Next.js App RouterAdvanced60 menitBahasa Indonesia

Common Boundary Mistakes

Mendeteksi hook, event handler, browser API, dan props function yang ditempatkan pada sisi boundary yang keliru.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Mendeteksi state dan event handler yang salah ditempatkan pada Server Component
Memilih file client yang lebih kecil daripada menjadikan seluruh page client
Mengenali props function sebagai masalah pada contoh server-to-client sederhana

Next.jsDebuggingClient BoundaryPropsBrowser APIs

Isi lesson

5 blok

1.
Debug boundary dengan membaca kebutuhan tiap fileBelum selesaiWajib
2.
Dua masalah yang perlu dipisahkanBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Debug boundary dengan membaca kebutuhan tiap file

Wajib

Error boundary sering terasa membingungkan karena JSX masih terlihat normal. Cara membacanya sederhana: cari hook, event handler, atau browser API. Jika salah satu ada pada file default server, pindahkan behavior ke Client Component kecil atau jadikan file itu entry point client bila memang seluruh isinya interaktif.

Setelah itu, periksa arah props. Server parent boleh memberi data sederhana ke client child. Namun callback function dari server parent bukan pola props biasa yang dapat dikirim melintasi boundary. Jangan menyelesaikan semua error dengan menambahkan "use client" pada root layout; itu justru membuat batas client terlalu luas.

Bagian ini memengaruhi progres lesson.

Dua masalah yang perlu dipisahkan

Wajib

tsx

// app/dashboard/page.tsx
// Masalah: default Server Component memakai state dan event handler.
import { useState } from "react";

export default function DashboardPage() {
  const [isOpen, setIsOpen] = useState(false);

  return <button onClick={() => setIsOpen(!isOpen)}>Buka filter</button>;
}

// Masalah lain: function callback dikirim dari server parent ke client child.
<CourseFilter
  courses={["React Fundamentals"]}
  onSelect={(course) => console.log(course)}
/>

Masalah pertama diperbaiki dengan menaruh state dan button interaktif pada file Client Component, misalnya course-filter.tsx. Masalah kedua tidak diselesaikan dengan meneruskan onSelect dari Server Component. Untuk tahap ini, biarkan client child memiliki handler-nya sendiri dan kirim data course sebagai props serializable.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Fix course boundary placement

Lengkapi boundary map agar dashboard page tetap server, sedangkan filter interaktif menjadi file client yang menerima data course sederhana.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Dashboard page berisi heading statis dan satu tombol filter dengan onClick. Keputusan boundary yang paling tepat adalah?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Cari hook, event handler, effect, atau browser API ketika membaca error boundary.
Pindahkan behavior interaktif ke Client Component kecil sebelum menjadikan seluruh page atau layout client.
Kirim data sederhana dari server ke client; jangan memakai function callback sebagai props server-to-client biasa.
Berikutnya, Uji Kompetensi akan meminta kamu membuat keputusan boundary untuk dashboard kecil.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Debug boundary dengan membaca kebutuhan tiap file.

Memuat progres Review module