Toolverse
All skills

algolia-search

by davila7

Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Use when: adding search to, algolia, instantsearch, search api, search functionality.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
davila7
Category
Frontend

About this skill

Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Use when: adding search to, algolia, instantsearch, search api, search functionality.

How to use

  1. Zainstaluj pakiet react-instantsearch-hooks-web oraz klienta algoliasearch w swoim projekcie React. Pakiet zawiera wszystkie niezbędne komponenty i hooki do implementacji wyszukiwarki.

  2. Skonfiguruj React InstantSearch, używając hooków takich jak useSearchBox do obsługi pola wyszukiwania, useHits do dostępu do wyników, useRefinementList do filtrowania fasetowego i usePagination do paginacji. Każdy hook można dostosować za pomocą classnames.

  3. Jeśli pracujesz z Next.js, zamiast standardowego komponentu InstantSearch użyj InstantSearchNext z pakietu react-instantsearch-nextjs. Ustaw dynamic = 'force-dynamic' w komponencie, aby zapewnić świeże wyniki, i skonfiguruj synchronizację URL-a z routingiem.

  4. Zaimplementuj strategię indeksowania danych. Wybierz między pełnym przebudowaniem indeksu (gdy zmienia się wiele danych), aktualizacją całych rekordów lub aktualizacją częściową atrybutów. Dla zmian pojedynczych pól użyj partialUpdateObjects.

  5. Przygotuj dane do wysłania do Algolii, batching je w grupy po 1000-10000 rekordów, idealnie do 10MB na batch. Unikaj deleteBy ze względu na wysokie koszty obliczeniowe; zamiast tego aktualizuj rekordy inkrementalnie.

Related skills