Cén fáth a dhéantar idirdhealú idir staid UI agus staid fhréamhshuímh?

Question

Accepted Answer

Is é **staid UI** na sonraí atá faoi úinéireacht agus smacht ag do app go háitiúil (tógála ar fud, iontrálacha foirme, comhad roghnaithe). Is é **staid fhréamhshuímh** na sonraí atá ina gcónaí ar fhréamhshuíomh agus go simplí *i dtaisce* ar an gcliant (úsáideoirí a naimsíodh, táirgí, poist). Tá tréithe bunúsach difriúil aici agus bíonn gá do thúsanna difriúla.

## Na príomhdhifríochtaí

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

## Cén fáth a dtéann sé go dona nuair a chóireáiltear sonraí fréamhshuímh ar nós staid UI

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

Crithlíonann tú rianúchán a bhac ar lódáil/earráidí, taisce, athlódáil, díchóiriú, agus láimhseáil stéile — do gach fáil.

## An uirlis cheart: leabharlann staid fhréamhshuímh

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

Tógtha go sonrach don fhadhb staid fhréamhshuímh atá na leabharlanna seo — taisce áitiúil a bhac i gcomhshíocrónú le foinse i bhfad.

## An scaradh praiticiúil

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

## Cén fáth a bhíonn sé tábhachtach

Is léarscáil dhomhain do ailtireacht frontend nua-aimseartha a thuiscint go bhfuil staid fhréamhshuímh **i taisce ar shonraí i bhfad** — ní staid áitiúil, go simplí.

Míníonn sé cén fáth a dtéann sonraí API a chur in Redux/useState i mótharacha taisce/lódáil láimhe, agus cén fáth a bhíonn leabharlanna staid fhréamhshuímh tiomnaithe (React Query, SWR) ann agus go bhfuil siad i nglacadh chomh leathan.

An chúpla scaradh — staid UI i stóranna áitiúla, staid fhréamhshuímh i leabharlann taisce — simplíonn go mór a gcóras sonraí-throm agus cuirir deireadh ar ghréine bhreise de boilerplate agus fabhtanna stéile.