UI durumu ile sunucu durumunu neden ayırt etmelisiniz?

Question

Accepted Answer

**UI durumu**, uygulamanızın sahip olduğu ve yerel olarak kontrol ettiği verilerdir (açma/kapama düğmeleri, form girdileri, seçili sekme). **Sunucu durumu**, bir sunucuda yaşayan ve istemci üzerinde yalnızca *önbelleğe alınan* verilerdir (getirilen kullanıcılar, ürünler, gönderiler). Temelde farklı özelliklere sahiptirler ve farklı araçlara ihtiyaç duyarlar.

## Ana farklar

```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
```

## Sunucu verilerini UI durumu gibi ele almanın neden yanlış sonuçlandığı

```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 😓
}
```

Sonuçta, yükleme/hata takibi, önbelleğe alma, yeniden getirme, çoğaltma kaldırma ve eksiklik işleme — her getirme için yeniden uygulama yapmakla başa çıkırsınız.

## Doğru araç: sunucu durumu kitaplığı

```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
}
```

Bu kitaplıklar, sunucu durumu sorunu için özel olarak oluşturulmuştur — yerel önbelleği uzak bir kaynakla senkronize tutmak.

## Pratik bölme

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

## Neden önemli

Sunucu durumunun **uzak veri önbelleği** — normal yerel durum değil — olduğunu anlamak, modern ön uç mimarisi için büyük bir fikir aydınlatmasıdır.

Bunun nedeni, API verilerini Redux/useState'e dökmek neden manuel önbelleğe alma/yükleme kodu dağları yol açıyor ve neden özel sunucu durumu kitaplıkları (React Query, SWR) var ve bu kadar yaygın olarak benimseniyor.

İkisini bölme — UI durumu yerel mağazalarda, sunucu durumu önbelleğe alma kitaplığında — veri yoğun uygulamaları çarpıcı biçimde basitleştirir ve tekrar kullanılan kod ve eksiklik hatalarının geniş bir kategorisini ortadan kaldırır.