Интеграция Resend для отправки транзакционных писем в веб-приложениях

Интеграция Resend для отправки транзакционных email

Мы сталкивались с проектами, где транзакционные письма не доходили до пользователей: SMTP-серверы блокировали, DKIM не был настроен, а шаблоны приходилось верстать в сыром HTML. В результате терялись заявки, подтверждения и сбросы паролей — бизнес терпел убытки. Потери от недоставленных писем достигали 15% конверсии, а клиенты уходили к конкурентам. Resend решает эти проблемы из коробки: современный email API с нативной поддержкой React Email, бесплатным тарифом на 3000 писем в месяц и автоматической настройкой доставляемости. В этой статье расскажем, как мы подключаем Resend в реальных проектах и какие результаты это даёт.

Почему Resend, а не SMTP или старые сервисы?

Настройка SMTP вручную — это N+1 попыток, падение доставляемости, спам-фильтры. Resend предлагает готовый API, который гарантирует доставку. В отличие от SendGrid и Amazon SES, Resend проще: не нужно вручную настраивать DKIM/SPF — всё делается автоматически. Кроме того, React Email работает из коробки, что ускоряет разработку шаблонов в разы. Наш опыт показывает: время на интеграцию сокращается в 2 раза по сравнению с классическими решениями, а доход от восстановленных уведомлений окупает затраты за 1-2 месяца.

Resend в 2 раза быстрее настраивается, чем классический SMTP.

Как мы интегрируем Resend в ваше приложение?

Мы подключаем Resend, настраиваем домен, разрабатываем шаблоны React Email, организуем батчевую отправку и логирование. Используем TypeScript и Next.js 14 с Server Actions для отправки из серверных компонентов.

Установка и первая отправка

npm install resend

import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

// Простая отправка
const { data, error } = await resend.emails.send({
  from: 'Acme <[email protected]>',
  to: ['[email protected]'],
  subject: 'Добро пожаловать в Acme!',
  html: '<h1>Привет!</h1><p>Спасибо за регистрацию.</p>',
});

if (error) {
  console.error('Email error:', error);
}

С React Email шаблонами

import { Resend } from 'resend';
import { render } from '@react-email/render';
import WelcomeEmail from './emails/WelcomeEmail';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendWelcomeEmail(user: { email: string; name: string }) {
  const html = render(
    <WelcomeEmail name={user.name} loginUrl="https://app.acme.com/login" />
  );

  await resend.emails.send({
    from: 'Acme Team <[email protected]>',
    to: user.email,
    subject: 'Добро пожаловать в Acme!',
    html,
  });
}

Как работает батчевая отправка?

Батчевая отправка позволяет отправить до 100 писем за один HTTP-запрос. Это критично для рассылки инвойсов, уведомлений или подтверждений в моменты пиковой нагрузки. Resend обрабатывает их параллельно, экономя время и ресурсы.

await resend.batch.send([
  {
    from: '[email protected]',
    to: '[email protected]',
    subject: 'Ваш инвойс готов',
    html: invoiceHtml1,
  },
  {
    from: '[email protected]',
    to: '[email protected]',
    subject: 'Ваш инвойс готов',
    html: invoiceHtml2,
  },
]);

Как настроить домен для Resend (пошагово)?

1. Добавить домен в Resend Dashboard → Domains.
2. Добавить DNS-записи: SPF (TXT), DKIM (TXT × 3), Return-Path (MX).
3. Дождаться верификации (обычно менее 5 минут).

После верификации можно использовать from: '[email protected]' вместо @resend.dev. Resend документация утверждает: "При корректной настройке DKIM и SPF доставляемость превышает 99%."

Как избежать попадания в спам?

Используйте выделенный домен для отправки, настройте DMARC запись, следите за репутацией IP через вебхуки. Регулярно очищайте список неактивных пользователей. Resend автоматически управляет репутацией, но базовая гигиена списка важна.

Webhooks для отслеживания статусов

Resend отправляет webhooks при изменении статуса письма. Ниже — полный пример обработчика на Node.js с Express:

app.post('/api/webhooks/resend', express.raw({ type: 'application/json' }), async (req, res) => {
  const signature = req.headers['resend-signature'];
  const event = JSON.parse(req.body);

  switch (event.type) {
    case 'email.sent':
      await db.emailLogs.update({ emailId: event.data.email_id, status: 'sent' });
      break;
    case 'email.delivered':
      await db.emailLogs.update({ emailId: event.data.email_id, status: 'delivered' });
      break;
    case 'email.bounced':
      await db.users.markEmailBounced(event.data.to[0]);
      break;
    case 'email.complained':
      await db.users.unsubscribe(event.data.to[0]);
      break;
  }

  res.status(200).end();
});

Частые проблемы и их решение

• Ошибка авторизации: неверный API-ключ. Проверьте переменную окружения RESEND_API_KEY.
• Письма не доходят: неправильная настройка домена или попадание в спам. Используйте вебхуки для отслеживания и настройте SPF/DKIM строго по инструкции.
• Превышение лимита: бесплатный тариф ограничен 3000 писем в месяц. При необходимости перейдите на платный или используйте батчевую отправку для оптимизации.

Что входит в работу по интеграции Resend

Сроки и стоимость

Базовая интеграция Resend + 2-3 шаблона React Email — 1-2 дня. Расширенная версия с доменом, webhooks и логированием — 3-4 дня. Стоимость рассчитывается индивидуально и зависит от сложности проекта. Оставьте заявку — мы подберём оптимальное решение. Получите консультацию по интеграции Resend: наши инженеры с опытом более 5 лет помогут настроить надёжную отправку писем. Мы гарантируем высокую доставляемость и поддержку после запуска.

Интеграция email рассылок: почему она часто ломается?

Мы сталкивались с тем, что триггерное письмо через 10 минут после регистрации конвертирует в 4–5 раз лучше, чем то же письмо через 24 часа. Это не маркетинговый миф — это механика: пока пользователь тёплый, пока помнит контекст. Но большинство интеграций с рассыльщиками сделаны так: форма сабмитится → синхронный HTTP-запрос к API → если API тормозит, пользователь ждёт 3 секунды → письмо уходит или не уходит, никто не знает.

Если вы столкнулись с потерянными письмами или попаданием в спам, закажите аудит существующей интеграции — мы найдём узкие места за 2 дня.

Провайдеры и их API

Unisender — российский провайдер, популярен в сегменте SMB. REST API, простой. Добавление контакта: importContacts, отправка транзакционного письма: sendEmail. Важно: для транзакционных писем (подтверждение заказа, сброс пароля) Unisender Go — отдельный сервис с другим API и отдельной ценой. Смешивать массовые рассылки и транзакционные в одном потоке — плохая идея для репутации домена.

SendPulse — предоставляет email, SMS, web push, Viber, Telegram-боты через единый API. Для проектов, где нужен омниканал, это удобно. Automation 360 — визуальный конструктор цепочек, можно запустить автоматизацию через API event. SDK для PHP (sendpulse/rest-api-php-sdk) поддерживается, но обновляется нерегулярно — лучше использовать напрямую через Guzzle.

Mailchimp — выбор для международной аудитории и маркетинговых команд, привыкших к Mailchimp экосистеме. Transactional email — через Mandrill (дочерний сервис). Marketing API v3 для управления списками, тегами, кампаниями. Webhook для событий: открытие, клик, отписка, bounce.

SMS. Для России: СМСЦ, МТС Exolve, Devino Telecom, SMS Aero. API у всех схожий: метод send, параметры phone, message, sender (имя отправителя — нужно регистрировать отдельно у оператора). Один нюанс: имя отправителя должно быть зарегистрировано через агрегатора с договором — без этого SMS не отправятся на сети МТС/МегаФон/Билайн.

Как построить интеграцию, чтобы не терять письма?

Разделяем транзакционные и маркетинговые потоки

Транзакционные письма (подтверждение заказа, сброс пароля, статус доставки) — через отдельный домен-отправитель или субдомен tx.example.com. Маркетинговые рассылки — через mail.example.com или news.example.com. Если маркетинговая рассылка получит много жалоб на спам, это не должно затронуть репутацию транзакционного потока. Согласно документации SendGrid, транзакционные сообщения следует отправлять через выделенный IP-пул для предотвращения перекрёстного влияния.

Очередь и retry

Любой вызов к email API — через очередь (Laravel Queue, Bull, Celery). Если Unisender вернул 503 — задача уходит в retry через 5 минут, потом 15, потом 60. После 5 неудачных попыток — в dead letter queue с алертом. Пользователь при этом уже получил свой 200 OK и не знает о проблеме. Благодаря этому подходу bounce rate на проектах снижается до 0.5%.

Пример job для Laravel:

public function handle(): void
{
    try {
        $response = Http::post(config('services.unisender.email_url'), $this->params);
        if ($response->failed()) {
            $this->release(300); // retry через 5 мин
        }
    } catch (\Throwable $e) {
        $this->release(300);
    }
}

Шаблоны

Храним шаблоны в коде (Blade, Twig, React Email), не в интерфейсе провайдера. Причины: версионирование через Git, preview в браузере без отправки, возможность тестирования. Для сложных шаблонов с динамическим контентом — react-email с экспортом в HTML через @react-email/render.

Валидация и согласия

Перед добавлением контакта в список — double opt-in (письмо с подтверждением). Хранить факт подтверждения с timestamp в своей БД. При отписке — синхронно отписываем и у провайдера, и в своей базе. Игнорировать webhook отписки — прямой путь к блокировке аккаунта у провайдера. Все процессы соответствуют ФЗ-152 о персональных данных.

Мониторинг доставляемости

Подключаем webhook от провайдера на события bounce (жёсткий и мягкий), spam_complaint, unsubscribe. Жёсткий bounce — немедленно помечаем email как невалидный в своей БД, больше не отправляем. Мягкий bounce 3 раза подряд — то же самое. Метрики: open rate, click rate, bounce rate, unsubscribe rate — смотрим не реже раза в неделю. Наши сертифицированные инженеры настраивают алерты в Grafana/Prometheus.

Почему важно разделять потоки?

Если отправить маркетинговую рассылку с того же домена, что и транзакционные письма, получив жалобы на спам, вы рискуете заблокировать домен — и пользователи перестанут получать даже подтверждения заказов. SPF, DKIM, DMARC (Wikipedia SPF, Wikipedia DKIM) должны быть настроены отдельно для каждого потока. Мы используем субдомены с разными DNS-записями.

Объём работ по интеграции

• Аудит текущих потоков коммуникации и репутации домена (SPF, DKIM, DMARC)
• Выбор провайдера и схемы: транзакционный vs маркетинговый трафик
• Настройка DNS-записей SPF, DKIM, DMARC (Wikipedia DMARC)
• Разработка шаблонов писем (HTML + динамический контент)
• Интеграция с бэкендом через очереди и API
• Настройка webhook для доставляемости и жалоб
• Документация по эксплуатации и обучение команды
• Гарантия доставляемости и поддержка после запуска

Сроки и стоимость

Стоимость рассчитывается индивидуально после аудита. Мы работаем под ключ: от анализа до мониторинга в продакшене. Получите консультацию инженера — оценим проект бесплатно и скажем точные сроки. Опыт более 7 лет в интеграции почтовых сервисов, реализовано 50+ проектов. Закажите бесплатный аудит текущей интеграции — получите отчёт с рекомендациями.