UI நிலையிலிருந்து சர்வர் நிலையை ஏன் வேறுபடுத்த வேண்டும்?

Question

Accepted Answer

**UI நிலை** என்பது உங்கள் பயன்பாடு சொந்தமாக வைத்திருக்கும் மற்றும் உள்ளூரில் கட்டுப்படுத்தும் தரவு (டாக்கிள்கள், படிவ உள்ளீடுகள், தேர்ந்தெடுக்கப்பட்ட தாவல்). **சர்வர் நிலை** என்பது ஒரு சர்வரில் வாழ்கிற மற்றும் கிளையன்টில் மட்டுமே *கேச் செய்யப்பட்ட* தரவு (பெறப்பட்ட ব்যবহारிக்கள், பொருட்கள், பதிவுகள்). அவற்றுக்கு அடிப்படையில் வெவ்வேறான பண்புகள் உள்ளன மற்றும் வெவ்வேறான கருவிகள் தேவை.

## முக்கிய வேறுபாடுகள்

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

முடிவில் நீங்கள் ஏற்றுதல்/பிழை கண்காணிப்பு, கேச்சிங், மறுபெறுதல், நகல் நீக்கம் மற்றும் பழக்கமான தன்மை கையாளுதல் — ஒவ்வொரு பெறுதலுக்கும் மீண்டும் கொண்டு வர முடிந்தது.

## சரியான கருவி: சர்வர்-நிலை நூலகம்

```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 இல் விழுங்குவது ஏன் கைமுறை கேச்சிங்/ஏற்றுதல் குறியீட்டின் மலையாக இருக்கிறது என்பதை இது விளக்குகிறது, மற்றும் ஏன் சர்வசக்திவள் சர்வர்-நிலை நூலகங்கள் (React Query, SWR) உள்ளன மற்றும் பரவலாக ஏற்றுக்கொள்ளப்படுகின்றன.

ரண்டை பிரிப்பு — UI நிலை உள்ளூர் கடைகளில், சர்வர் நிலை ஒரு கேச்சிங் நூலகத்தில் — தரவு-கனமான பயன்பாடுகளை வியத்தகு முறையில் எளிமையாக்குகிறது மற்றும் பொதுவான கொதிகலன்-தட்டை மற்றும் பழக்கமான பிழைகளின் ஒரு பெரிய வகை நீக்குகிறது.