UI अवस्था र सर्भर अवस्थालाई किन अलग गर्नुपर्छ?

Question

Accepted Answer

**UI अवस्था** भनेको आपनो अ्यापले स्थानीय रूपमा नियन्त्रण र स्वामित्व गरेको डेटा हो (toggles, form inputs, selected tab)। **सर्भर अवस्था** भनेको सर्भरमा रहेको र क्लाइन्टमा मात्र *क्यास गरिएको* डेटा हो (fetched users, products, posts)। यसका मौलिक रूपमा फरक विशेषताहरू छन् र विभिन्न उपकरणहरू चाहिन्छ।

## मुख्य भिन्नताहरू

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

## सर्भर डेटालाई 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 😓
}
```

तपाई loading/error tracking, caching, refetching, deduplication, र staleness handling पुनः लागू गर्नुपर्छ — प्रत्येक fetch को लागि।

## सही उपकरण: एक सर्भर-अवस्था पुस्तकालय

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

यी पुस्तकालयहरू विशेष गरी सर्भर-अवस्था समस्याको लागि निर्मित छन् — स्थानीय क्यासलाई दूरस्थ स्रोतसँग सिंक राख्न।

## व्यावहारिक विभाजन

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

## यो किन महत्त्वपूर्ण छ

सर्भर अवस्था एक **दूरस्थ डेटाको क्यास** हो — नियमित स्थानीय अवस्था होइन — यो आधुनिक फ्रन्टएन्ड वास्तुकलाको लागि एक प्रमुख अन्तर्दृष्टि हो।

यसले व्याख्या गर्छ किन API डेटालाई Redux/useState मा फ्याँक्दा हजार हजार म्यानुअल caching/loading कोड र बोइलरप्लेट सिर्जना हुन्छ, र किन समर्पित सर्भर-अवस्था पुस्तकालयहरू (React Query, SWR) अस्तित्वमा छन् र व्यापक रूपमा ग्रहण गरिएका छन्।

दुवैलाई अलग गर्नु — UI अवस्था स्थानीय स्टोरमा, सर्भर अवस्था क्यासिङ पुस्तकालयमा — डेटा-भारी अ्यापलाई नाटकीय रूपमा सरल बनाउँछ र boilerplate र staleness बगहरूको विशाल वर्गलाई हटाउँछ।