Uji Kompetensi Server and Client Components
Checkpoint kesiapan untuk menentukan boundary server/client, menggunakan "use client" secara tepat, dan meneruskan props sederhana.
Yang dicek
- Menentukan peran server atau client untuk bagian dashboard kecil
- Memilih lokasi "use client" yang tepat
- Menjelaskan data props yang aman untuk dikirim dari server ke client
Isi lesson
6 blok- 1.Checkpoint: pilih boundary berdasarkan kebutuhan UIBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Baca dokumentasi Next.js dengan tujuan yang jelasBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: pilih boundary berdasarkan kebutuhan UI
WajibPada module ini kamu tidak diminta menghafal istilah rendering yang dalam. Gunakan keputusan praktis: content statis dan route shell dimulai sebagai Server Components; state, event handler, effect, custom hook, dan browser API memerlukan Client Component. Letakkan "use client" pada entry point interaktif yang kecil, lalu teruskan data sederhana melalui props.
Checkpoint ini menguji apakah kamu dapat membaca sebuah dashboard kecil, memisahkan page server dari filter client, dan menjelaskan keputusan tersebut dengan bahasa yang jelas. Semua yang dinilai sudah muncul pada regular lesson sebelumnya.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Server and Client Components
Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.
Target lulus
70/100
Skor terbaik
0/100
Status
Belum dikerjakan
Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.
Pertanyaan 1 dari 5
Target lulus: 70
Apa status default page dan layout pada Next.js App Router?
Coding practice
WajibDibuka di workspace khususBuild course boundary checkpoint
Susun component boundary untuk dashboard course: server page menjaga content route, client filter menangani query, dan props course tetap berupa data 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.
Writing practice
WajibLatihan menulis
Tulis 60-120 kata untuk implementation note dashboard. Jelaskan file mana yang tetap Server Component, file mana yang menjadi Client Component, alasan penempatan "use client", dan satu contoh props sederhana yang dikirim dari server ke client.
Tulis draft dulu sebelum menandai writing practice selesai.
0/80 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibBaca dokumentasi Next.js dengan tujuan yang jelas
Gunakan dokumentasi resmi untuk menegaskan keputusan boundary yang baru kamu buat. Baca contoh file kecil terlebih dahulu; kamu belum perlu mempelajari Server Actions, caching, atau arsitektur streaming.
Next.js Docs
Server and Client Components
Fokus baca
- Mengapa layout dan page dimulai sebagai Server Components.
- Kapan state, event handler, dan browser API membutuhkan Client Component.
- Contoh server parent yang merender child client.
Abaikan dulu
- React Server Component Payload dan hydration detail.
- Context provider, third-party wrapping, dan environment poisoning.
Next.js Docs
use client directive
Fokus baca
- Directive harus berada di atas file sebelum import.
- Boundary cukup diletakkan pada entry point client, bukan setiap child file.
- Props Client Component perlu dapat diserialisasi.
Abaikan dulu
- Server Actions dan pola data kompleks.
Aksi setelah membaca
Di Local Next.js App, pertahankan page dan layout statis sebagai server. Pindahkan satu tombol, filter, atau form kecil ke file Client Component, teruskan props sederhana, lalu tulis satu kalimat alasan penempatan "use client" pada file tersebut.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Kamu siap melanjutkan bila dapat memilih server atau client berdasarkan kebutuhan UI, bukan kebiasaan.
- "use client" berada pada entry point interaktif yang kecil dan sebelum import.
- Server parent dapat memberi props sederhana kepada Client Component.
- Module berikutnya membahas perilaku route: loading UI, error UI, route handlers, metadata, dan environment variables.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: pilih boundary berdasarkan kebutuhan UI.