algolia-search
Implémenter la recherche Algolia avec React InstantSearch
L'ajout de la recherche aux applications web nécessite de comprendre les stratégies d'indexation complexes et les modèles d'interface utilisateur. Cette compétence fournit des conseils experts sur l'intégration d'Algolia, les hooks React InstantSearch et le paramétrage de la pertinence pour des expériences de recherche optimales.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "algolia-search". Create a search box with instant results
Résultat attendu:
Un composant React utilisant le hook useSearchBox pour la gestion de la saisie et useHits pour afficher les résultats de recherche en temps réel, enveloppé dans un fournisseur InstantSearch avec la configuration Algolia appropriée.
Utilisation de "algolia-search". How do I implement category filtering?
Résultat attendu:
Utiliser le hook useRefinementList avec l'attribut défini sur votre champ de catégorie. Le connecter à un composant RefinementList qui affiche des cases à cocher pour chaque option de catégorie avec le nombre de résultats.
Audit de sécurité
SûrStatic 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.
Score de qualité
Ce que vous pouvez construire
Recherche de produits e-commerce
Implémenter une recherche de produits rapide et à facettes avec des filtres de catégories, des plages de prix et des résultats instantanés pour les boutiques en ligne.
Recherche sur site de documentation
Ajouter la recherche prédictive aux sites de documentation avec un paramétrage de la pertinence pour le contenu technique et les références API.
Portail de découverte de contenu
Créer des hubs de contenu consultables avec pagination, tri et recherche multi-index pour les blogs ou les médias.
Essayez ces prompts
Créer un composant de recherche React en utilisant les hooks Algolia InstantSearch. Inclure une zone de recherche, l'affichage des résultats et un style de base pour un catalogue de produits simple.
Implémenter la recherche à facettes avec des listes de raffinement pour les catégories, les plages de prix et les filtres de marque. Utiliser useRefinementList et configurer les paramètres d'index Algolia pour le facettage.
Configurer Algolia InstantSearch avec le rendu côté serveur Next.js en utilisant le composant InstantSearchNext. Inclure la synchronisation URL et la gestion de l'état initial du serveur pour une application App Router.
Concevoir une stratégie d'indexation pour garder Algolia synchronisé avec une base de données PostgreSQL. Implémenter partialUpdateObjects pour les changements d'attributs uniquement et les enregistrements par lots efficacement sans utiliser deleteBy.
Bonnes pratiques
- Grouper les opérations d'indexation par lots de 10 Mo ou 1K-10K enregistrements par lot pour une performance optimale
- Utiliser partialUpdateObjects au lieu du remplacement complet de l'enregistrement lors de la mise à jour d'attributs spécifiques
- Éviter les opérations deleteBy car elles sont coûteuses en calcul - utiliser la suppression d'objets avec batch à la place
Éviter
- Effectuer une réindexation complète à chaque changement de données au lieu de mises à jour incrémentielles
- Envoyer des enregistrements individuels à Algolia au lieu de grouper les opérations
- Utiliser deleteBy pour les suppressions en masse au lieu de la suppression d'objets par lots