আমরা 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 😓
}
```

আপনি লোডিং/ত্রুটি ট্র্যাকিং, ক্যাশিং, পুনরায় নিয়ে আসা, ডিডুপ্লিকেশন এবং স্টেলনেস পরিচালনা পুনরায় প্রয়োগ করেন — প্রতিটি 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 তে ফেলে দেওয়া ম্যানুয়াল ক্যাশিং/লোডিং কোডের পর্বতপ্রমাণ দিকে পরিচালিত করে, এবং কেন ডেডিকেটেড সার্ভার-স্টেট লাইব্রেরি (React Query, SWR) বিদ্যমান এবং এত ব্যাপকভাবে গৃহীত।

দুটিকে বিভক্ত করা — স্থানীয় স্টোরে UI অবস্থা, ক্যাশিং লাইব্রেরিতে সার্ভার অবস্থা — ডেটা-ভারী অ্যাপ্লিকেশনগুলিকে নাটকীয়ভাবে সরল করে এবং বয়লারপ্লেট এবং স্টেলনেস বাগের একটি বিশাল বিভাগ দূর করে।