| name | algolia-search |
|---|---|
| description | Expert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Use when: adding search to, algolia, instantsearch, search api, search functionality. |
| source | vibeship-spawner-skills (Apache 2.0) |
Algolia Search Integration
Patterns
React InstantSearch with Hooks
Modern React InstantSearch setup using hooks for type-ahead search.
Uses react-instantsearch-hooks-web package with algoliasearch client. Widgets are components that can be customized with classnames.
Key hooks: - useSearchBox: Search input handling - useHits: Access search results - useRefinementList: Facet filtering - usePagination: Result pagination - useInstantSearch: Full state access
Next.js Server-Side Rendering
SSR integration for Next.js with react-instantsearch-nextjs package.
Use instead of for SSR. Supports both Pages Router and App Router (experimental).
Key considerations: - Set dynamic = 'force-dynamic' for fresh results - Handle URL synchronization with routing prop - Use getServerState for initial state
Data Synchronization and Indexing
Indexing strategies for keeping Algolia in sync with your data.
Three main approaches: 1. Full Reindexing - Replace entire index (expensive) 2. Full Record Updates - Replace individual records 3. Partial Updates - Update specific attributes only
Best practices: - Batch records (ideal: 10MB, 1K-10K records per batch) - Use incremental updates when possible - partialUpdateObjects for attribute-only changes - Avoid deleteBy (computationally expensive)
⚠️ Sharp Edges
| Issue | Severity | Solution |
|---|---|---|
| Issue | critical | See docs |
| Issue | high | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |