Mengapa penting untuk membedakan keadaan UI daripada keadaan pelayan?

Question

Accepted Answer

**Keadaan UI** adalah data yang aplikasi Anda miliki dan kawalan secara tempatan (togol, input borang, tab yang dipilih). **Keadaan pelayan** adalah data yang tinggal di pelayan dan hanya *disimpan cache* pada klien (pengguna yang diambil, produk, siaran). Mereka mempunyai ciri-ciri yang sama sekali berbeza dan memerlukan alat yang berbeza.

## Perbezaan utama

```text
                  UI state                    Server state
Ownership         you own it (client)         the server owns it; client caches
Freshness         always current              can become STALE (server changed it)
Sync needed?      no                          yes — refetch, invalidate, revalidate
Shared?           usually one client          shared across users/devices/tabs
Concerns          just set/read it            caching, loading, errors, retries, dedup
```

## Mengapa merawat data pelayan seperti keadaan UI menjadi salah

```jsx
// ❌ treating server data as plain local state — you must hand-build everything
function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    fetch("/api/users")
      .then(r => r.json()).then(setUsers)
      .catch(setError).finally(() => setLoading(false));
  }, []);
  // and now: caching? refetch on focus? dedup? retries? stale data? all manual 😓
}
```

Anda akhirnya melaksanakan semula penjejakan pemuatan/ralat, penyimpanan cache, pengambilan semula, dedulikasi, dan pengendalian keusangan — untuk setiap pengambilan.

## Alat yang betul: perpustakaan keadaan-pelayan

```jsx
// ✅ React Query / SWR / RTK Query handle caching, loading, errors, refetch for you
function Users() {
  const { data: users, isLoading, error } = useQuery({
    queryKey: ["users"],
    queryFn: () => fetch("/api/users").then(r => r.json()),
  });
  // automatic: caching, background refetch, dedup, retries, stale-while-revalidate
}
```

Perpustakaan ini dibina khusus untuk masalah keadaan-pelayan — mengekalkan cache tempatan dalam segerak dengan sumber jauh.

## Pemisahan praktikal

```text
UI state    → useState / Zustand / Context / Redux
Server state→ React Query / SWR / RTK Query / Apollo (for GraphQL)
```

## Mengapa ini penting

Mengiktiraf bahawa keadaan pelayan adalah **cache data jauh** — bukan keadaan tempatan biasa — adalah wawasan utama untuk seni bina hadapan moden.

Ia menjelaskan mengapa menuang data API ke Redux/useState membawa berkotak-kotak kod penyimpanan cache/pemuatan manual, dan mengapa perpustakaan keadaan-pelayan berdedikasi (React Query, SWR) wujud dan diterima pakai secara meluas.

Memisahkan kedua-duanya — keadaan UI dalam kedai tempatan, keadaan pelayan dalam perpustakaan penyimpanan cache — dengan drastik memudahkan aplikasi yang banyak data dan menghapuskan kategori besar kod boilerplate dan pepijat keusangan.