Розробка кастомної системи коментарів на 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('uk-UA')} </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+ проєктів з кастомними системами коментарів. Гарантуємо прозорість та якість.