تعزيز أداء Next.js باستخدام TanStack Query (React Query)
اكتشف كيف يحسّن TanStack Query أداء Next.js عبر التخزين المؤقت، التحديث الخلفي، الطفرات، ودمج SSR/SSG.

إدارة حالة الخادم (Server State) بذكاء من أهم مفاتيح الأداء في تطبيقات Next.js، لكنها غالباً ما تُهمَل. الاعتماد على fetch
+ useEffect
بشكل يدوي يؤدي إلى تكرار الطلبات، ووميض حالات التحميل، وتسرب تعقيد في كل مكوّن.
هنا يأتي TanStack Query (المعروف سابقاً بـ React Query) ليحوّل حالة الخادم إلى طبقة مؤتمتة وقابلة للضبط: تخزين مؤقت، إعادة تحقق في الخلفية، وإبطال ذكي بعد الطفرات—all بدون كتابة كود متكرر.
في هذا الدليل نستعرض دمجه في مشروع Next.js (قبل الإصدار 15)، ولماذا يعزّز الأداء، وأنماطاً عملية نستخدمها داخل قوالب Aniq‑UI.
لماذا جلب البيانات يمثل عنق زجاجة خفي؟
أنماط خاطئة شائعة:
- إعادة جلب نفس المورد في عدّة مكوّنات.
- انتقالات صفحات كاملة لتغيير جزء صغير من البيانات.
- خلط حالة الخادم مع الحالة المحلية في مكتبات إدارة الحالة.
- غياب طبقة Cache تؤدي لطلب جديد عند كل تنقل.
- إعادة جلب على تركيز النافذة بلا داعٍ → ضغط على الـ API.
النتيجة: زمن أول بايت محسوس أعلى، استهلاك نطاق زائد، وتجربة تنقل بطيئة.
TanStack Query يضع نموذجاً واضحاً لـ "حديث / قديم / يحتاج إعادة" فتقل المفاجآت.
ماذا يوفر TanStack Query؟
- تجميع وإزالة التكرار: مشاركة النتائج بين المكوّنات.
- Stale-While-Revalidate: عرض فوري من الكاش + تحديث صامت.
- جمع قمامة (GC) تلقائي للاستعلامات غير المستخدمة.
- إبطال دقيق بعد الطفرات بدل إعادة تحميل شامل.
- دعم SSR / SSG مع الترطيب (Hydration) لتحسين الـ SEO والسرعة.
أنت تصف: مفتاح الاستعلام، دالة الجلب، وسياسة الصلاحية… والباقي يُدار آلياً.
التثبيت
متوافق مع App Router في Next.js 13/14. (لا نعتمد على تغييرات Next.js 15+ الجديدة.)
موفر QueryClient عام
في app/layout.tsx
:
جلب البيانات: نمط إمperative مقابل Declarative
بدون TanStack Query:
مع TanStack Query:
الفائدة: كود أبسط، تخزين مؤقت، إعادة استخدام فورية بعد التنقل، طلبات أقل.
الطفرات (Mutations) وإبطال الاستعلامات
سلسلة واضحة: إجراء المستخدم → طفرة → إبطال موجّه → تحديث واجهة حديث.
SSR / SSG Hydration (قبل 15)
مثال Pages Router:
نصائح أداء وهيكلة
- اضبط
staleTime
حسب نوع البيانات. - أوقف إعادة الجلب عند التركيز إن لم يكن ضرورياً.
- قم بعملية prefetch عند hover على الروابط المهمة.
- إبطال محدد بدل إبطال شامل.
- اجمع مفاتيح الاستعلام في ملف صغير لمنع الأخطاء.
- استخدم تحديثات متفائلة لتحسين التجربة.
لماذا نعتمده في قوالب Aniq‑UI
- يقلل الكود المكرّر.
- يحسن شعور السرعة بعد أول انتقال.
- يفصل بين حالة الخادم وواجهة المستخدم.
- يساعد في تحسين مؤشرات Web Vitals.
الخلاصة
TanStack Query يحوّل حالة الخادم من فوضى Effects إلى طبقة Cache متسقة قابلة للتطوير. إن كنت تهتم بالأداء والقابلية للصيانة، فهو إضافة منطقية لكل مشروع أو قالب يعاد استخدامه.
جرّب أمثلة عملية داخل قوالب Next.js الجاهزة على Aniq‑UI.com.
الكلمات المفتاحية SEO: أداء Next.js، React Query، TanStack Query، قوالب Next.js، التخزين المؤقت في Next.js