Разработка кастомной системы комментариев на Laravel и React

Отметим: когда ваш сайт начинает расти, комментарии становятся узким местом. Встроенные решения вроде Disqus — компромисс: вы теряете контроль над данными, скорость загрузки страдает, а реклама третьих сторон раздражает пользователей. Пропускная способность сервера снижается, а расходы на инфраструктуру растут. Мы реализуем собственную кастомную систему комментариев на стеке Laravel и React, которая решает проблемы N+1 запросов, спама и сложной модерации. За 3–7 дней вы получаете гибкую, быструю и масштабируемую систему, полностью под вашим контролем.

Какие проблемы решает кастомная система комментариев?

N+1 запросы при загрузке вложенных комментариев

Типичная ошибка — подгружать ответы отдельными запросами для каждого комментария. На странице со 100 комментариями это 101 запрос. Решение — eager loading с рекурсивной выборкой: один запрос достаёт всё дерево, а Laravel строит иерархию в памяти. Как указано в документации Laravel, правильная работа с отношениями сокращает количество запросов до минимума.

Спам и модерация

Автоматически фильтруем комментарии с подозрительными ссылками, устанавливаем лимиты на частоту (10 комментариев в минуту) и отправляем подозрительные на ручную проверку. Для гостей — капча. Детали можно посмотреть ниже.

Дублирование лайков

Чтобы один пользователь не мог голосовать несколько раз, используем кеширование в Redis с ключом comment_like:{comment_id}:{user_id}. Это надёжнее, чем отдельная таблица, и быстрее.

Как мы это делаем?

Стек

• Backend: Laravel, PHP 8.3, PostgreSQL 16, Redis 7
• Frontend: React 18, TypeScript, Tailwind CSS
• Инфраструктура: Docker, Nginx, GitHub Actions

Ключевое решение: анти-N+1 запросов

// В контроллере
$comments = Comment::where('entity_type', $entityType)
    ->where('entity_id', $entityId)
    ->whereNull('parent_id')
    ->with(['user', 'replies' => function ($query) {
        $query->where('status', 'approved')->with('user');
    }])
    ->latest()
    ->paginate(20);

Этот паттерн сокращает число запросов с N+1 до 3 (корневые, ответы, пользователи).

Структура базы данных

CREATE TABLE comments (
    id SERIAL PRIMARY KEY,
    entity_type VARCHAR(50) NOT NULL, -- 'article', 'product', 'post'
    entity_id INTEGER NOT NULL,
    parent_id INTEGER REFERENCES comments(id) ON DELETE SET NULL,
    user_id INTEGER REFERENCES users(id),
    author_name VARCHAR(100), -- для гостей
    author_email VARCHAR(255),
    body TEXT NOT NULL,
    status VARCHAR(20) NOT NULL DEFAULT 'pending', -- pending|approved|rejected|spam
    likes_count INTEGER NOT NULL DEFAULT 0,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
CREATE INDEX ON comments(entity_type, entity_id, status, created_at);
CREATE INDEX ON comments(parent_id);
CREATE INDEX ON comments(user_id);

Как выглядит API и фронтенд?

Laravel API

class CommentController extends Controller {
    // Получить комментарии к материалу
    public function index(Request $request, string $entityType, int $entityId): JsonResponse {
        $comments = Comment::where('entity_type', $entityType)
            ->where('entity_id', $entityId)
            ->where('status', 'approved')
            ->whereNull('parent_id')
            ->with(['user:id,name,avatar', 'replies' => fn($q) => $q->where('status', 'approved')->with('user:id,name,avatar')])
            ->latest()
            ->paginate(20);

        return response()->json($comments);
    }

    // Добавить комментарий
    public function store(StoreCommentRequest $request, string $entityType, int $entityId): JsonResponse {
        $this->throttle('comments', 10, 60);

        $requiresModeration = !auth()->check() || auth()->user()->comments()->where('status', 'spam')->exists() || $this->containsSuspiciousLinks($request->body);

        $comment = Comment::create([
            'entity_type' => $entityType,
            'entity_id' => $entityId,
            'parent_id' => $request->parent_id,
            'user_id' => auth()->id(),
            'author_name' => auth()->user()?->name ?? $request->author_name,
            'author_email' => auth()->user()?->email ?? $request->author_email,
            'body' => $this->sanitize($request->body),
            'status' => $requiresModeration ? 'pending' : 'approved',
        ]);

        if ($comment->status === 'approved') {
            $this->notifyParentAuthor($comment);
        } else {
            Notification::send(
                User::moderators()->get(),
                new CommentPendingNotification($comment)
            );
        }

        return response()->json(CommentResource::make($comment), 201);
    }

    private function sanitize(string $body): string {
        return strip_tags($body, '<b><i><em><strong><a><br><p>');
    }

    private function containsSuspiciousLinks(string $body): bool {
        preg_match_all('/<a[^>]+href=["\']?([^"\'> ]+)/i', $body, $matches);
        foreach ($matches[1] ?? [] as $url) {
            if (!str_contains($url, config('app.url'))) {
                return true;
            }
        }
        return false;
    }
}

React: дерево комментариев

interface Comment {
  id: number;
  user: { name: string; avatar: string } | null;
  author_name: string;
  body: string;
  likes_count: number;
  created_at: string;
  replies?: Comment[];
}

function CommentThread({ entityType, entityId }: { entityType: string; entityId: number }) {
  const { data, isLoading } = useQuery({
    queryKey: ['comments', entityType, entityId],
    queryFn: () => api.get(`/comments/${entityType}/${entityId}`),
  });

  return (
    <section aria-label="Комментарии">
      <h2>Комментарии ({data?.meta.total ?? 0})</h2>
      <CommentForm entityType={entityType} entityId={entityId} />
      {isLoading ? (
        <CommentSkeleton />
      ) : (
        <ul className="comment-list">
          {data?.data.map(comment => (
            <CommentItem key={comment.id} comment={comment} depth={0} />
          ))}
        </ul>
      )}
    </section>
  );
}

function CommentItem({ comment, depth }: { comment: Comment; depth: number }) {
  const [showReplyForm, setShowReplyForm] = useState(false);

  return (
    <li className={`comment depth-${depth}`}>
      <img
        src={comment.user?.avatar || '/default-avatar.png'}
        alt={comment.user?.name || comment.author_name}
        width={40}
        height={40}
      />
      <div className="comment__content">
        <header>
          <strong>{comment.user?.name || comment.author_name}</strong>
          <time dateTime={comment.created_at}>
            {new Date(comment.created_at).toLocaleDateString('ru-RU')}
          </time>
        </header>
        <p>{comment.body}</p>
        <footer>
          <LikeButton commentId={comment.id} count={comment.likes_count} />
          {depth < 3 && (
            <button onClick={() => setShowReplyForm(!showReplyForm)}>Ответить</button>
          )}
        </footer>
        {showReplyForm && (
          <CommentForm parentId={comment.id} onSubmit={() => setShowReplyForm(false)} />
        )}
        {comment.replies?.map(reply => (
          <ul key={reply.id}><CommentItem comment={reply} depth={depth + 1} /></ul>
        ))}
      </div>
    </li>
  );
}

Почему кастомное решение лучше готовых виджетов?

Процесс работы

1. Аналитика — обсуждаем требования: вложенность, модерация, уведомления, интеграция с auth.
2. Проектирование — схема БД, API endpoints, компоненты React.
3. Реализация — бэкенд (Laravel), фронтенд (React), тесты.
4. Тестирование — нагрузочное тестирование (1000 комментариев), проверка спам-фильтра.
5. Деплой — Docker-образ, CI/CD, настройка кеширования.

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

• Базовая система (flat, модерация): 3–4 дня
• С вложенностью, лайками и уведомлениями: 5–7 дней
• С интеграцией соцсетей и кастомной анти-спам системой: до 10 дней

Стоимость рассчитывается индивидуально — мы оценим ваш проект в течение часа. Кастомная система комментариев окупается за 2-4 месяца по сравнению с платными подписками на аналоги. Получите консультацию по интеграции системы комментариев в ваш проект. Для точной оценки вашего проекта свяжитесь с нашим инженером.

Кастомная система комментариев — инвестиция в качество пользовательского опыта и независимость от сторонних сервисов. Мы проектируем под ваш масштаб: от небольшого блога с 50 комментариями в день до высоконагруженных платформ с 10 000 сообщений в сутки. Архитектура одинакова, меняются только параметры кеширования Redis и стратегия горизонтального масштабирования бэкенда.

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

• Исходный код бэкенда (Laravel) и фронтенда (React) с юнит-тестами
• Документация API и структуры базы данных
• Настройка Docker-окружения и CI/CD-пайплайна
• Интеграция с вашей системой авторизации
• Доступ к приватному репозиторию
• Обучение вашей команды (2–3 часа)
• Месяц технической поддержки после запуска

Более 7 лет опыта в веб-разработке, 50+ проектов с кастомными системами комментариев. Гарантируем прозрачность и качество.