‏SWR أم React Query: اختيار الأداة المناسبة

يبلغ حجم SWR نحو 7kb بعد الضغط باستخدام gzip، بينما يبلغ حجم React Query v5 نحو 13kb بعد الضغط باستخدام gzip. ويعكس هذا الفرق في الحجم الميزات الإضافية التي يوفرها React Query، مثل الجلب المسبق للاستعلامات، وإلغاء الاستعلامات، ودورة حياة أكثر تفصيلًا للاستعلام، وDevTools المدمجة.

بالنسبة إلى التطبيقات الحساسة لحجم الحزمة أو أنماط الجلب والعرض البسيطة، يمثل الحجم الأصغر لـ SWR ميزة مهمة.

يمتلك SWR واجهة API أبسط وأكثر minimalistic. إذا كانت حاجتك الأساسية هي جلب البيانات وعرضها مع إعادة التحقق التلقائية، فإن SWR يوفر ذلك بسلاسة مع قدر ضئيل جدًا من الكود التمهيدي.

وبما أن Vercel طوّرت SWR، فإنها تتكامل بشكل ممتاز مع Next.js، ولا سيما عند الجمع بين الجلب المسبق باستخدام getServerSideProps أو getStaticProps وإعادة التحقق من جانب العميل عبر بيانات fallback.

مرّر البيانات التي جرى جلبها مسبقًا إلى SWR من خلال الخيار fallback في SWRConfig أو الخيار fallbackData في useSWR. يستخدم SWR هذه البيانات كقيمة أولية لذاكرة التخزين المؤقت، مما يلغي وميض التحميل الأول مع تمكين إعادة التحقق في الخلفية.

يُعد هذا النمط النهج الموصى به لجلب البيانات في تطبيقات Next.js Pages Router التي تستخدم Vercel.

يوفر React Query تحكمًا أدق في دورة حياة الاستعلام: إذ يمكن ضبط staleTime وgcTime (جمع البيانات المهملة) وrefetchOnWindowFocus وعدد مرات إعادة المحاولة وتأخير إعادة المحاولة كلٌّ على حدة. كما أن نظام mutation الخاص به، مع عمليات الاستدعاء onSuccess وonError وonSettled، مرن ومعبر.

يدعم React Query أيضًا إلغاء الاستعلامات عبر AbortSignal، وهو مفيد لواجهات البحث أثناء الكتابة.

صُممت useInfiniteQuery في React Query مع getNextPageParam خصيصًا للتمرير اللانهائي وأنماط تحميل المزيد. فهي تدير منطق مؤشر الصفحة وتوفر كائن pages مسطحًا أو منظمًا.

توفر SWR الدالة useSWRInfinite التي تغطي احتياجات مشابهة، لكن بواجهة API أقل تجريدًا قليلًا وتتطلب تجميع الصفحات يدويًا بدرجة أكبر.

يدعم React Query الجلب المسبق للاستعلامات عند تمرير المؤشر أو عند تغيير المسار باستخدام queryClient.prefetchQuery. فتكون البيانات موجودة في ذاكرة التخزين المؤقت قبل تحميل المكوّن، مما يوفر تجربة عرض فورية.

لا توفر SWR واجهة API مدمجة للجلب المسبق تتجاوز بيانات fallback من SSR. لذلك يُعد React Query الخيار الأفضل للجلب المسبق عند تمرير المؤشر.

بسّط React Query v5 واجهة API بجعل useQuery يعيد isPending بدلًا من isLoading، وتوحيد أنماط التحديثات التفاؤلية، وتحسين استنتاج TypeScript للأنواع. وتتميز واجهة API في الإصدار v5 بأنها أنظف وأكثر اتساقًا من الإصدارات السابقة.

إذا كنت تقيّم React Query، فاستهدف الإصدار v5 مباشرةً بدلًا من تعلم الإصدار v4 ثم إجراء الترحيل.

تشارك SWR إدخالات ذاكرة التخزين المؤقت عالميًا بين المكونات بحسب المفتاح، من دون أي إعداد لمزوّد الخدمة باستثناء SWRConfig لتحديد القيم الافتراضية. أما React Query فتتطلب QueryClientProvider مع مثيل من QueryClient.

بالنسبة إلى النماذج الأولية السريعة أو التطبيقات البسيطة، تكون ذاكرة التخزين المؤقت العامة في SWR، التي لا تتطلب إعدادًا، أسرع في التجهيز. أما عميل React Query الصريح فهو أفضل للتطبيقات الكبيرة ذات متطلبات التخزين المؤقت المعقدة.

اختر SWR عندما يكون تطبيقك مبنيًا أساسًا على Next.js، وتكون أنماط جلب البيانات بسيطة (جلب ثم عرض ثم إعادة تحقق)، أو عندما تريد تقليل حجم الحزمة، أو عندما يقدّر فريقك بساطة واجهة API أكثر من الميزات المتقدمة.

تُعد SWR أيضًا خيارًا ممتازًا عند إدخال مكتبة لجلب البيانات تدريجيًا إلى قاعدة تعليمات برمجية موجودة من دون إجراء ترحيل كبير.

اختر React Query عندما تحتاج إلى إدارة معقدة لحالة الخادم، مثل التمرير اللانهائي، أو الجلب المسبق للاستعلامات، أو استراتيجيات إعادة الجلب في الخلفية، أو تبعيات الاستعلامات متعددة الخطوات، أو التحكم الدقيق في مدة صلاحية ذاكرة التخزين المؤقت.

يمتلك React Query أيضًا منظومة أكثر نشاطًا من البرمجيات الوسيطة وDevTools، كما يمكن اختبار queryClient بسهولة أكبر بمعزل عن بقية التطبيق.

تستخدم بعض الفرق كليهما: SWR لعمليات جلب الموارد المفردة البسيطة في المكونات الطرفية، وReact Query للصفحات المعقدة التي تتضمن استعلامات متعددة وجلبًا مسبقًا. وهذا أمر غير شائع لكنه صالح إذا كان الفريق متمرسًا في واجهتي API.

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

كيف يُقارن حجم حزمتي SWR وReact Query تقريبًا؟

تتميز SWR (نحو 7kb) بالبساطة، والتكامل الأصلي مع Next.js، وتغطية معظم أنماط الجلب والعرض باستخدام قدر ضئيل من الكود. ويوفر React Query (نحو 13kb) ميزات أغنى، مثل الاستعلامات اللانهائية، والجلب المسبق، وعمليات الاستدعاء الدقيقة لدورة الحياة، وإلغاء الاستعلامات.

اختر SWR للبساطة ومشروعات Next.js، واختر React Query لمتطلبات حالة الخادم المعقدة. ويدعم كلاهما TypeScript وSuspense وSSR وأنماط العمل دون اتصال.