Проблема интерактивности в статике
Статические сайты (SSG) завоевали популярность благодаря своей скорости и простоте хостинга. Однако отсутствие сервера создает очевидную проблему: как обрабатывать ввод пользователя? Форма обратной связи, подписка на рассылку или оформление заказа требуют места, куда данные будут отправлены и где они будут обработаны.
Раньше это означало необходимость поднимать отдельный сервер на Node.js или PHP только ради одной формы. Сегодня это избыточно. Экосистема «бессерверных» (serverless) решений позволяет реализовать любую интерактивность, сохраняя все преимущества статического сайта. Разберем, как это работает на практике.
Встроенные решения провайдеров (Netlify и Vercel)
Самый простой путь для тех, кто хостится на современных платформах — использование их нативных функций. Например, Netlify Forms активируется добавлением одного атрибута `data-netlify="true"` к обычному тегу `<form>`.
При деплое роботы Netlify сканируют ваш HTML, находят форму и автоматически создают для нее обработчик. Когда пользователь нажимает «Отправить», данные улетают в облако провайдера. Вы можете просматривать их в панели управления, настроить уведомления на почту или через вебхуки отправить в Slack или CRM. Это решение не требует ни строчки JS-кода на бэкенде и работает «из коробки».
Сторонние сервисы: Formspree, Getform и аналоги
Если вы не привязаны к конкретному хостингу или вам нужны более сложные интеграции, на помощь приходят специализированные сервисы. Инструменты вроде Formspree, Basin или Getform работают как универсальный бэкенд для ваших форм.
Вы просто указываете их уникальный URL в атрибуте `action` вашей формы. Сервис берет на себя проверку на спам, хранение данных и пересылку уведомлений. Большинство из них предлагают бесплатные лимиты (например, до 50 сообщений в месяц), чего вполне достаточно для портфолио или небольшого корпоративного сайта. Платные тарифы добавляют возможность кастомизации страниц благодарности и интеграцию с тысячами приложений через Zapier или Make.
Serverless Functions: Полный контроль
Для задач, требующих сложной логики — например, проверки промокода в базе данных или генерации PDF-счета — идеально подходят облачные функции (AWS Lambda, Netlify Functions). Это небольшие фрагменты кода, которые запускаются только в момент вызова.
Вы пишете функцию на JavaScript или TypeScript, которая принимает данные формы, выполняет нужные действия и возвращает ответ. Это дает гибкость полноценного сервера, но вы платите только за миллисекунды работы кода. Нет необходимости настраивать сервер, следить за обновлениями ОС или беспокоиться о масштабировании при наплыве пользователей. Это «золотая середина» между готовыми сервисами и собственной инфраструктурой.
Безопасность: Валидация и Спам-фильтры
Открытая форма в интернете — это магнит для спам-ботов. Без серверной части защита ложится на плечи фронтенда и выбранного сервиса. Обязательно используйте технику «Honeypot» (медовый горшок): добавьте скрытое поле, которое человек не увидит, а бот заполнит. Если поле заполнено — запрос игнорируется.
Также не забывайте про клиентскую валидацию. Атрибуты `required`, `type="email"` и `pattern` помогут пользователю отправить корректные данные. Для критически важных форм стоит подключить hCaptcha или Google reCAPTCHA. Помните, что безопасность — это комплекс мер, и даже на статическом сайте она должна быть приоритетом.