Headless сайти на Sanity: TypeScript-схеми, GROQ, real-time CMS

Часто під час розробки складного веб-проєкту — інтернет-магазину з тисячами товарів або багатомовного порталу — ми стикаємося з обмеженнями традиційних 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.

Що входить в роботу?

• Проектування схеми даних — опис типів документів, полів, валідації та референсів.
• Налаштування Studio — кастомна структура меню, плагіни (vision, dashboard), іконки.
• Інтеграція з фронтендом — клієнт на @sanity/client, підтримка CDN, ISR, ревалідація.
• Документація — опис схеми, приклади GROQ-запитів, керівництво для редакторів.
• Навчання команди — проведемо сесію по роботі з Studio та GROQ.
• Код на GitHub — з CI/CD для автоматичного деплою Studio та фронтенду.

Процес роботи

1. Аналіз — вивчаємо контентну стратегію, визначаємо типи документів та зв'язки.
2. Проектування — створюємо схему даних, конфігуруємо Studio.
3. Розробка — пишемо код фронтенду, налаштовуємо запити та middleware.
4. Тестування — перевіряємо продуктивність, правильність відображення, навантажувальне тестування.
5. Деплой — викочуємо на продакшен, налаштовуємо моніторинг.

Терміни та вартість

Базовий проект з 3–5 типами документів та Next.js фронтендом — 2–3 тижні. Складний проект з кастомними плагінами Studio та Visual Editing — 4–6 тижнів. Вартість розраховується індивідуально після брифу. Оцінимо ваш проект — просто зв'яжіться з нами. Отримайте консультацію по Sanity та дізнайтеся, як headless-архітектура прискорить розробку.