Реализация системы закладок: polymorphic БД, Laravel API, React

Многие владельцы контентных сайтов сталкиваются с ситуацией: пользователи активно читают материалы, но не могут их сохранить для последующего просмотра. Отсутствие системы закладок снижает возвращаемость и время на сайте. При этом простая реализация часто приводит к дубликатам, медленным запросам и неудобному UX. Мы внедрили десятки таких систем — от базового toggle до сложных коллекций с синхронизацией между устройствами. Предлагаем проверенное решение на основе polymorphic связи, которое подходит для любых сущностей: статей, продуктов, вакансий, видео.

Как работает polymorphic связь в базе данных?

Ключевая задача — спроектировать базу данных так, чтобы не плодить отдельные таблицы под каждый тип контента. Polymorphic связь решает это одной универсальной таблицей bookmarks:

CREATE TABLE bookmarks ( id SERIAL PRIMARY KEY, user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE, bookmarkable_id INTEGER NOT NULL, bookmarkable_type VARCHAR(50) NOT NULL, created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), UNIQUE (user_id, bookmarkable_id, bookmarkable_type) ); CREATE INDEX ON bookmarks(user_id, bookmarkable_type, created_at DESC); 

Такой подход гарантирует уникальность закладки для каждого пользователя и сущности, а индекс позволяет быстро получать закладки пользователя с сортировкой по времени. В реальном проекте мы столкнулись с кейсом, когда без индекса запрос на 10000 закладок выполнялся 2 секунды — после добавления индекса время упало до 10 миллисекунд. Laravel документация: Polymorphic relations allow a model to belong to more than one other model on a single association.

Почему polymorphic связь лучше отдельных таблиц?

Polymorphic подход сокращает объём кода в 3–5 раз и упрощает поддержку. При появлении нового типа контента (например, видео) достаточно добавить запись в bookmarkable_type — без миграций БД.

Пошаговый план внедрения

1. Анализ и проектирование БД — 0.5 дня. Определяем типы сущностей, создаём миграцию.
2. Реализация Laravel API — 0.5–1 день. Контроллер toggle, валидация, документация.
3. Создание React компонента — 0.5–1 день. Оптимистичный UI, доступность.
4. Интеграция и тестирование — 0.5 дня. Юнит-тесты, ручное тестирование.
5. Деплой и документация — 0.5 дня. Инструкция для разработчика, деплой на сервер.

Как реализован toggle API на Laravel?

API построен на одном эндпоинте, который переключает состояние закладки. Используем контроллер с методами toggle и index:

class BookmarkController extends Controller { public function toggle(Request $request, string $type, int $id): JsonResponse { $existing = Bookmark::where([ 'user_id' => auth()->id(), 'bookmarkable_type' => $type, 'bookmarkable_id' => $id, ])->first(); if ($existing) { $existing->delete(); return response()->json(['bookmarked' => false]); } Bookmark::create([ 'user_id' => auth()->id(), 'bookmarkable_type' => $type, 'bookmarkable_id' => $id, ]); return response()->json(['bookmarked' => true], 201); } public function index(Request $request): JsonResponse { $bookmarks = Bookmark::where('user_id', auth()->id()) ->when($request->type, fn($q) => $q->where('bookmarkable_type', $request->type)) ->with('bookmarkable') ->latest() ->paginate(20); return response()->json($bookmarks); } } 

Обратите внимание: метод index поддерживает фильтрацию по типу и пагинацию — это важно для страницы «Мои закладки». Без with('bookmarkable') вы получите N+1 запросов, что неприемлемо при высокой нагрузке.

Если вам нужна такая система — закажите реализацию под ключ.

function BookmarkButton({ type, id, initialBookmarked }: BookmarkProps) { const [bookmarked, setBookmarked] = useState(initialBookmarked); const toggle = async () => { setBookmarked(!bookmarked); try { await api.post(`/api/bookmarks/${type}/${id}/toggle`); } catch { setBookmarked(bookmarked); } }; return ( <button onClick={toggle} aria-label={bookmarked ? 'Удалить из закладок' : 'Добавить в закладки'} aria-pressed={bookmarked} className={`bookmark-btn ${bookmarked ? 'bookmark-btn--active' : ''}`} > {bookmarked ? '🔖' : '🏷️'} </button> ); } 

Оптимистичный UI: как избежать задержек?

Оптимистичный update даёт отклик за 0 мс, но требует обработки ошибок. В проекте для интернет-магазина мы реализовали 5 кнопок закладок на странице — пользователи отмечали, что сайт стал «летать» после внедрения такого подхода. Альтернатива — пессимистичный UI с loader, но на мобильных устройствах он увеличивает perceived latency на 300–500 мс. Используйте AbortController для предотвращения гонки запросов при быстрых кликах.

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

Итого: от 1 до 2 дней на базовую реализацию. Срок может увеличиться при необходимости синхронизации между устройствами или экспорта закладок. В одном из проектов потребовалось добавить поддержку WebSocket для мгновенной синхронизации между вкладками — это заняло дополнительный день.

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

• Документация API (OpenAPI/Swagger)
• Исходный код с комментариями (Laravel + React)
• Инструкция по развёртыванию (Docker + CI/CD)
• Гарантия работоспособности на выбранном хостинге
• 2 недели поддержки после внедрения

Типичные ошибки при реализации закладок

• Отсутствие уникального ограничения — пользователь может добавить одну страницу несколько раз, что ломает логику toggle.
• Игнорирование оптимистичного UI — задержка 0.5–1 секунды убивает ощущение отклика.
• N+1 запрос при получении bookmarkable — обязательно используйте with().
• Неправильный выбор типа поля bookmarkable_type — используйте VARCHAR(50) с константами, чтобы избежать опечаток.

Получите консультацию по внедрению закладок на ваш сайт — оценим ваш проект за один день и предложим оптимальную архитектуру. Свяжитесь с нами для расчёта стоимости проекта. Наша команда имеет более 5 лет опыта в разработке веб-приложений и выполнила свыше 50 проектов с системами закладок и коллекций.