Technical Tutorials

في تطوير الواجهات الأمامية الحديثة، لا يُعد التمييز بين حالة الخادم وحالة العميل مجرد مفهوم نظري، بل هو العمود الفقري لهيكلية التطبيق. ومع نمو تعقيد التطبيقات، يصبح إدارة البيانات أمراً حاسماً للأداء وقابلية الصيانة وتجربة المستخدم. سواء كنت تعمل مع React أو Vue أو إطار عمل هجين، فإن فهم متى يجب جلب البيانات من الخادم ومتى يجب تخزينها محلياً هو المفتاح لبناء برمجيات قابلة للتوسع.

تعريف الحالتين

لبناء تطبيقات فعالة، يجب علينا أولاً تعريف ماهية كل نوع من أنواع الحالات بوضوح. يحدد هذا التمييز الأدوات والأنماط التي يجب علينا استخدامها.

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

زمن الاستجابة (Latency): ليست محلية، لذا تتضمن طلبات شبكة.
التخزين المؤقت (Caching): يجب تخزينها مؤقتاً لتجنب إعادة جلبها بشكل غير ضروري.
المزامنة (Synchronization): قد تحتاج إلى المزامنة عبر علامات تبويب متعددة أو أجهزة مختلفة.
الملكية (Ownership): المصدر الوحيد للحقيقة موجود على الخادم.

حالة العميل تشير إلى البيانات الموجودة داخل المتصفح ولا تتطلب بالضرورة استدعاء واجهة برمجة التطبيقات. يشمل ذلك حالات واجهة المستخدم مثل معرفات علامات التبويب النشطة، ومفاتيح فتح/إغلاق النوافذ المنبثقة، وقيم إدخال النماذج، وتفضيلات المظهر. تشمل الخصائص الرئيسية ما يلي:

زمن الاستجابة (Latency): هي محلية، لذا فإن الوصول إليها فوري.
المزامنة (Synchronization): لا تحتاج إلى المزامنة مع خادم الواجهة الخلفية.
الملكية (Ownership): الحالة مؤقتة ومرتبطة بالجلسة الحالية.

فخ استخدام الحالة العالمية للبيانات القادمة من الخادم

يُعد نمطاً مضاداً شائعاً، خاصة بين المطورين الذين ينتقلون من Redux إلى حلول أحدث، هو التعامل مع حالة الخادم وكأنها حالة عميل عالمية. إن استخدام أدوات مثل Redux أو Vuex أو Pinia لتخزين استجابات واجهة برمجة التطبيقات (API) مؤقتاً غالباً ما يؤدي إلى كتابة كود زائد. ستجد نفسك تكتب كوداً نمطياً (Boilerplate) لحالات التحميل، ومعالجة الأخطاء، وإبطال التخزين المؤقت، وهي أمور موجودة بالفعل في مكتبات متخصصة.

على سبيل المثال، افترض وجود مكون يعرض قائمة بالمستخدمين. إذا قمت بتخزين هذه القائمة في حالة العميل العالمية، فستحتاج إلى إدارة دورة الحياة غير المتزامنة يدوياً:

// Anti-pattern: Manual client-side management of server state
useEffect(() => {
  const fetchUsers = async () => {
    setUsersLoading(true);
    try {
      const response = await fetch('/api/users');
      const data = await response.json();
      setUsers(data);
    } catch (error) {
      setUsersError(error);
    } finally {
      setUsersLoading(false);
    }
  };
  fetchUsers();
}, []);

هذا النهج لا يتوسع بشكل جيد. إذا احتاج مكون آخر إلى بيانات المستخدم نفسها، فإما أنك ستكرر المنطق أو تنشئ محددات معقدة (Selectors)، مما يؤدي إلى تمرير الخصائص (Prop-drilling) والارتباط الوثيق بين المكونات.

الحل: أدوات متخصصة لحالة الخادم

يوفر النظام البيئي الحديث مكتبات متخصصة مصممة خصيصاً لإدارة حالة الخادم. في نظام React البيئي، أصبح React Query (المعروف أيضاً بـ TanStack Query) هو المعيار. وفي نظام Vue البيئي، تلعب Vue Query أو Orval مقترنة بواجهات برمجة التطبيقات الأصلية للتركيب (Composition APIs) أدواراً مماثلة.

تتعامل هذه المكتبات مع التخزين المؤقت، وإعادة الجلب في الخلفية، وإزالة ازدواجية الطلبات بشكل افتراضي. إليك كيف قد يبدو مكون React باستخدام React Query:

// Best Practice: Using React Query for server state
import { useQuery } from '@tanstack/react-query';

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(res => res.json())
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error occurred: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

هذا الحل إعلاني (Declarative)، ومختصر، ويتعامل تلقائياً مع التخزين المؤقت والمزامنة.

الخاتمة: أبقيها بسيطة، وأبقيها محلية

القاعدة العامة بسيطة: إذا كانت البيانات تأتي من الخادم، فاستخدم مكتبة إدارة حالة الخادم. وإذا كانت البيانات متعلقة بواجهة المستخدم وتبقى في المتصفح، فاستخدم حالة المكون المحلية، أو السياق (Context)، أو متجر حالة عميل عالمي مثل Redux أو Pinia. ومن خلال احترام الحدود بين حالة الخادم وحالة العميل، فإنك تقلل من الكود النمطي، وتحسن الأداء، وتبني تطبيقات يسهل صيانتها. اختر الأداة المناسبة للعمل المناسب، وستشكرك هيكلية تطبيقك على ذلك.