لماذا نميز بين حالة الواجهة والحالة الخادم؟

Question

Accepted Answer

**حالة الواجهة** هي البيانات التي يمتلكها التطبيق ويتحكم فيها محليًا (تبديلات، مدخلات النماذج، علامة التبويب المحددة). **حالة الخادم** هي البيانات التي تعيش على خادم ويتم فقط *تخزينها مؤقتًا* على العميل (المستخدمون المجلوبون، المنتجات، المنشورات). لديهما خصائص مختلفة بشكل أساسي وتحتاج إلى أدوات مختلفة.

## الاختلافات الأساسية

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

## لماذا التعامل مع بيانات الخادم مثل حالة الواجهة خاطئ

```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) وتحظى بتبني واسع.

الفصل بين الاثنين — حالة الواجهة في المتاجر المحلية وحالة الخادم في مكتبة التخزين المؤقت — يبسط بشكل كبير التطبيقات الثقيلة بالبيانات ويلغي فئة ضخمة من الكود النمطي وأخطاء الحداثة.