Часто під час розробки складного веб-проєкту — інтернет-магазину з тисячами товарів або багатомовного порталу — ми стикаємося з обмеженнями традиційних CMS. WordPress або Бітрікс вимагають плагінів для нестандартних полів, а на складних запитах починаються гальма. Це виливається в тижні кастомної розробки та болі з продуктивністю. Наша команда використовує 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-архітектура прискорить розробку.