المهارات algolia-search
📦

algolia-search

آمن

تنفيذ بحث Algolia مع React InstantSearch

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

يدعم: Claude Codex Code(CC)
🥉 74 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "algolia-search". إنشاء مربع بحث مع نتائج فورية

النتيجة المتوقعة:

مكون React يستخدم خطاط useSearchBox لمعالجة الإدخال و useHits لعرض نتائج البحث في الوقت الفعلي، مغلف في مزود InstantSearch مع تكوين Algolia مناسب.

استخدام "algolia-search". كيف يمكنني تنفيذ تصفية الفئات؟

النتيجة المتوقعة:

استخدم خطاط useRefinementList مع السمة المضبوطة على حقل الفئة الخاصة بك. قم بتوصيله بمكون RefinementList الذي يعرض مربعات اختيار لكل خيار فئة مع عدد النتائج.

التدقيق الأمني

آمن
v1 • 2/24/2026

Static analysis flagged 3 patterns as potential security issues, but all are false positives. The flagged lines contain documentation text about Algolia search implementation, not executable code. Line 3 and 70 contain descriptive text misidentified as weak crypto. Line 53 discusses Algolia indexing best practices, not system reconnaissance. This is a documentation-only skill file with no security risks.

1
الملفات التي تم فحصها
71
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

بحث المنتجات للتجارة الإلكترونية

تنفيذ بحث سريع متعدد الجوانب للمنتجات مع مرشحات الفئات والنطاقات السعرية والنتائج الفورية للمتاجر الإلكترونية.

بحث موقع التوثيق

إضافة بحث الإكمال التلقائي إلى مواقع التوثيق مع ضبط الصلة للمحتوى التقني ومراجع API.

بوابة اكتشاف المحتوى

بناء محاور محتوى قابلة للبحث مع ترقيم الصفحات والترتيب والبحث متعدد الفهارس للمدونات أو مكتبات الوسائط.

جرّب هذه الموجهات

إعداد مكون البحث الأساسي
إنشاء مكون بحث React باستخدام خطاطات Algolia InstantSearch. يتضمن مربع بحث وعرض النتائج وتنسيقًا أساسيًا لكتالوج منتجات بسيط.
البحث المتعدد الجوانب مع المرشحات
تنفيذ بحث متعدد ا��جوانب مع قوائم تنقية للفئات والنطاقات السعرية ومرشحات العلامات التجارية. استخدام useRefinementList وتكوين إعدادات فهرس Algolia للتعدد الجانبي.
تنفيذ بحث SSR في Next.js
إعداد Algolia InstantSearch مع العرض من جانب الخادم في Next.js باستخدام مكون InstantSearchNext. يتضمن مزامنة URL ومعالجة الحالة الأولية للخادم لتطبيق App Router.
استراتيجية التحديث التزايدي للفهرس
تصميم استراتيجية فهرسة للحفاظ على مزامنة Algolia مع قاعدة بيانات PostgreSQL. تنفيذ partialUpdateObjects للتغييرات الخاصة بالسمات فقط وتجميع السجلات بكفاءة دون استخدام deleteBy.

أفضل الممارسات

  • عمليات الفهرسة المجمعة بـ 10 ميجابايت أو 1K-10K سجل لكل دفعة للأداء الأمثل
  • استخدم partialUpdateObjects بدلاً من استبدال السجل الكامل عند تحديث سمات محددة فقط
  • تجنب عمليات deleteBy لأنها مكلفة حسابيًا - استخدم حذف الكائن مع الدُفعات بدلاً من ذلك

تجنب

  • إجراء إعادة فهرسة كاملة عند كل تغيير في البيانات بدلاً من التحديثات التزايدي
  • إرسال سجلات فردية إلى Algolia بدلاً من تجميع العمليات
  • استخدام deleteBy للحذف الجماعي بدلاً من حذف الكائن المجمّع

الأسئلة المتكررة

ما هو الفرق بين إعادة الفهرسة الكاملة والتحديثات الجزئية؟
إعادة الفهرسة الكاملة تستبدل الفهرس بالكامل، وهو أمر مكلف وبطيء. التحديثات الجزئية تعدل فقط سمات محددة من السجلات الموجودة باستخدام partialUpdateObjects، وهو أكثر كفاءة بكثير للتغييرات المتكررة.
كيف يمكنني تمكين العرض من جانب الخادم لـ Algolia في Next.js؟
استخدم حزمة react-instantsearch-nextjs وقم بتغليف مكونات البحث الخاصة بك مع InstantSearchNext بدلاً من InstantSearch. قم بتكوين getServerState للحالة الأولية واضبط dynamic = 'force-dynamic' للحصول على نتائج جديدة.
ما هو حجم الدفعة الأمثل للفهرسة؟
حجم الدفعة المثالي هو 10 ميجابايت أو حوالي 1K-10K سجل لكل دفعة. هذا يوازن بين أداء API واستخدام الذاكرة ويجنب مشاكل انتهاء المهلة.
لماذا يجب أن أتجنب طريقة deleteBy؟
deleteBy مكلف حسابيًا لأنه يفحص ويتطابق مع السجلات قبل الحذف. للحذف الجماعي، من الأكثر كفاءة جلب معرفات الكائنات واستخدام عمليات الحذف المجمعة.
ما هي خطاطات React المتاحة لـ InstantSearch؟
الخطاطات الرئيسية تشمل useSearchBox لإدخال البحث و useHits للنتائج و useRefinementList لمرشحات الجوانب و usePagination لتنقل الصفحات و useInstantSearch للوصول الكامل إلى الحالة.
هل يمكنني استخدام Algolia مع Next.js App Router؟
نعم، react-instantsearch-nextjs يدعم كل من Pages Router و App Router. دعم App Router يُعتبر تجريبيًا ولكنه وظيفي مع التكوين الصحيح لمكونات الخادم والتدفق.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

مرجع

main

بنية الملفات

📄 SKILL.md