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

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

Фасетный поиск — это интерфейс фильтрации где пользователь последовательно сужает выборку по нескольким измерениям (фасетам): категория, ценовой диапазон, производитель, рейтинг, атрибуты. Каждый выбранный фильтр обновляет счётчики в остальных фасетах показывая сколько результатов останется при дальнейшем уточнении. Именно эта динамика счётчиков отличает фасетный поиск от обычной фильтрации.

Архитектура: где считать фасеты

Принципиальный вопрос — где происходит агрегация:

Elasticsearch / OpenSearch — правильный выбор для тысяч позиций и выше. Агрегации выполняются на стороне движка, SQL-запросы не нужны.

PostgreSQL с jsonb + gin-индексами — для десятков тысяч позиций, если Elasticsearch избыточен. Медленнее, но позволяет обойтись без дополнительной инфраструктуры.

Typesense / Meilisearch — self-hosted альтернативы с нативной поддержкой фасетов, проще в эксплуатации чем Elasticsearch.

На фронтенде (client-side) — только для небольших датасетов (до 10 000 записей) которые целиком загружаются в браузер. Библиотека Fuse.js или Lunr.js.

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 aggregation:

{
  "query": { "match_all": {} },
  "post_filter": {
    "term": { "brand.keyword": "Apple" }
  },
  "aggs": {
    "all_brands": {
      "global": {},
      "aggs": {
        "brands": {
          "terms": { "field": "brand.keyword", "size": 20 }
        }
      }
    },
    "filtered_price": {
      "filter": { "term": { "brand.keyword": "Apple" } },
      "aggs": {
        "price_stats": { "stats": { "field": "price" } }
      }
    }
  }
}

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

React: компоненты фасетного поиска

Хук для управления состоянием с debounce:

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

Ценовой слайдер

import * as Slider from '@radix-ui/react-slider';

interface PriceRangeProps {
  min: number;
  max: number;
  value: [number, number];
  onChange: (value: [number, number]) => void;
}

export function PriceRange({ min, max, value, onChange }: PriceRangeProps) {
  return (
    <div className="price-range">
      <div className="price-range__inputs">
        <input
          type="number"
          value={value[0]}
          min={min}
          max={value[1]}
          onChange={(e) => onChange([Number(e.target.value), value[1]])}
        />
        <span>—</span>
        <input
          type="number"
          value={value[1]}
          min={value[0]}
          max={max}
          onChange={(e) => onChange([value[0], Number(e.target.value)])}
        />
      </div>
      <Slider.Root
        min={min}
        max={max}
        value={value}
        onValueChange={onChange as (v: number[]) => void}
        step={1000}
      >
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb />
        <Slider.Thumb />
      </Slider.Root>
    </div>
  );
}

Typesense: альтернатива Elasticsearch

Для проектов где Elasticsearch избыточен:

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(' && ');
}

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

Сроки

• Простой фасетный поиск (PostgreSQL, до 5 фасетов, без счётчиков): 3–5 дней
• Полноценный с Elasticsearch/Typesense (агрегации, счётчики, post_filter, URL-состояние, SEO): 2–3 недели
• С кастомным ценовым слайдером, instant search, мобильным выдвижным меню: ещё 3–5 дней