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

use client Boundary

Menempatkan "use client" pada component interaktif agar batas client tetap kecil dan mudah dipahami.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menempatkan "use client" sebelum import pada file yang tepat
Membuat component filter kecil yang memakai state
Menjelaskan mengapa layout atau page parent tidak perlu ikut menjadi client

Next.jsClient Boundaryuse clientuseState

Isi lesson

5 blok

1.
Directive menandai batas module, bukan sekadar baris pembukaBelum selesaiWajib
2.
Batas kecil pada file filterBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Jangan menjadikan page client hanya untuk satu inputBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Directive menandai batas module, bukan sekadar baris pembuka

Wajib

Saat sebuah file diberi "use client", file itu menjadi entry point untuk Client Component. Import dan child component yang digunakan dari sana ikut masuk ke sisi client. Karena itu, letakkan directive pada component interaktif yang spesifik, bukan pada page atau layout besar hanya agar satu tombol dapat diklik.

Pada contoh dashboard, page dapat menyimpan heading dan data course. CourseFilter hanya menangani query input. Dengan pemisahan ini, kebutuhan client terlihat jelas dari nama dan isi file tanpa menyebar ke seluruh route.

Bagian ini memengaruhi progres lesson.

Batas kecil pada file filter

Wajib

tsx

// app/dashboard/page.tsx
import CourseFilter from "./course-filter";

const courses = ["React Fundamentals", "Next.js App Router"];

export default function DashboardPage() {
  return (
    <main>
      <h1>Course saya</h1>
      <CourseFilter courses={courses} />
    </main>
  );
}

// app/dashboard/course-filter.tsx
"use client";

import { useState } from "react";

export default function CourseFilter({ courses }: { courses: string[] }) {
  const [query, setQuery] = useState("");
  const visibleCourses = courses.filter((course) =>
    course.toLowerCase().includes(query.toLowerCase()),
  );

  return (
    <section>
      <input value={query} onChange={(event) => setQuery(event.target.value)} />
      <p>{visibleCourses.length} course ditemukan.</p>
    </section>
  );
}

DashboardPage tidak memakai browser API atau state, jadi tetap default server. CourseFilter adalah batas client karena ia menangani input dan state. Dalam project nyata, kedua bagian ini berada pada file terpisah seperti komentar path di atas.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Create course filter client boundary

Lengkapi app/dashboard/course-filter.tsx sebagai Client Component kecil yang menyimpan query filter dan menerima daftar course.

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 otomatis6 checklist

Belum selesaiBuka practice

Kesalahan umum

Wajib

Jangan menjadikan page client hanya untuk satu input

Menaruh "use client" di app/dashboard/page.tsx mungkin membuat input bekerja, tetapi boundary menjadi terlalu lebar. Coba ekstrak bagian interaktif menjadi child terlebih dahulu. Bila satu component memang seluruhnya interaktif, barulah boundary pada file itu masuk akal.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

"use client" menandai entry point client dan harus berada sebelum import.
Letakkan boundary pada component interaktif yang paling kecil dan jelas.
Server page boleh mengimpor serta merender Client Component.
Berikutnya, kamu akan mengirim data sederhana dari server parent ke client child melalui props.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Directive menandai batas module, bukan sekadar baris pembuka.

Memuat progres Review module