FluentStack

Uji Kompetensi Server-State Thinking

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 12: Forms, Validation, and Data FetchingAdvanced80 menitBahasa Indonesia

Uji Kompetensi Server-State Thinking

Checkpoint untuk menilai kesiapan memisahkan data server, menampilkan state yang jujur, dan memulihkan mutation secara aman.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

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
Server StateData FetchingTypeScriptOptimistic UIReadiness Checkpoint

Isi lesson

6 blok
  1. 1.
    Checkpoint: UI perlu jujur tentang sumber dan keadaan dataBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Baca data-fetching guidance sesuai framework yang kamu pakaiBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: UI perlu jujur tentang sumber dan keadaan data

Wajib

Data 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

Wajib

Uji 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 khusus

Build 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.

7 cek otomatis5 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan 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.

Draft kosong

0/550 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Baca 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.
Buka dokumentasi

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.
Buka dokumentasi

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.