Add Search to Your App

For apps with fewer than 100,000 records, Postgres full-text search is often sufficient and requires no additional services. If you need typo tolerance, faceted filtering, or sub-millisecond response times at scale, consider Algolia or Typesense. Algolia has a generous free tier and excellent SDKs but costs money at scale. Typesense is open-source and can be self-hosted if you want to avoid per-search pricing.

Add a `tsvector` column to your table and keep it updated with a trigger that runs `to_tsvector('english', coalesce(title,'') || ' ' || coalesce(body,''))`. Create a GIN index on this column for fast lookups: `CREATE INDEX idx_fts ON posts USING GIN(search_vector)`. Query it with `WHERE search_vector @@ plainto_tsquery('english', $1)` and order by `ts_rank` for relevance. This approach works well for structured content like blog posts, products, or documentation.

Create a GET endpoint at `/api/search` that accepts a `q` query parameter. Sanitize the input to prevent injection and enforce a minimum query length of two characters. Run your database query and return a JSON array of results with only the fields needed for display. Add caching headers or use an in-memory cache for popular queries to reduce database load.

Use a controlled input with a debounced onChange handler — 300ms is a good delay to avoid hammering the API on every keystroke. Display a loading spinner while the request is in flight and show an empty state message when no results are found. Highlight the matched query term in the result titles using a simple regex replace. Consider using the URL search params to persist the query so users can share search results.

Install `algoliasearch` and `react-instantsearch` then initialize the client with your App ID and Search API key. Index your data by calling `index.saveObjects(records)` from a server-side script or webhook whenever your data changes. Use the `InstantSearch`, `SearchBox`, and `Hits` components to build a fully featured search UI with minimal code. Algolia handles typo tolerance, synonyms, and ranking automatically.

Tune relevance by weighting title matches higher than body matches and boosting recently updated records. Add synonym support so searches for 'invoice' also return results for 'receipt'. Log zero-result searches to discover gaps in your content or product catalog. Run A/B tests on ranking changes using Posthog or your analytics tool to measure the impact on click-through rates.