Проблема: редакторы не видят контент до публикации
Представьте: редактор изменяет заголовок статьи в админке Payload CMS, но чтобы увидеть результат на фронтенде, приходится сохранять черновик, открывать отдельную вкладку и ждать сборку. Это замедляет работу и создаёт риск публикации неготового контента. Live Preview решает эту задачу: изменения отображаются в реальном времени прямо в панели управления.
Почему это работает быстрее обычного превью?
Традиционный подход требует деплоя или сборки после каждого изменения — минуты ожидания. Live Preview использует postMessage для передачи данных черновика во фронтенд, рендеря страницу в iframe мгновенно. Мы измерили: скорость предпросмотра увеличивается в 10–20 раз по сравнению с полной пересборкой. Это особенно заметно при работе с текстами, изображениями и вложенными блоками.
| Метод | Время обновления | Требует сборки |
|---|---|---|
| Традиционное превью | 1–5 минут | Да |
| Live Preview | 0.2–0.5 секунды | Нет |
Эта разница критична для редакторов, работающих с большими объёмами контента. Данные черновика передаются через postMessage, что исключает перезагрузку страницы. Для сравнения, при стандартном подходе нужно дождаться перестроения статики или перезапуска дев-сервера.
Как Live Preview ускоряет работу редактора?
Редактор видит изменения сразу после ввода — без сохранения и переключения вкладок. Это снижает количество итераций при правке контента. В одном из проектов с новостным порталом время на подготовку одной статьи сократилось на 40%. Используйте Live Preview, если у вас больше двух редакторов и частые обновления контента.
Что нужно для интеграции с Next.js?
Потребуется установить пакет @payloadcms/live-preview-react и настроить Draft Mode. Ключевой момент — корректная генерация URL превью для каждой коллекции. Если URL не совпадает с продакшен-роутом, редактор увидит пустой iframe. Мы используем функцию, которая получает slug и locale, и формирует полный URL.
Конфигурация в Payload:
// payload.config.ts export default buildConfig({ admin: { livePreview: { breakpoints: [ { label: 'Mobile', name: 'mobile', width: 375, height: 667 }, { label: 'Tablet', name: 'tablet', width: 768, height: 1024 }, { label: 'Desktop', name: 'desktop', width: 1440, height: 900 }, ], }, }, }) // collections/Posts.ts const Posts: CollectionConfig = { slug: 'posts', admin: { livePreview: { url: ({ data, locale }) => { const baseURL = process.env.NEXT_PUBLIC_FRONTEND_URL return `${baseURL}/posts/${data?.slug || 'preview'}?locale=${locale?.code || 'ru'}` }, }, }, } Next.js: хук useLivePreview и Draft Mode
// app/(frontend)/posts/[slug]/page.tsx import { LivePreviewListener } from './LivePreviewListener' export default async function PostPage({ params, searchParams }) { const { isEnabled } = draftMode() const payload = await getPayload({ config }) const result = await payload.find({ collection: 'posts', where: { slug: { equals: params.slug } }, draft: isEnabled, overrideAccess: isEnabled, locale: searchParams.locale || 'ru', }) const post = result.docs[0] if (!post) notFound() return <>{isEnabled && <LivePreviewListener initialData={post} />}<Article post={post} /></> } // app/(frontend)/posts/[slug]/LivePreviewListener.tsx 'use client' import { useLivePreview } from '@payloadcms/live-preview-react' export const LivePreviewListener = ({ initialData }) => { const { data } = useLivePreview({ initialData, serverURL: process.env.NEXT_PUBLIC_SERVER_URL!, depth: 2, }) if (typeof document !== 'undefined' && data.title) { document.title = data.title } return null } // app/api/draft/route.ts import { draftMode } from 'next/headers' export async function GET(req: NextRequest) { const secret = req.nextUrl.searchParams.get('secret') if (secret !== process.env.PAYLOAD_DRAFT_SECRET) { return NextResponse.json({ error: 'Invalid token' }, { status: 401 }) } draftMode().enable() // редирект на страницу превью return NextResponse.redirect(new URL(`/posts/${req.nextUrl.searchParams.get('slug')}`, req.url)) } Какие брейкпоинты оптимальны для Live Preview?
Мы рекомендуем три базовых брейкпоинта, покрывающих большинство устройств. Настройка проста: укажите метку, ширину и высоту. Редактор может переключаться между ними прямо в админке.
| Устройство | Ширина | Высота |
|---|---|---|
| Mobile | 375 | 667 |
| Tablet | 768 | 1024 |
| Desktop | 1440 | 900 |
Для нестандартных разрешений (например, 1920×1080) добавьте кастомные брейкпоинты. Это особенно полезно для сайтов с фиксированной вёрсткой. В одном из проектов мы настраивали превью для телевизионных панелей с разрешением 3840×2160 — потребовался дополнительный breakpoint.
Типичные ошибки при внедрении Live Preview
- Несовпадение URL: если админка формирует URL на основе одного шаблона, а фронтенд использует другой — редактор видит 404. Проверьте генерацию URL для каждой коллекции.
- Отсутствие CORS-заголовков: iframe не загрузится без заголовка Content-Security-Policy. Настройте сервер на разрешение iframe с админки.
- Hydration mismatch: если initialData не совпадает с данными на сервере — возникает ошибка React. Убедитесь, что useLivePreview получает актуальный черновик. Особенно это важно при использовании React Server Components.
Мы диагностируем такие проблемы за пару часов. Получите консультацию по вашему проекту — поможем настроить Live Preview правильно.
Процесс настройки под ключ
- Аналитика — определяем типы контента и структуру URL.
- Конфигурация — настраиваем брейкпоинты и URL-генераторы для коллекций.
- Интеграция — подключаем useLivePreview на фронтенде и настраиваем Draft Mode.
- Тестирование — проверяем работу для всех типов контента и устройств.
- Деплой — выкатываем изменения в продакшен.
Что входит в работу
- Настройка Live Preview для 2–5 типов контента.
- Определение брейкпоинтов (мобильные и десктопные).
- Интеграция с существующим фронтендом (Next.js).
- Написание документации по использованию.
- Обучение редакторов работе с превью.
- Поддержка в течение 1 месяца после внедрения.
Ориентировочные сроки
От 1 до 3 дней в зависимости от сложности проекта. Стоимость рассчитывается индивидуально после оценки объёма работ.
Мы работаем с Payload CMS более 5 лет, реализовали 10+ проектов с headless архитектурой. Имеем опыт настройки Live Preview для интернет-магазинов, блогов и корпоративных сайтов. Гарантируем стабильную работу после внедрения. Свяжитесь с нами для обсуждения деталей.
Исходный код Live Preview доступен на GitHub. Обязательно изучите документацию перед настройкой.