Интеграция Sanity под ключ: схема, GROQ, Live Preview
Вы запускаете новостной портал с 10 000 статей, редакторы требуют гибкого редактора, а разработчики — производительности. Sanity — headless CMS с полностью кастомизируемым Studio, мощным языком запросов GROQ и real-time обновлениями. Однако неправильная настройка схемы приводит к N+1 запросам, тормозам Studio и проблемам с Core Web Vitals. Наша команда интегрировала Sanity для 15+ проектов, от блогов до enterprise-порталов, и гарантирует соблюдение метрик производительности. Согласно документации Sanity, грамотная схема — основа быстрого редактора.
Проблемы, которые мы решаем
Сложность схемы
Неправильная структура документов ведет к дублированию данных и множественным запросам. Мы используем Repository pattern и нормализацию схемы, чтобы каждый документ отвечал за одну сущность. Например, для издательства мы создали схему из 5 типов (статья, автор, категория, тег, медиа) с валидацией на уровне Studio — это сократило количество запросов на 60%. Неправильная схема может увеличить бюджет на доработку на 50 000–100 000 ₽.
Производительность Studio
При большом количестве полей редактор зависает. Настройка виртуализации полей и группировка в табы решает проблему. В одном проекте с 40+ полями мы внедрили кастомные компоненты с debounce-валидацией — загрузка Studio ускорилась в 2 раза.
Real-time обновления
Без GROQ Streaming API редакторам приходится обновлять страницу вручную. Настраиваем Live Preview через Server-Sent Events: изменения в Studio мгновенно отображаются в превью, без перезагрузки.
Медиа-ресурсы
Неоптимизированные изображения увеличивают LCP. Sanity Image URL Builder с параметрами auto=format, q=80 и fit=crop решает проблему. Мы также настраиваем по умолчанию WebP с фолбэком на JPEG.
Как избежать N+1 запросов в Sanity?
Основная причина N+1 — выборка связанных документов без проекции. Используйте GROQ с join-синтаксисом:
// Вместо двух запросов — один с проекцией *[_type == "article"] | order(publishedAt desc) [0..9] { title, "author": author->name, "categories": categories[]->title } Это уменьшает количество запросов к Content Lake с 10+ до 1. Для сложных агрегаций применяйте references() и count(). Подробнее о синтаксисе GROQ читайте в официальной документации.
Что делать, если Studio тормозит на больших схемах?
Причина — рендеринг всех полей сразу. Решения:
- Группируйте поля во вкладки с помощью
fieldsets. - Используйте
hiddenдля условного отображения. - Внедрите компоненты с
lazy-загрузкой. - Оптимизируйте валидацию: перенесите сложные правила на backend через webhooks.
Как мы это делаем: кейс издательства
Стек: Next.js 14 (App Router), Sanity v3, GROQ, TypeScript, Tailwind. Разработали схему с 5 типами документов. Studio — с кастомными превью статей, валидацией slug и интеграцией с Unsplash. Настроили RSC: данные загружаются на сервере с помощью client.fetch, что исключает hydration mismatch. Live Preview — через @sanity/preview-kit с SSE. Итог: TTFB снизился на 40%, INP остался в зеленой зоне.
Процесс работы
- Аналитика — изучаем текущую CMS, требования редакторов, структуру контента.
- Проектирование схемы — создаем типы документов, связи, валидацию.
- Настройка Studio — кастомизация под бренд, плагины, поля.
- Интеграция с фронтендом —GROQ-запросы, рендеринг Portable Text, Live Preview.
- Тестирование — проверка производительности, ошибок, безопасности.
- Деплой — публикация Studio на Vercel или хостинге, настройка CDN.
Что входит в работу
- Полная схема данных (типы, поля, валидация).
- Кастомизированная Sanity Studio.
- Отрисовка Portable Text с поддержкой изображений и кода.
- Live Preview (опционально).
- Webhooks для ревалидации кеша.
- Документация по GROQ и работе со Studio.
- Обучение редакторов (1 час).
- 1 месяц технической поддержки.
| Этап | Срок | Результат |
|---|---|---|
| Аналитика и проектирование | 1-2 дня | Документ схемы, список полей |
| Разработка схемы и Studio | 1-2 дня | Типы, вкладки, валидация |
| Интеграция с фронтендом | 1-2 дня | GROQ-запросы, рендеринг, превью |
| Тестирование и отладка | 1 день | Отсутствие ошибок, метрики |
| Деплой и документация | 0.5 дня | Работающий проект |
Сравнение: Sanity vs WordPress (headless)
| Критерий | Sanity | WordPress (REST) |
|---|---|---|
| Скорость редактора | Мгновенно | 2-3 сек (AJAX) |
| Кастомизация схемы | Любая | Ограниченная ACF |
| Производительность API | <50ms | 200-400ms |
| Гибкость типов контента | Полная | Таксономии + CPT |
Стоимость лицензии WordPress с премиум-плагинами может превышать 100 000 ₽ в год, в то время как Sanity бесплатен до 20 000 документов.
Типичные ошибки
Частые проблемы при интеграции Sanity
- Отсутствие индексов — GROQ без индексов тормозит на больших наборах. Используйте
order()по индексированным полям. - Сырые изображения — без auto=format и WebP LPC падает. Настройте builder единообразно.
- Неправильная подпись webhooks — проверяйте секрет через
@sanity/webhook-toolkit, иначе злоумышленник может перестроить кеш. - Глубокие вложенные ссылки — избегайте references глубже 2 уровней, иначе растет время запроса.
Сроки ориентировочно
Базовая интеграция (схема, Studio, GROQ, подключение к Next.js) — от 3 до 5 рабочих дней. Live Preview, кастомные плагины, webhooks — плюс 3–4 дня. Стоимость рассчитывается индивидуально после аудита проекта.
Гарантии и опыт
Наша команда работает с headless CMS более 5 лет и реализовала 15+ проектов на Sanity. Мы гарантируем соблюдение Core Web Vitals и предоставляем 1 месяц поддержки. Свяжитесь с нами для бесплатного аудита вашего проекта. Закажите интеграцию Sanity и получите месяц поддержки в подарок.