Реализация фасетного поиска для веб-приложения

Пользователь приходит в интернет-магазин, выбирает категорию «ноутбуки» и хочет отфильтровать модели с 16 ГБ RAM, ценой до 100 000 рублей и рейтингом от 4.5. Каждый клик по фильтру должен показывать, сколько товаров соответствует условиям. Если счётчики не обновляются — пользователь теряется и уходит с сайта. Фасетный поиск решает эту задачу: он мгновенно вычисляет количество результатов по каждому измерению (фасету) с учётом всех активных фильтров. Мы внедряем такие механизмы для каталогов любого размера, от 1 000 до 500 000 товаров.

Почему агрегации в Elasticsearch быстрее SQL?

Elasticsearch хранит данные в инвертированном индексе и выполняет агрегации на уровне сегментов без полного сканирования. Для PostgreSQL с jsonb и GIN-индексами сложные многофасетные запросы с фильтрами по нескольким полям могут приводить к N+1 проблемам. Elasticsearch обрабатывает 10–50 фасетов за 10–50 мс на каталоге из 50 000 товаров. Typesense демонстрирует ещё более низкую задержку — до 5 мс — за счёт упрощённого API. Выбор движка напрямую влияет на опыт пользователя и стоимость инфраструктуры.

Как правильно организовать URL-схему фильтров?

Состояние фасетов должно храниться в URL-параметрах. Это обеспечивает возможность делиться ссылками и не ломает историю браузера. Пример схемы: /catalog?category=laptops&brand=apple,samsung&price=50000-150000&page=2. Типизированная модель и функции парсинга/сериализации показаны ниже.

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; } 

Как выбрать движок и архитектуру для фасетного поиска?

Принципиальный вопрос — где выполнять агрегацию. Elasticsearch / OpenSearch — правильный выбор для тысяч позиций и выше. Агрегации выполняются на стороне движка, SQL-запросы не нужны. PostgreSQL с jsonb + gin-индексами — для десятков тысяч позиций, если Elasticsearch избыточен. Typesense / Meilisearch — self-hosted альтернативы с нативной поддержкой фасетов, проще в эксплуатации чем Elasticsearch. На фронтенде client-side подход применим только для небольших датасетов (до 10 000 записей), которые целиком загружаются в браузер, с библиотеками Fuse.js или Lunr.js.

Elasticsearch и Typesense: сравниваем реализацию фасетов

Elasticsearch. Пример запроса с фильтрацией и агрегациями:

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 } 

Особенность фасетного поиска: при выборе фильтра по бренду счётчики в фасете «бренд» должны показывать результаты без учёта этого фильтра (иначе остальные бренды покажут 0). Это решается через post_filter в сочетании с global агрегациями. Подробнее в документации Elasticsearch.

Typesense. Для проектов где Elasticsearch избыточен, Typesense даёт ощутимые преимущества: настройка — один бинарник, API интуитивно понятен. Пример поиска с фасетами на 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 автоматически обновляет счётчики при выборе фильтра, без post_filter. Для сложных каталогов это сокращает время разработки.

React-компоненты фасетов

Хук useFacetSearch управляет состоянием фильтров, синхронизируя его с URL. Компонент CheckboxFacet отрисовывает чекбоксы с счётчиками и поддержкой «показать ещё» для длинных списков. Пример реализации:

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 ? 'Скрыть' : `Показать ещё ${options.length - 5}`} </button> )} </div> ); } 

SEO для фасетного поиска

Фасетные URL с фильтрами создают дублирующийся контент. Стратегия:

• Индексировать страницы категорий без фильтров и самые популярные комбинации (бренд + категория).
• noindex на страницы с ценовыми фильтрами, сортировкой, множественными фильтрами.
• canonical на базовую страницу категории.
• rel="nofollow" на ссылки пагинации глубже 3-й страницы.

// В 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', }; } 

Что входит в работу

Сроки реализации

Мы внедрили фасетный поиск в 15+ e-commerce проектах. Опыт подтверждают десятки успешных запусков. Получите консультацию — оценим ваш каталог и предложим оптимальное решение. Закажите реализацию фасетного поиска уже сегодня.