Зазначимо: коли ваш сайт починає рости, коментарі стають вузьким місцем. Вбудовані рішення на кшталт 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>
);
}
Чому кастомне рішення краще за готові віджети?
| Критерій | Кастомне рішення | Disqus / Commento |
|---|---|---|
| Контроль над даними | Повний | Ні (третя сторона) |
| Продуктивність | Оптимізовано під ваш стек | Додатковий HTTP-запит |
| Кастомізація | Будь-яка | Обмежена |
| Вартість | Розробка, потім безкоштовно | Freemium / реклама |
| GDPR / Privacy | Повна відповідність | Ризики |
| Варіант реалізації | Вкладеність | Модерація | Лайки | Термін |
|---|---|---|---|---|
| Базова | Flat | Автоматична | Ні | 3-4 дні |
| Розширена | До 3 рівнів | Автоматична + ручна | Є | 5-7 днів |
| Преміум | До 5 рівнів | Кастомні правила + AI-фільтр | Є + сповіщення | до 10 днів |
Процес роботи
- Аналітика — обговорюємо вимоги: вкладеність, модерація, сповіщення, інтеграція з auth.
- Проектування — схема БД, API endpoints, компоненти React.
- Реалізація — бекенд (Laravel), фронтенд (React), тести.
- Тестування — навантажувальне тестування (1000 коментарів), перевірка спам-фільтра.
- Деплой — 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+ проєктів з кастомними системами коментарів. Гарантуємо прозорість та якість.