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

Client Components

Memilih Client Component ketika UI membutuhkan state, event handler, effect, custom hook, atau browser API.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Mengenali kebutuhan UI yang memerlukan Client Component
Menjelaskan fungsi directive "use client" secara tepat
Membedakan content statis dari bagian UI yang interaktif

Next.jsClient ComponentsuseStateEventsBrowser APIs

Isi lesson

5 blok

1.
Client Component dipakai untuk kemampuan yang hidup di browserBelum selesaiWajib
2.
Filter kecil membutuhkan state dan event handlerBelum selesaiWajib
3.
Cek pemahamanBelum selesaiWajib
4.
Mulai dari bagian interaktif yang paling kecilBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Client Component dipakai untuk kemampuan yang hidup di browser

Wajib

Gunakan Client Component saat sebuah bagian UI perlu merespons user atau memakai kemampuan browser. Contoh paling umum adalah state dengan useState, event handler seperti onClick dan onChange, effect, custom hook, localStorage, atau window. Directive "use client" menyatakan entry point client pada file tersebut.

Ini bukan pilihan antara aplikasi server atau aplikasi client. Satu page dapat tetap menjadi Server Component lalu merender child kecil yang menjadi Client Component. Dengan pola ini, kamu menaruh interaktivitas tepat di tempat yang membutuhkannya dan menjaga shell route tetap sederhana.

Bagian ini memengaruhi progres lesson.

Filter kecil membutuhkan state dan event handler

Wajib

tsx

"use client";

import { useState } from "react";

export default function CourseFilter() {
  const [query, setQuery] = useState("");

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

CourseFilter memerlukan useState dan onChange agar input dapat merespons ketikan user. Karena itu, directive "use client" diletakkan di bagian paling atas file, sebelum import. Page parent yang hanya merender heading dan memasang CourseFilter tidak harus ikut menjadi Client Component.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Manakah alasan yang paling tepat untuk menjadikan component sebagai Client Component?

Progres lesson naik setelah jawaban benar.

Tips

Wajib

Mulai dari bagian interaktif yang paling kecil

Jika hanya search input yang interaktif, buat SearchInput atau CourseFilter sebagai Client Component. Jangan langsung memberi "use client" pada seluruh layout dashboard. Boundary yang kecil membuat keputusan kode lebih mudah dibaca dan menghindari client JavaScript yang tidak perlu.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Client Components diperlukan untuk state, event handler, effect, custom hook, dan browser API.
"use client" diletakkan pada entry point client, sebelum import.
Server parent tetap dapat merender Client Component sebagai child.
Berikutnya, kamu akan berlatih menempatkan boundary pada file yang tepat.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Client Component dipakai untuk kemampuan yang hidup di browser.

Memuat progres Review module