Advanced · Level 16: Frontend ArchitectureAdvanced60 menitBahasa Indonesia

Server State vs Client State

Memetakan sumber kebenaran data pada sebuah feature sebelum memilih hook, storage, atau global state.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan source of truth server dari state yang hanya mengatur pengalaman UI saat ini
Membaca satu feature sebagai kumpulan data dengan lifecycle yang berbeda
Menghindari penyalinan server data ke state lokal tanpa alasan yang jelas
Memilih rumah state sebelum memilih library atau global store

State StrategyServer StateClient StateReact

Isi lesson

6 blok

1.
Mulai dari sumber kebenaran, bukan nama hookBelum selesaiWajib
2.
Peta awal untuk feature course catalogBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan menyimpan hasil perhitungan sebagai state keduaBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Mulai dari sumber kebenaran, bukan nama hook

Wajib

Satu feature courses dapat memiliki daftar course dari backend, query pencarian yang ingin dibagikan, panel filter yang hanya terbuka pada layar user saat ini, serta preferensi yang ingin diingat setelah browser ditutup. Semuanya sering disebut state, tetapi lifecycle dan owner-nya berbeda. Server state memiliki sumber kebenaran di backend atau layanan eksternal. Client state adalah istilah payung untuk state yang dikelola browser, lalu perlu dipecah lagi: URL state untuk keputusan yang dapat dibagikan, local UI state untuk interaksi sementara, dan persisted state untuk preferensi atau draft yang memang perlu bertahan.

Sebelum membuat Context, reducer, atau store, tulis data apa yang dimiliki feature dan tanyakan empat hal: siapa sumber kebenarannya, apakah state harus selamat setelah refresh, apakah user lain perlu dapat membuka URL yang sama, dan apa yang terjadi jika data gagal didapat. Jawaban itu biasanya membuat rumah state terlihat lebih jelas daripada memilih library lebih dahulu.

Bagian ini memengaruhi progres lesson.

Peta awal untuk feature course catalog

Wajib

type StateHome = "server" | "url" | "local" | "persisted";

const courseCatalogState = {
  courses: "server",
  completionByCourseId: "server",
  searchQuery: "url",
  page: "url",
  isFilterPanelOpen: "local",
  dismissedKeyboardTip: "persisted",
} satisfies Record<string, StateHome>;

courses dan completionByCourseId perlu dikonfirmasi backend. searchQuery dan page layak berada di URL karena hasilnya dapat di-refresh, diberi bookmark, atau dikirim ke rekan kerja. isFilterPanelOpen hanya relevan selama user berinteraksi dengan page saat ini. dismissedKeyboardTip boleh disimpan lokal bila itu preferensi personal non-kritis. Peta ini belum menentukan API atau library; ia hanya menjaga keputusan arsitektur tetap dapat dijelaskan.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Classify course state owners

Petakan data course catalog ke server, URL, local UI, atau persisted state berdasarkan sumber kebenaran serta lifecycle-nya.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Data manakah yang paling tepat dianggap server state pada feature course catalog?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Opsional

Jangan menyimpan hasil perhitungan sebagai state kedua

Jika visibleCourses dapat dihitung dari courses, query, dan filter aktif, jangan buat state tambahan yang menyimpan daftar hasilnya kecuali ada alasan lifecycle yang konkret. Dua salinan data mudah tidak sinkron setelah fetch, mutation, atau perubahan URL. Simpan source yang dibutuhkan, lalu hitung nilai turunan saat render atau di boundary yang tepat.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Server state memiliki sumber kebenaran di backend atau layanan eksternal.
Client state perlu dipisah lagi menjadi URL, local UI, dan persisted state berdasarkan lifecycle-nya.
Peta ownership dibuat sebelum memilih Context, query library, atau global store.
Nilai turunan sebaiknya dihitung dari source yang ada agar tidak membuat state duplikat.
Berikutnya, kita memindahkan keputusan filter yang shareable ke URL.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Mulai dari sumber kebenaran, bukan nama hook.

Memuat progres Review module