Hvorfor skille UI-tilstand fra server-tilstand?

Question

Accepted Answer

**UI-tilstand** er data som appen din eier og styrer lokalt (av/på-brytre, skjemainput, valgt fane). **Server-tilstand** er data som lever på en server og bare er *cachet* på klienten (hentet brukere, produkter, innlegg). De har fundamentalt forskjellige egenskaper og trenger forskjellige verktøy.

## Nøkkelforskjellene

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

## Hvorfor behandling av serverdata som UI-tilstand går galt

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

Du ender opp med å implementere lasting/feilsporing, caching, omhenting, deduplicering og håndtering av staleness på nytt — for hver fetch.

## Det riktige verktøyet: et server-tilstand-bibliotek

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

Disse bibliotekene er bygget spesifikt for server-tilstandsproblemet — å holde en lokal cache i synkronisering med en ekstern kilde.

## Den praktiske oppdelingen

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

## Hvorfor det er viktig

Å erkjenne at server-tilstand er en **cache av fjerndata** — ikke vanlig lokal tilstand — er en stor innsikt for moderne frontend-arkitektur.

Det forklarer hvorfor dumping av API-data inn i Redux/useState fører til fjell med manuell caching/loading-kode, og hvorfor dedikerte server-tilstand-biblioteker (React Query, SWR) finnes og er så mye brukt.

Å dele de to — UI-tilstand i lokale lagre, server-tilstand i et caching-bibliotek — forenkler datakrevende apper dramatisk og eliminerer en enorm kategori av boilerplate og staleness bugs.