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

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

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

• Проектирование схемы данных — описание типов документов, полей, валидации и референсов.
• Настройка 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-архитектура ускорит разработку.