vercel-react-best-practices
تحسين أداء React و Next.js
متاح أيضًا من: ZhanlinCui,vercel-labs,am-will
ابنِ تطبيقات React و Next.js أسرع باستخدام أنماط الأداء المجربة. توفر هذه المهارة إرشادات عملية من Vercel Engineering للقضاء على مشاكل waterfalls، وتقليل حجم الحزمة، وتحسين العرض.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "vercel-react-best-practices". مكون مع fetches useEffect متسلسلة
النتيجة المتوقعة:
المشكلة: ثلاثة hooks useEffect تجلب البيانات بشكل متسلسل، مما يسبب render waterfall. الحل: اجمع عمليات الجلب في useEffect واحدة مع Promise.all() أو حول الأب إلى مكون خادم.
استخدام "vercel-react-best-practices". عبارة import تسحب مكتبة lodash كاملة
النتيجة المتوقعة:
المشكلة: import _ from lodash يضيف 72KB إلى الحزمة. الحل: استخدم عمليات استيراد قابلة لـ tree-shaking مثل import debounce from lodash/debole أو انتقل إلى lodash-es لتحسين أفضل للحزمة.
استخدام "vercel-react-best-practices". مكون يعيد حساب قيمة مكلفة في كل عرض
النتيجة المتوقعة:
المشكلة: الحساب المكلف يعمل في كل عرض. الحل: لفه في useMemo مع التبعيات المناسبة، أو استخراجه إلى مكون memo منفصل يعيد العرض فقط عندما تتغير المدخلات.
التدقيق الأمني
آمنStatic analysis detected 911 pattern matches across 51 files (4901 lines), but all findings are FALSE POSITIVES. The skill is a documentation-only repository containing React/Next.js performance optimization guidelines in markdown format. Detected patterns (shell commands, dynamic imports, fetch calls, storage access) exist solely as code examples within documentation, not as executable code. No actual security risks identified.
درجة الجودة
ماذا يمكنك بناءه
بناء ميزات React الجديدة
مطورو React الذين يبنون ميزات جديدة يكتبون مكونات بأداء أمثل من البداية، مع اتباع أنماط Vercel المعتمدة لجلب البيانات والعرض وتحسين الحزمة
مراجعة طلبات السحب
الفرق التي تراجع طلبات السحب تتحقق من الكود من أنماط الأداء السيئة قبل الدمج، وتكتشف waterfalls وإعادة العرض غير الضرورية وتضخم الحزمة مبكراً في التطوير
الانتقال إلى Next.js App Router
المهندسون الذين ينتقلون إلى Next.js App Router يحولون أنماط جانب العميل إلى بنية مكونات الخادم، ويتعلمون الاستخدام الصحيح لتخزين الخادم المؤقت وحدود التسلسل وجلب البيانات المتوازي
جرّب هذه الموجهات
راجع مكون React هذا من مشاكل الأداء. حدد أي render waterfalls أو إعادة عرض غير ضرورية أو فرص تحسين الحزمة. اقترح تحسينات محددة بناءً على أفضل ممارسات Vercel.
يجلب هذا المكون البيانات بشكل متسلسل. أعد هيكلته للجلب ��التوازي باستخدام Promise.all() أو أعد هيكلته كمكونات خادم. اشرح أي نهج أفضل لحالة الاستخدام هذه.
حلل جلب البيانات لمكون الخادم هذا. أوصي باستراتيجية تخزين مؤقت باستخدام React.cache() لإلغاء التكرار لكل طلب أو تخزين مؤقت LRU للتحسين عبر الطلبات. اinclude اعتبارات إبطال التخزين المؤقت.
صمم لوحة معلومات مع 10+ أدوات تعرض البيانات الفورية والتاريخية. حدد: 1) حدود مكونات الخادم والعميل، 2) استراتيجية جلب البيانات والتخزين المؤقت، 3) حالات التحميل مع Suspense، 4) تحسين الحزمة لمكتبات الرسم البيانية التابعة لجهات خارجية.
أفضل الممارسات
- ابدأ الوعود مبكراً وأنتظر متأخراً - ابدأ جلب البيانات قبل الحاجة إليها، وأجل await حتى تصبح القيمة مطلوبة
- استخدم مكونات الخادم افتراضياً - أضف 'use client' فقط عندما تكون مطلوب APIs المتصفح أو التفاعلية
- فضل SWR أو React Query لجلب بيانات العميل - تخزين مؤقت مدمج، وإلغاء التكرار، وإعادة التحقق
تجنب
- جلب البيانات المتسلسل في hooks useEffect منفصلة - يسبب render waterfalls
- استيراد مكتبات أدوات كاملة - حزم منتفخة، استخدم استيرادات محددة بدلاً من ذلك
- استخدام && للعرض الشرطي للمكونات التي تعرض '0' - استخدم عامل ثلاثي