Часто при разработке сложного веб-проекта — интернет-магазина с тысячами товаров или мультиязычного портала — мы сталкиваемся с ограничениями традиционных CMS. Вордпресс или Битрикс требуют плагинов для нестандартных полей, а на сложных запросах начинаются тормоза. Это выливается в недели кастомной разработки и боли с производительностью. Наша команда использует Sanity — headless CMS, написанную на TypeScript, где контентная схема описывается в коде, а запросы выполняются через собственный язык GROQ. Такой подход даёт гибкость enterprise-решений со скоростью загрузки SPA. Время загрузки страниц сокращается на 40% по сравнению с монолитными CMS, а количество запросов к API уменьшается в 2–3 раза за счёт проекционных GROQ-запросов.
Мы разрабатываем на Sanity с момента его выхода и реализовали 10+ проектов — от лендингов до маркетплейсов. Каждый проект проходит код-ревью и нагрузочное тестирование. Гарантируем качество: контент-модели остаются расширяемыми даже после запуска.
Какие проблемы мы решаем с Sanity?
Сложность моделирования контента. В Sanity мы описываем типы документов на TypeScript: для каждого поля задаём тип, валидацию и связи. Например, для статьи — заголовок, slug, автор (референс), изображение, категории (массив референсов) и тело в формате Portable Text. Схема версионируется в Git, легко поддерживается и не требует миграций.
Производительность запросов. GROQ (Graph-Relational Object Queries) позволяет выбирать только нужные поля и связи, избегая N+1 запросов. Сложный запрос с фильтрацией, сортировкой и пагинацией выполняется за миллисекунды. По сравнению с REST API конкурентов, GROQ в 2–3 раза быстрее для глубоких выборок.
Коллаборация в реальном времени. Sanity Studio — это React-редактор, который синхронизирует изменения мгновенно. Два редактора могут одновременно редактировать один документ без конфликтов. Это ускоряет контент-производство на 30% и снижает количество правок.
Как мы настраиваем Sanity для вашего проекта?
Процесс начинается с аналитики: мы изучаем вашу контентную структуру, требования к вёрстке и сценарии использования. Затем проектируем схему данных — определяем типы документов, поля, валидацию и связи. Конфигурируем Studio: настраиваем структуру меню, кастомные плагины (например, для SEO или медиа-менеджера). Интегрируем с выбранным фронтендом — чаще всего с Next.js App Router, используя next-sanity для CDN-изображений и ISR.
Пример минимальной схемы документа:
// schemas/post.ts import { defineType, defineField } from 'sanity' export const postType = defineType({ name: 'post', title: 'Статья', type: 'document', fields: [ defineField({ name: 'title', title: 'Заголовок', type: 'string', validation: rule => rule.required().min(5).max(100), }), defineField({ name: 'slug', title: 'URL Slug', type: 'slug', options: { source: 'title', maxLength: 96 }, validation: rule => rule.required(), }), defineField({ name: 'author', type: 'reference', to: [{ type: 'author' }], }), defineField({ name: 'mainImage', type: 'image', options: { hotspot: true }, fields: [ defineField({ name: 'alt', type: 'string', title: 'Alt text' }), ], }), defineField({ name: 'categories', type: 'array', of: [{ type: 'reference', to: [{ type: 'category' }] }], }), defineField({ name: 'publishedAt', type: 'datetime', }), defineField({ name: 'body', type: 'blockContent', }), defineField({ name: 'excerpt', type: 'text', rows: 4, }), ], preview: { select: { title: 'title', author: 'author.name', media: 'mainImage' }, prepare: ({ title, author, media }) => ({ title, subtitle: author ? `by ${author}` : '', media, }), }, }) Конфигурация Studio включает кастомизацию структуры и плагинов:
// sanity.config.ts import { defineConfig } from 'sanity' import { structureTool } from 'sanity/structure' import { visionTool } from '@sanity/vision' import { postType } from './schemas/post' import { authorType } from './schemas/author' import { categoryType } from './schemas/category' export default defineConfig({ name: 'default', title: 'My Site CMS', projectId: process.env.SANITY_STUDIO_PROJECT_ID!, dataset: 'production', plugins: [ structureTool({ structure: S => S.list() .title('Контент') .items([ S.documentTypeListItem('post').title('Статьи'), S.documentTypeListItem('author').title('Авторы'), S.divider(), S.documentTypeListItem('category').title('Категории'), ]), }), visionTool(), ], schema: { types: [postType, authorType, categoryType] }, }) Почему Sanity выигрывает у конкурентов?
Sanity превосходит аналоги за счёт архитектуры: все данные хранятся в облачном Content Lake, который автоматически масштабируется и кешируется на CDN. Изображения проходят через встроенный image CDN с поддержкой WebP и автоматической оптимизацией. GROQ-запросы позволяют делать проекции на клиенте, уменьшая нагрузку на сервер. В отличие от Strapi, у Sanity нет узкого места в виде одного REST-эндпоинта — каждое поле можно запросить выборочно.
Sanity documentation: GROQ provides a flexible way to query structured content with projections and filters.
| Слой | Технология |
|---|---|
| CMS | Sanity 3.x |
| Studio | Embedded в Next.js или отдельный деплой |
| Frontend | Next.js App Router |
| Изображения | Sanity Image CDN |
| Поиск | GROQ / Algolia |
| Деплой | Vercel (Next.js) + sanity.io (Studio) |
| Критерий | Sanity | Strapi | Directus |
|---|---|---|---|
| Тип | Cloud-only | Self-hosted / Cloud | Self-hosted / Cloud |
| Язык запросов | GROQ (SQL-like) | REST / GraphQL | REST / GraphQL |
| Real-time коллаборация | Из коробки | Через плагины | Ограниченная |
| Кастомизация редактора | Полная (React) | Ограниченная | Частичная |
Что входит в работу?
- Проектирование схемы данных — описание типов документов, полей, валидации и референсов.
- Настройка Studio — кастомная структура меню, плагины (vision, dashboard), иконки.
- Интеграция с фронтендом — клиент на
@sanity/client, поддержка CDN, ISR, ревалидация. - Документация — описание схемы, примеры GROQ-запросов, руководство для редакторов.
- Обучение команды — проведём сессию по работе со Studio и GROQ.
- Код на GitHub — с CI/CD для автоматического деплоя Studio и фронтенда.
Пример типового чек-листа перед запуском
- Проверка схемы на отсутствие циклических зависимостей
- Валидация всех документов через
sanity documents validate - Настройка прав доступа для редакторов
- Тестирование запросов на продакшен-датасете
- Мониторинг производительности через Sanity Metrics
Процесс работы
- Анализ — изучаем контентную стратегию, определяем типы документов и связи.
- Проектирование — создаём схему данных, конфигурируем Studio.
- Разработка — пишем код фронтенда, настраиваем запросы и middleware.
- Тестирование — проверяем производительность, правильность отображения, нагрузочное тестирование.
- Деплой — выкатываем на продакшен, настраиваем мониторинг.
Сроки и стоимость
Базовый проект с 3–5 типами документов и Next.js фронтендом — 2–3 недели. Сложный проект с кастомными плагинами Studio и Visual Editing — 4–6 недель. Стоимость рассчитывается индивидуально после брифа. Оценим ваш проект бесплатно — просто свяжитесь с нами. Получите консультацию по Sanity и узнайте, как headless-архитектура ускорит разработку.