algolia-search

Original：🇺🇸 English

Translated

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

64installs

Sourcedavila7/claude-code-templates

Added on2026-02-04

NPX Install

npx skill4agent add davila7/claude-code-templates algolia-search

SKILL.md Content

View Translation Comparison →

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 <InstantSearchNext> instead of <InstantSearch> 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:

Full Reindexing - Replace entire index (expensive)
Full Record Updates - Replace individual records
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