Монолитная интеграция Payload CMS с Next.js: ISR и Live Preview

Тормозит TTFB из-за N+1 запросов? При интеграции headless CMS с Next.js типичная задержка достигает 500 мс. Монолитная архитектура Payload + Next.js решает это: данные из базы напрямую, ISR по событию и автоматическая типизация. Мы реализовали эту схему на 10+ коммерческих проектах — от лендингов до маркетплейсов с 50+ коллекциями. Результат: скорость разработки сокращается на 30–40% за счёт устранения бойлерплейта и уменьшения количества ошибок типизации. По сравнению с раздельной архитектурой, монолитная версия даёт в 5–10 раз меньший TTFB.

Что такое Payload CMS и почему Next.js?

Payload CMS — современная headless CMS с открытым исходным кодом, написанная на TypeScript. Она поддерживает REST и GraphQL API, гибкую систему коллекций и встроенную административную панель. Next.js, в свою очередь, предоставляет серверные компоненты, ISR и отличную производительность. Payload CMS Documentation рекомендует монолитную архитектуру для проектов с высокими требованиями к производительности.

Как настроить интеграцию Payload CMS с Next.js?

Самый быстрый способ — использовать шаблон create-payload-app:

npx create-payload-app@latest --template website 

Ключевой момент — настройка next.config.js с обёрткой withPayload:

const { withPayload } = require('@payloadcms/next/withPayload')

module.exports = withPayload({
  images: {
    remotePatterns: [
      {
        hostname: 'your-cdn.com',
      },
    ],
  },
})

Структура монолитного проекта включает папки app/(frontend) и app/(payload), файлы конфигурации и коллекции.

Почему монолитная архитектура выгодна?

Монолитная архитектура позволяет вызывать Payload напрямую из серверных компонентов Next.js без HTTP. Это не только ускоряет рендеринг, но и упрощает типизацию — все типы генерируются автоматически. Экономия на разработке составляет до 40% за счёт устранения ручной синхронизации типов.

Как работает Live Preview в такой связке?

Live Preview позволяет видеть изменения контента в реальном времени без перезагрузки. Настройка включает установку пакета @payloadcms/live-preview и создание WebSocket-соединения. В Next.js используется PreviewProvider, который оборачивает компоненты, отслеживающие изменения:

import { PreviewProvider } from '@payloadcms/live-preview/react'
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <PreviewProvider apiRoute="/api/preview" >
      {children}
    </PreviewProvider>
  )
}

После этого контент обновляется в реальном времени при правках в админ-панели Payload.

ISR и On-demand Revalidation

Для кэширования страниц используйте unstable_cache с тегами:

import { unstable_cache } from 'next/cache'

const getCachedPost = unstable_cache(
  async (slug: string) => {
    const payload = await getPayload({ config })
    const result = await payload.find({
      collection: 'posts',
      where: {
        slug: { equals: slug },
        _status: { equals: 'published' },
      },
    })
    return result.docs[0] || null
  },
  ['post'],
  { tags: ['posts'], revalidate: 3600 }
)

При изменении контента используйте хук после изменения коллекции:

hooks: {
  afterChange: [
    async ({ doc, operation }) => {
      if (doc._status === 'published') {
        await revalidateTag('posts')
        await revalidatePath(`/posts/${doc.slug}`)
      }
    },
  ],
}

Это позволяет обновлять страницы мгновенно без полной перестройки сайта. В отличие от регенерации по таймеру, on-demand ревалидация гарантирует, что пользователь всегда видит актуальные данные.

Client-side операции и TypeScript

Для форм и авторизации используйте Client Components с fetch-запросами. Payload автоматически генерирует TypeScript-типы для всех коллекций — достаточно выполнить npm run generate:types. Это исключает ошибки типизации и ускоряет разработку. Рекомендуем интегрировать генерацию в CI для автоматического обновления типов.

Какие подводные камни при монолитной архитектуре?

Несмотря на преимущества, монолитная архитектура накладывает ограничения. Во-первых, при высоких нагрузках база данных становится узким местом — используйте репликацию. Во-вторых, обновление Payload требует перезапуска всего процесса, поэтому для zero-downtime деплоя настройте rolling updates. В-третьих, при большом количестве коллекций (100+) время сборки может расти — применяйте lazy loading для редких коллекций.

Процесс работы

1. Аналитика: изучаем структуру контента, требования к производительности и нагрузке.
2. Проектирование: настройка коллекций, глобальных полей, схемы API, определение стратегии кэширования.
3. Реализация: разворачиваем монолит, настраиваем ISR, Live Preview, интеграцию с админ-панелью.
4. Тестирование: проверяем ревалидацию, корректность типов, производительность в Lighthouse.
5. Деплой: настраиваем CI/CD на Vercel или Selectel, подключаем мониторинг (Sentry, Logtail).

Что входит в результат

• Полностью рабочая интеграция Payload CMS с Next.js App Router.
• Настроенный ISR с on-demand ревалидацией.
• Автогенерируемые TypeScript-типы для всех коллекций.
• Live Preview для удобства контент-менеджеров.
• Документация по работе с админ-панелью.
• Гарантия на корректную работу в течение 3 месяцев.

Хотите ускорить разработку?

Свяжитесь с нами — оценим ваш проект за 1 день. Закажите интеграцию Payload CMS с Next.js и получите готовую архитектуру с документацией и гарантией.