Uji Kompetensi Rendering Cost and Hydration
Membuktikan kesiapan memilih boundary browser yang kecil dan memperbaiki render work dengan alasan terukur.
Yang dicek
- Menjelaskan hydration sebagai browser work yang disengaja
- Memilih Server atau Client Component berdasarkan capability
- Mengecilkan client boundary pada route Next.js
- Menyusun rencana measurement untuk render work yang mahal
Isi lesson
6 blok- 1.Checkpoint: biaya browser perlu punya alasan yang jelasBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Baca boundary dan render dengan pertanyaan nyataBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: biaya browser perlu punya alasan yang jelas
WajibSebuah route course baru diberi use client pada page root karena ada filter, toggle progress, dan sorting lesson. Akibatnya heading, description, resource links, serta seluruh lesson list ikut masuk ke client graph. Tim juga menambahkan useMemo pada beberapa tempat tanpa baseline. Pada checkpoint ini, jangan mencari satu trick. Tunjukkan bahwa kamu dapat memisahkan content server dari interaction kecil, menjelaskan hydration yang tetap diperlukan, dan memilih measurement sebelum mengubah jalur render yang mahal.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Rendering Cost and Hydration
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 yang paling tepat menggambarkan hydration pada route Next.js?
Coding practice
WajibDibuka di workspace khususBuild rendering cost checkpoint
Susun peta boundary route course agar content tetap server-rendered dan interaction browser berada pada island yang tepat.
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 implementation note untuk route course yang sekarang memakai use client di page root. Jelaskan content mana yang tetap server-rendered, client island apa yang kamu buat dan mengapa ia tetap perlu hydration, data apa yang aman diteruskan ke client, serta bagaimana kamu akan mengukur sorting lesson sebelum menambah memoization. Tulis juga satu trade-off yang masih perlu diuji bersama tim.
Tulis draft dulu sebelum menandai writing practice selesai.
0/600 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibBaca boundary dan render dengan pertanyaan nyata
Dokumentasi membantu kamu meninjau server/client boundary dari capability yang tepat, sedangkan Profiler membantu mengganti asumsi performance dengan bukti interaction yang direkam.
Next.js
Server and Client Components
Fokus baca
- Kapan Client Component diperlukan dan bagaimana use client membentuk client module graph.
- Batas props serializable ketika data mengalir dari server ke client.
- Menjaga content server sambil membuat interaction browser sebagai island kecil.
Abaikan dulu
- Streaming, cache strategy, dan architecture level route yang belum muncul pada kasus ini.
React
React Developer Tools
Fokus baca
- Cara membuka Profiler untuk merekam interaction yang spesifik.
- Membaca commit dan component yang relevan sebelum menambah memoization.
- Membandingkan baseline dengan satu perubahan kecil yang dapat dijelaskan.
Abaikan dulu
- Profiling architecture kompleks dan React Compiler.
Aksi setelah membaca
Tinjau satu route project lokal: tandai file yang memakai use client, tulis capability browsernya, lalu catat satu candidate interaction yang perlu direkam sebelum dioptimalkan.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Kamu siap menjelaskan hydration sebagai biaya untuk interaction browser yang memang dibutuhkan.
- Kamu dapat menjaga server parent untuk content dan data sambil membuat client island yang terarah.
- Kamu memahami bahwa use client yang lebar dapat memperluas client graph tanpa nilai user yang sepadan.
- Kamu dapat memakai Profiler serta baseline sebelum memilih memoization atau refactor render.
- Level Performance selesai. Berikutnya, kamu akan berpindah ke Accessibility untuk meninjau semantic HTML dan keyboard navigation sebagai kualitas produk yang juga dapat diuji.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: biaya browser perlu punya alasan yang jelas.