Как добавить поиск на сайт без бэкенда
Вы создали статический сайт или JAMstack-приложение. Оно быстрое, недорогое в хостинге и простое в обслуживании. Но теперь пользователи хотят функцию поиска, и вы задаётесь вопросом: действительно ли мне нужно разворачивать сервер или базу данных только ради этого?
Короткий ответ — нет. Современные подходы позволяют реализовать клиентский поиск без серверной инфраструктуры, сохраняя при этом полностью статический характер сайта. В этом руководстве рассматриваются три практических варианта: поиск для статических сайтов с помощью Pagefind, JavaScript-библиотеки для работы в браузере и решения на основе хостинговых API поиска.
Ключевые выводы
- Поиск на статическом сайте не требует работающего сервера — индексы распространяются как статические файлы вместе с вашим HTML
- Pagefind является современным стандартом для большинства статических сайтов, используя фрагментированные индексы и Web Workers для эффективной производительности
- Браузерные библиотеки, такие как Lunr.js и Fuse.js, хорошо работают для небольших сайтов, но испытывают трудности с большими размерами индексов
- Хостинговые API поиска предлагают расширенные функции за счёт стоимости, соображений конфиденциальности и зависимости от поставщика
Что на самом деле означает «без бэкенда»
Когда мы говорим о поиске на статическом сайте или клиентском поиске без бэкенда, мы имеем в виду отсутствие работающего сервера, который вам нужно поддерживать. Ваш сайт остаётся набором статических файлов, обслуживаемых из CDN или простого хостинга.
Однако большинство подходов всё же требуют этапа сборки. Во время развёртывания вы генерируете поисковый индекс из вашего контента. Этот индекс распространяется как статические файлы вместе с вашим HTML — никакой сервер не обрабатывает запросы во время выполнения.
Поиск происходит либо полностью в браузере пользователя, либо через API-вызовы к управляемому стороннему сервису.
Pagefind: современный стандарт для статических сайтов
Pagefind стал основным решением для поиска на статических сайтах. Он запускается после сборки вашего сайта, сканирует ваш HTML и генерирует фрагментированный поисковый индекс.
Как работает Pagefind
В отличие от старых инструментов, которые создают один большой файл индекса, Pagefind разбивает индекс на фрагменты. Когда пользователи выполняют поиск, их браузер загружает только соответствующие фрагменты через Web Workers. Это обеспечивает быструю начальную загрузку страниц, поддерживая при этом сайты с тысячами страниц.
Pagefind включает готовые UI-компоненты, хорошо обрабатывает многоязычный контент и работает с любым генератором статических сайтов — Hugo, Eleventy, Astro или обычным HTML.
Когда выбирать Pagefind
Pagefind хорошо подходит для большинства статических сайтов. Он справляется с сайтами документации, блогами и маркетинговыми страницами без сложностей в настройке. Компромисс заключается в этапе сборки: ваш CI-конвейер должен запускать Pagefind после генерации HTML.
Для сайтов с многими тысячами страниц Pagefind обычно показывает хорошую производительность с управляемыми размерами индексов.
Клиентские библиотеки: Lunr, Fuse и их ограничения
До появления Pagefind разработчики часто обращались к библиотекам вроде Lunr.js или Fuse.js. Они всё ещё работают, но имеют реальные ограничения.
Проблема размера индекса
Эти библиотеки требуют загрузки всего поискового индекса в память браузера. Для небольшого блога это нормально — может быть, 50 КБ. Для более крупных сайтов индексы могут раздуться до нескольких мегабайт, ухудшая производительность на мобильных устройствах и медленных соединениях.
Когда имеют смысл браузерные библиотеки
Рассмотрите Lunr или Fuse, когда:
- Ваш сайт содержит менее нескольких сотен страниц
- Вам нужно нечёткое сопоставление или пользовательская логика оценки
- Вы хотите избежать внешних зависимостей
Для чего-то большего фрагментированный подход Pagefind или хостинговый API поиска будут лучше обслуживать пользователей.
Discover how at OpenReplay.com.
Хостинговые API поиска: Algolia и альтернативы
Иногда вам нужны функции, выходящие за рамки того, что предоставляют статические индексы — исправление опечаток, персонализация, аналитика или индексация в реальном времени для часто обновляемого контента.
Как работает хостинговый поиск
Сервисы вроде Algolia (включая DocSearch для сайтов документации) и Orama Cloud поддерживают инфраструктуру поиска. Вы загружаете индекс вашего контента, затем запрашиваете их API из вашего фронтенд-JavaScript.
Вы не запускаете бэкенд — это делают они. Ваш сайт остаётся статическим, получая при этом мощные возможности поиска.
Компромиссы, которые стоит учитывать
Стоимость: Большинство сервисов предлагают бесплатные тарифы с ограничениями по использованию. Ожидайте платить по мере роста вашего сайта или увеличения трафика.
Конфиденциальность: Сторонние скрипты могут иметь последствия в рамках GDPR. Поисковые запросы проходят через внешние серверы, что важно для некоторых случаев использования.
Зависимость от поставщика: Вы полагаетесь на их время работы и продолжение обслуживания.
Для крупных сайтов, динамического контента или расширенных функций хостинговые API часто оправдывают эти компромиссы.
Выбор правильного подхода
| Подход | Лучше всего для | Основной компромисс |
|---|---|---|
| Pagefind | Большинство статических сайтов | Требует этапа сборки |
| Lunr/Fuse | Небольшие сайты, пользовательская логика | Ограничения размера индекса |
| Хостинговые API | Крупные/динамические сайты | Стоимость, конфиденциальность, зависимость |
Начните с Pagefind для типичных потребностей поиска на статических сайтах. Переходите к хостинговым решениям, когда перерастёте статические индексы или потребуются расширенные функции.
Заключение
Добавление поиска на ваш сайт без бэкенда вполне практично. Pagefind элегантно справляется с большинством статических сайтов, браузерные библиотеки работают для небольших проектов, а хостинговые решения API поиска масштабируются при необходимости.
Ключ в том, чтобы сопоставить ваш выбор с размером вашего сайта, частотой обновлений и требованиями к функциям. Для большинства JAMstack-сайтов Pagefind предлагает лучший баланс простоты и возможностей без ущерба для вашей настройки статического хостинга.
Часто задаваемые вопросы
Да, Pagefind работает с любым генератором статических сайтов, включая Hugo, Eleventy, Astro, Jekyll и обычный HTML. Он запускается как пост-сборочный шаг, который сканирует ваши сгенерированные HTML-файлы, поэтому остаётся независимым от того, как эти файлы были созданы. Вы просто указываете ему на вашу выходную директорию после завершения сборки.
Для часто обновляемого контента лучшим вариантом являются хостинговые API поиска, такие как Algolia или Orama Cloud. Они поддерживают индексацию в реальном времени через вебхуки или API-вызовы при каждом изменении контента. Статические решения, такие как Pagefind, требуют полной пересборки и повторного развёртывания для обновления поискового индекса.
Производительность варьируется в зависимости от подхода. Pagefind минимизирует влияние, загружая только соответствующие фрагменты индекса по требованию. Библиотеки вроде Lunr и Fuse загружают весь индекс в память, что может вызвать заметные задержки на мобильных устройствах для сайтов с сотнями страниц или индексами, превышающими несколько сотен килобайт.
Да, но с ограничениями. Хостинговые API поиска позволяют индексировать контент отдельно и запрашивать через JavaScript без изменения процесса сборки. В качестве альтернативы вы можете вручную создать файл индекса JSON, хотя это становится непрактичным для более крупных сайтов. Для большинства статических сайтов индексация во время сборки предлагает лучший баланс.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
