Advanced · Level 14: PerformanceAdvanced65 menitBahasa Indonesia

Client Component Boundaries

Menempatkan use client pada pulau interaktif kecil tanpa menarik content route yang tidak perlu ke client bundle.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan use client sebagai entry point module graph
Mengecilkan boundary ke UI yang benar-benar interaktif
Meneruskan data serializable dari server parent ke client child
Menghindari page atau layout besar menjadi client tanpa alasan

Next.jsuse clientClient BoundaryHydration

Isi lesson

6 blok

1.
Letakkan boundary sedekat mungkin dengan interactionBelum selesaiWajib
2.
Client island menerima data, bukan mengambil alih pageBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Kecil bukan berarti terpecah tanpa arahBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Letakkan boundary sedekat mungkin dengan interaction

Wajib

Directive "use client" bukan label visual untuk sebuah component. Ia menandai entry point client module graph: import dan child component dari file tersebut dapat ikut menjadi bagian client bundle. Karena itu, letakkan directive pada pulau interaktif yang paling kecil. Pada page course, heading, lesson content, dan resource links tidak perlu ikut client hanya karena filter berada di halaman yang sama. Buat CourseFilter sebagai file client yang menerima data course sederhana dari parent server. Pendekatan ini menjaga content tetap mudah dibaca, memperkecil hydration work, dan membuat alasan interaktif setiap file lebih mudah direview.

Bagian ini memengaruhi progres lesson.

Client island menerima data, bukan mengambil alih page

Wajib

tsx

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

import { useState } from "react";

type CourseFilterProps = {
  courses: string[];
};

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

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

File ini menjadi client karena menyimpan query dan onChange. Parent server dapat tetap mengambil courses serta merender content route. courses adalah array string yang serializable, sehingga data dapat diteruskan dengan jelas tanpa menjadikan seluruh page client.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build course filter client island

Buat CourseFilter kecil yang menyimpan query serta menerima data course sederhana dari parent server.

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.

8 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Penempatan use client yang paling tepat untuk page course dengan satu filter interaktif adalah

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Kecil bukan berarti terpecah tanpa arah

Jangan memisahkan setiap button ke file client terpisah tanpa melihat cohesion interaction. Boundary yang baik cukup kecil untuk membatasi client graph, tetapi tetap mengelompokkan state dan event yang memang bekerja bersama. Mulai dari behavior user, lalu ukur bila cost-nya relevan.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

use client menandai entry point client graph, bukan sekadar file yang boleh memakai JSX.
Letakkan boundary pada pulau yang menyimpan state, event, atau browser API.
Server parent dapat menyiapkan data lalu meneruskannya sebagai props serializable.
Hindari menjadikan page atau layout besar client hanya karena satu control interaktif.
Berikutnya, kamu akan membaca re-render mahal setelah scope browser sudah dijaga dengan boundary yang tepat.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Letakkan boundary sedekat mungkin dengan interaction.

Memuat progres Review module