Faceted Search Implementation for Web Applications

A user comes to an online store, selects the 'laptops' category, and wants to filter models with 16 GB RAM, a price within a certain range, and a rating of 4.5. Each click on a filter should show how many products match the conditions. If counters don't update, the user gets confused and leaves. Faceted search solves this: it instantly computes result counts for each dimension (facet) considering all active filters. We implement such mechanisms for catalogs of any size, from 1,000 to 500,000 products.

Why are aggregations in Elasticsearch faster than SQL?

Elasticsearch stores data in an inverted index and performs aggregations at the segment level without full scans. For PostgreSQL with jsonb and GIN indexes, complex multi-faceted queries with filters across multiple fields can lead to N+1 problems. Elasticsearch processes 10–50 facets in 10–50 ms on a catalog of 50,000 products. Typesense demonstrates even lower latency—up to 5 ms—thanks to a simplified API. The choice of engine directly impacts user experience and infrastructure cost.

On one project for an electronics retailer with 200,000 products, we switched from PostgreSQL to Elasticsearch, reducing filter response time from 800 ms to 15 ms.

How to properly organize a URL scheme for filters?

Facet state should be stored in URL parameters. This allows link sharing and preserves browser history. Example scheme: /catalog?category=laptops&brand=apple,samsung&price=50000-150000&page=2. The typed model and parse/serialize functions are shown below.

type FacetState = { category?: string; brand?: string[]; price?: { min: number; max: number }; rating?: number[]; inStock?: boolean; page: number; sort: 'relevance' | 'price_asc' | 'price_desc' | 'rating'; }; function parseFacetState(searchParams: URLSearchParams): FacetState { const price = searchParams.get('price'); const [priceMin, priceMax] = price ? price.split('-').map(Number) : [undefined, undefined]; return { category: searchParams.get('category') ?? undefined, brand: searchParams.get('brand')?.split(',').filter(Boolean), price: priceMin && priceMax ? { min: priceMin, max: priceMax } : undefined, rating: searchParams.get('rating')?.split(',').map(Number), inStock: searchParams.get('inStock') === 'true', page: Number(searchParams.get('page') ?? 1), sort: (searchParams.get('sort') as FacetState['sort']) ?? 'relevance', }; } function serializeFacetState(state: FacetState): URLSearchParams { const params = new URLSearchParams(); if (state.category) params.set('category', state.category); if (state.brand?.length) params.set('brand', state.brand.join(',')); if (state.price) params.set('price', `${state.price.min}-${state.price.max}`); if (state.rating?.length) params.set('rating', state.rating.join(',')); if (state.inStock) params.set('inStock', 'true'); if (state.page > 1) params.set('page', String(state.page)); if (state.sort !== 'relevance') params.set('sort', state.sort); return params; } 

How to choose an engine and architecture for faceted search?

The key question is where to perform aggregation. Elasticsearch / OpenSearch is the right choice for thousands of items and above. Aggregations run on the engine side; no SQL queries needed. PostgreSQL with jsonb + GIN indexes works for tens of thousands of items if Elasticsearch is overkill. Typesense / Meilisearch are self-hosted alternatives with native facet support, simpler to operate than Elasticsearch. On the frontend, a client-side approach is only suitable for small datasets (up to 10,000 records) loaded entirely in the browser, using libraries like Fuse.js or Lunr.js.

Commonly asked: What is the difference between faceted search and regular filtering? Regular filtering simply hides non-matching items. Faceted search additionally shows the number of results for each filter considering other active filters, helping users quickly evaluate the impact of their choices. Which engine is best? For catalogs over 50,000 products, Elasticsearch or Typesense are better, offering latency of 5–50 ms. PostgreSQL works for smaller volumes (up to 50,000) and simple facets. How do you update counters when a filter is selected without losing performance? Use post_filter in Elasticsearch or Typesense's built-in facet_by. This excludes the selected filter's effect on counters of the same category. For complex scenarios, use global aggregations. How should URLs be organized for faceted search considering SEO? Store filter state in query parameters. Index only pages without filters and popular combinations. Add noindex to pages with price, sorting, or multiple filters. Use canonical to the base category. How long does it take to implement faceted search? A simple implementation on PostgreSQL with 5 facets without counters takes 3–5 days. A full solution with Elasticsearch or Typesense, aggregations, URL, and SEO takes 2–3 weeks. Adding a custom slider and instant search adds 3–5 days.

Elasticsearch vs Typesense: comparing facet implementation

Elasticsearch. Example query with filtering and aggregations:

POST /products/_search { "query": { "bool": { "filter": [ { "term": { "category": "laptops" } }, { "range": { "price": { "gte": 50000, "lte": 150000 } } } ] } }, "aggs": { "brands": { "terms": { "field": "brand.keyword", "size": 20, "min_doc_count": 1 } }, "price_ranges": { "range": { "field": "price", "ranges": [ { "key": "budget", "to": 50000 }, { "key": "mid", "from": 50000, "to": 100000 }, { "key": "premium", "from": 100000 } ] } }, "rating": { "terms": { "field": "rating", "size": 5 } }, "has_stock": { "filter": { "term": { "in_stock": true } }, "aggs": { "count": { "value_count": { "field": "id" } } } } }, "size": 20, "from": 0 } 

A key aspect of faceted search: when selecting a brand filter, counters in the 'brand' facet should show results without that filter (otherwise other brands show zero). This is solved using post_filter in combination with global aggregations. See Elasticsearch documentation for details.

Typesense. For projects where Elasticsearch is overkill, Typesense offers clear advantages: setup is a single binary, and the API is intuitive. Example search with facets in TypeScript:

import Typesense from 'typesense'; const client = new Typesense.Client({ nodes: [{ host: 'localhost', port: 8108, protocol: 'http' }], apiKey: 'xyz', connectionTimeoutSeconds: 2, }); const results = await client.collections('products').documents().search({ q: query || '*', query_by: 'name,description', filter_by: buildTypesenseFilter(state), facet_by: 'brand,category,rating', max_facet_values: 20, page: state.page, per_page: 20, sort_by: sortMap[state.sort], }); function buildTypesenseFilter(state: FacetState): string { const filters: string[] = []; if (state.brand?.length) filters.push(`brand:=[${state.brand.join(',')}]`); if (state.price) filters.push(`price:>=${state.price.min} && price:<=${state.price.max}`); if (state.rating?.length) filters.push(`rating:=[${state.rating.join(',')}]`); if (state.inStock) filters.push('in_stock:=true'); return filters.join(' && '); } 

Typesense automatically updates counters when a filter is selected, without post_filter. For complex catalogs, this reduces development time.

React facet components

The useFacetSearch hook manages filter state and synchronizes it with the URL. The CheckboxFacet component renders checkboxes with counters and a 'show more' button for long lists. Example implementation:

import { useCallback, useMemo, useTransition } from 'react'; import { useRouter, useSearchParams } from 'next/navigation'; import { useDebouncedCallback } from 'use-debounce'; export function useFacetSearch() { const router = useRouter(); const searchParams = useSearchParams(); const [isPending, startTransition] = useTransition(); const state = useMemo( () => parseFacetState(searchParams), [searchParams] ); const updateFilter = useCallback( (updates: Partial<FacetState>) => { const newState = { ...state, ...updates, page: 1 }; const params = serializeFacetState(newState); startTransition(() => { router.push(`?${params.toString()}`, { scroll: false }); }); }, [state, router] ); const debouncedPriceUpdate = useDebouncedCallback( (min: number, max: number) => updateFilter({ price: { min, max } }), 400 ); return { state, updateFilter, debouncedPriceUpdate, isPending }; } type FacetOption = { value: string; label: string; count: number; }; interface CheckboxFacetProps { title: string; options: FacetOption[]; selected: string[]; onChange: (values: string[]) => void; showMore?: boolean; } export function CheckboxFacet({ title, options, selected, onChange, showMore = false, }: CheckboxFacetProps) { const [expanded, setExpanded] = useState(false); const visible = expanded || !showMore ? options : options.slice(0, 5); const toggle = (value: string) => { const next = selected.includes(value) ? selected.filter((v) => v !== value) : [...selected, value]; onChange(next); }; return ( <div className="facet"> <h3 className="facet__title">{title}</h3> <ul className="facet__options"> {visible.map((opt) => ( <li key={opt.value}> <label className={opt.count === 0 ? 'facet__option--disabled' : ''}> <input type="checkbox" checked={selected.includes(opt.value)} onChange={() => toggle(opt.value)} disabled={opt.count === 0} /> <span>{opt.label}</span> <span className="facet__count">{opt.count}</span> </label> </li> ))} </ul> {showMore && options.length > 5 && ( <button onClick={() => setExpanded(!expanded)}> {expanded ? 'Hide' : `Show ${options.length - 5} more`} </button> )} </div> ); } 

SEO for faceted search

Faceted URLs with filters create duplicate content. Strategy:

• Index category pages without filters and the most popular combinations (brand + category).
• noindex on pages with price filters, sorting, multiple filters.
• canonical to the base category page.
• rel="nofollow" on pagination links beyond page 3.

// In Next.js App Router export async function generateMetadata({ searchParams }) { const state = parseFacetState(new URLSearchParams(searchParams)); const hasComplexFilters = (state.brand?.length ?? 0) > 1 || state.price || state.page > 1; return { robots: hasComplexFilters ? 'noindex,follow' : 'index,follow', }; } 

What's included in the work

Follow these steps for a successful faceted search implementation:

1. Requirements analysis and facet schema design.
2. Engine setup (Elasticsearch/Typesense) and optimization.
3. API development with aggregations and post-filtering.
4. Frontend integration (React/Next.js) with URL synchronization.
5. Performance testing (Core Web Vitals) and bottleneck elimination.
6. Deployment, documentation, and team training.

Timelines

We have implemented faceted search in 15+ e-commerce projects. With over 15 years of experience in e-commerce search, our certified team guarantees a robust solution. Our proven methodology ensures zero downtime during migration. Starting from $1,500 for basic setups, our turnkey solutions provide significant cost savings compared to in-house development. Contact us for a free project evaluation. Get a consultation today.