كيف يعمل الـ Data Loading والـ Loaders في الإصدارات الحديثة من React Router (v6.4+ Data APIs)؟

الإجابة المختصرة

تقوم دوال الـ loaders بجلب البيانات بالتوازي مع تحميل كود الصفحة قبل بدء عرض المكون، مما يمنع ظاهرة الشلال المتتالي للطلبات (Network Waterfalls).

الشرح

في النمط القديم كان المكون يتم تحميله أولاً، ثم داخل useEffect يبدأ إرسال طلب البيانات مما يؤخر العرض. في React Router Data APIs، يتم تعريف loader لكل مسار يبدأ جلب البيانات في نفس لحظة النقر على الرابط، ويصل المكون للبيانات فوراً وجاهزة عبر دالة useLoaderData().

مثال بالكود

import { createBrowserRouter, RouterProvider, useLoaderData } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/user/:id",
    loader: async ({ params }) => {
      return fetch(`/api/user/${params.id}`);
    },
    element: <UserProfile />
  }
]);

function UserProfile() {
  const user = useLoaderData() as User;
  return <h1>أهلاً بك، {user.name}</h1>;
}

أخطاء شائعة

• جلب البيانات داخل useEffect داخل المكون مع استخدام Data Router مما يلغي ميزة جلب البيانات المسبق المتوازي.

أسئلة متابعة

• ما هي الـ Server Actions في React 19 وكيف تبسّط إرسال النماذج بدون جافاسكربت؟
• ما هي استراتيجيات إعادة ضبط الـ Scroll إلى أعلى الصفحة تلقائياً عند تغيير المسار (Scroll Restoration)؟

المصادر

• React Router docs — Data Loading