Uji Kompetensi Server-State Thinking
Checkpoint untuk menilai kesiapan memisahkan data server, menampilkan state yang jujur, dan memulihkan mutation secara aman.
Yang dicek
- Menggabungkan server-state flow dalam feature daftar course kecil
- Memilih model UI dari response API mentah
- Membedakan empty result dari request failure
- Menjelaskan optimistic update serta rollback yang aman
Isi lesson
6 blok- 1.Checkpoint: UI perlu jujur tentang sumber dan keadaan dataBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Baca data-fetching guidance sesuai framework yang kamu pakaiBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: UI perlu jujur tentang sumber dan keadaan data
WajibData dari server bukan sekadar array yang ditaruh ke component. Ada waktu ketika data belum tersedia, gagal dimuat, kosong setelah request berhasil, atau perlu dipetakan sebelum siap dirender. Ada juga state UI lokal seperti filter dan dialog yang tidak perlu di-fetch ulang. Menempatkan keduanya pada tanggung jawab yang tepat membuat feature lebih mudah di-debug dan dipulihkan.
Pada checkpoint ini, periksa apakah feature dapat menjawab pertanyaan praktis: dari mana data berasal, apa yang user lihat saat belum ada hasil, apakah component menerima model UI yang jelas, dan apa yang terjadi bila update optimistis ditolak server. Jangan menambah cache atau library baru hanya untuk membuat contoh terlihat production-grade.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Server-State Thinking
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
Manakah data yang paling tepat diperlakukan sebagai server state?
Coding practice
WajibDibuka di workspace khususBuild course server-state checkpoint
Lengkapi checkpoint catalog course dengan model response, UI state yang jujur, dan optimistic bookmark rollback. Preview tidak menjalankan fetch atau mutation 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.
Writing practice
WajibLatihan menulis
Tulis implementation note untuk feature course catalog. Jelaskan mana data yang merupakan server state dan mana yang hanya client state; bagaimana kamu membedakan loading, error, empty, dan ready state; di mana API response dipetakan; serta satu optimistic interaction yang aman atau alasan mengapa interaction tersebut harus menunggu server. Jelaskan recovery jika request update gagal dan sebutkan satu kondisi yang perlu diuji di local app.
Tulis draft dulu sebelum menandai writing practice selesai.
0/550 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibBaca data-fetching guidance sesuai framework yang kamu pakai
Pilih satu path yang cocok dengan project lokalmu. Fokus pada state dan data boundary yang sedang kamu kerjakan, bukan semua strategi cache sekaligus.
Next.js
Fetching Data
Fokus baca
- Perbedaan tempat fetch pada Server Components dan Client Components.
- loading.js atau Suspense untuk loading state yang bermakna.
- Kapan beberapa request dapat dimulai secara parallel.
Abaikan dulu
- Cache Components dan strategi caching lanjutan.
- Streaming architecture yang kompleks.
MDN Web Docs
Using the Fetch API
Fokus baca
- Mengecek response sebelum memakai data response.
- Membedakan network failure dan HTTP error response.
- Mengubah response menjadi data yang siap dipetakan.
Abaikan dulu
- Streaming request body dan advanced Request configuration.
- Upload flow yang belum digunakan feature-mu.
Aksi setelah membaca
Di Local React App atau Local Next.js App, pilih satu daftar data. Catat server state dan client state-nya, tambahkan loading/error/empty/ready state yang jujur, lalu map satu response ke model UI. Tambahkan optimistic update hanya bila kamu dapat mendemonstrasikan rollback dari endpoint aman. Jangan tandai selesai dari preview structure saja.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Server state dan client state dipisahkan berdasarkan sumber kebenaran serta lifecycle-nya.
- Loading, error, empty, dan ready state membuat data-fetching UI dapat dipercaya user.
- Mapper mengubah response transport menjadi model yang jelas untuk component.
- Optimistic update hanya tepat bila rollback serta recovery dapat dijelaskan.
- Kamu siap melanjutkan ke module berikutnya yang memperluas quality data flow melalui testing, quality assurance, atau feature data-heavy yang lebih besar.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: UI perlu jujur tentang sumber dan keadaan data.