На Drupal-проєкті виникла задача вивести кастомний список статей з посторінковою навігацією та кешуванням. Стандартний Views не дає гнучкості, а хаки в шаблоні перетворюють код на спагеті. Вихід — розробка кастомного модуля Drupal 10 з нуля, з продуманою архітектурою. Кастомна розробка модуля Drupal 10 вимагає знань хунків, сервісів та плагінів Drupal — це дозволяє гнучко розширювати функціонал: від унікальних блоків до інтеграції із зовнішніми REST API. Ми стикалися з такими задачами десятки разів і знаємо, як побудувати модуль від ідеї до продакшену — без болю та велосипедів. Це зекономить бюджет на етапі підтримки.
Які технічні проблеми вирішуємо
Хаотичне використання хунків без сервісного шару — найчастіша проблема при аудиті чужих модулів: N+1 запити в циклі, дублювання коду, неможливість перевикористовувати логіку. Друга за частотою — відсутність кешування або невірні теги кешу, через що сторінки завантажуються 5–7 секунд. Третя — процедурний код у .module-файлах об'ємом під тисячу рядків, який неможливо підтримувати.
Як уникнути N+1 запитів?
Замість того, щоб у циклі завантажувати кожну сутність по одній, використовуємо EntityStorageInterface::loadMultiple(): один запит на отримання ID, другий — на завантаження всіх сутностей. Це перетворює 20 запитів на 2. У наших модулях контролюємо це на рівні сервісного шару.
Чому DI-контейнер важливий?
Впровадження залежностей (DI) — стандарт Drupal. Згідно з Drupal API, кожен сервіс визначається в services.yml. Завдяки Dependency Injection код стає тестованим та замінним. Якщо потрібно замінити кеш з БД на Redis, змінюється один рядок у services.yml, а не весь код. DI скорочує час доопрацювань у 2–3 рази, а модулі на сервісах тестуються в 3 рази швидше.
Як проєктуємо архітектуру модуля
Приклад мінімальної структури модуля
Для кожного проєкту визначаємо мінімальну структуру. Ось типовий набір файлів, який покриває 80% задач:
web/modules/custom/my_module/
├── my_module.info.yml
├── my_module.module
├── my_module.services.yml
├── src/
│ ├── Controller/
│ │ └── ArticleController.php
│ ├── Service/
│ │ └── ArticleService.php
│ ├── Plugin/Block/
│ │ └── RecentPostsBlock.php
│ └── EventSubscriber/
│ └── RequestSubscriber.php
└── templates/
└── my-module-template.html.twig
Приклад: контролер з кешуванням
Реалізували API виведення статей з посторінковою навігацією та кешуванням тегами — клієнт позбувся ручної інвалідації кешу.
// src/Controller/ArticleController.php
namespace Drupal\my_module\Controller;
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Entity\EntityTypeManagerInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
class ArticleController extends ControllerBase {
public function __construct(
private readonly EntityTypeManagerInterface $entityTypeManager,
) {}
public static function create(ContainerInterface $container): static {
return new static(
$container->get('entity_type.manager'),
);
}
public function list(): array {
$storage = $this->entityTypeManager->getStorage('node');
$ids = $storage->getQuery()
->condition('type', 'article')
->condition('status', 1)
->sort('created', 'DESC')
->range(0, 20)
->accessCheck(TRUE)
->execute();
$nodes = $storage->loadMultiple($ids);
$view_builder = $this->entityTypeManager->getViewBuilder('node');
return [
'#theme' => 'item_list',
'#items' => array_map(
fn($node) => $view_builder->view($node, 'teaser'),
$nodes
),
];
}
public function apiList(Request $request): JsonResponse {
$page = (int) $request->query->get('page', 0);
$limit = min((int) $request->query->get('limit', 10), 100);
$storage = $this->entityTypeManager->getStorage('node');
$query = $storage->getQuery()
->condition('type', 'article')
->condition('status', 1)
->sort('created', 'DESC')
->range($page * $limit, $limit)
->accessCheck(TRUE);
$ids = $query->execute();
$nodes = $storage->loadMultiple($ids);
$data = array_map(function ($node) {
return [
'id' => $node->id(),
'uuid' => $node->uuid(),
'title' => $node->getTitle(),
'created' => $node->getCreatedTime(),
'url' => $node->toUrl()->setAbsolute()->toString(),
'summary' => $node->get('body')->summary,
];
}, $nodes);
return new JsonResponse([
'data' => array_values($data),
'meta' => ['page' => $page, 'limit' => $limit],
]);
}
}
Порівняння: простий модуль vs комплексний
| Параметр |
Простий модуль |
Комплексний модуль |
| Сутності |
Немає |
Кастомні entity + bundle |
| API |
Немає |
REST / JSON:API endpoints |
| Кешування |
Базове |
Теги, контексти, динамічна інвалідація |
| Події |
Немає |
Event subscribers + слухачі |
| Терміни |
2–3 дні |
8–15 днів |
Поширені помилки при розробці модулів та їх рішення
| Помилка |
Наслідки |
Рішення |
| Відсутність сервісного шару |
N+1 запити, дублювання коду |
Винести логіку в сервіси з DI |
| Ігнорування кеш-тегів |
Інвалідація всього кешу, повільні сторінки |
Присвоювати теги кешу кожному entity |
| Процедурні хуки в .module |
Складність підтримки та тестування |
Використовувати EventSubscriber для логіки |
Додаткові компоненти модуля
Плагіни блоків з конфігурацією
Блок RecentPosts з налаштуваннями: адміністратор через інтерфейс змінює кількість постів, не торкаючись коду. Використовуємо ContainerFactoryPluginInterface для впровадження сервісів у плагін.
Event subscribers для кастомної логіки
Відзначимо: коли потрібно реагувати на кожен запит (наприклад, перевіряти заголовок X-Api-Version), підписник події — елегантніше за перевірки в кожному контролері. Реєстрація через тег event_subscriber у services.yml.
Хуки та схеми оновлень
Процедурні хуки залишаємо тільки там, де немає альтернатив. Наприклад, hook_node_presave для автоматичного обчислення часу читання. Для встановлення модуля та міграцій використовуємо .install-файли з update hooks.
Процес роботи та терміни
- Аналіз вимог та проєктування архітектури — 1–2 дні.
- Реалізація модуля — від 2 до 15 днів.
- Тестування (unit + functional) — 1–2 дні.
- Деплой та документація — 1 день.
Підсумкові терміни залежать від складності: від 2 днів для базового модуля до 3 тижнів для комплексного рішення.
Що входить у розробку під ключ
- Проєктування архітектури модуля
- Написання коду (сервіси, контролери, плагіни, хуки, події)
- Налаштування кешування з тегами та інвалідацією
- Покриття unit-тестами (PHPUnit) та функціональними тестами
- Документація щодо встановлення та налаштування
- Передача вихідних кодів та доступів
- Гарантія на код до 3 місяців та місяць безкоштовної підтримки
Наші переваги
Понад 5 років досвіду розробки на Drupal, 50+ успішних проєктів. Дотримуємося Drupal coding standards і використовуємо сучасні практики — DI-контейнер, event-архітектуру, теги кешу. Використання DI-контейнера у 2–3 рази скорочує час на доопрацювання порівняно з процедурним кодом, а модулі на сервісах тестуються в 3 рази швидше. Надаємо гарантію на код до 3 місяців — якщо виникають помилки або потрібне доопрацювання в межах узгодженого функціоналу, виправляємо безкоштовно. Протягом місяця після здачі — безкоштовна підтримка та консультації.
Зв'яжіться з нами для безкоштовної оцінки вашого проєкту. Замовте розробку модуля під ключ і отримайте надійне рішення без прихованих доплат. Якщо вам потрібна така розробка, отримайте консультацію щодо вашого проєкту вже сьогодні.
Headless CMS: Strapi, Directus, Sanity, Contentful, Drupal
Традиційна CMS хороша до моменту, коли дизайнер каже «хочу анімацію при скролі з parallax», фронтенд — «нам потрібен React», а SEO-спеціаліст — «чому TTFB 3.4 секунди». У цей момент монолітна архітектура починає заважати всім одразу. Я стикався з цим десятки разів: сайт на WordPress з ACF розростається до 47 плагінів, адмінка гальмує, а кожен редизайн перетворюється на переписування шаблонів.
Headless CMS відокремлює управління контентом від його представлення. Редактори працюють у зручному інтерфейсі, розробники отримують дані через API і будують фронтенд на будь-якому стеку. Звучить просто. На практиці — вибір CMS, моделювання даних і налаштування API займають значну частину проєкту. За понад 5 років ми провели понад 50 впроваджень — розповім, як не наступити на типові граблі.
Чому headless CMS вигідніша за моноліт?
Монолітна CMS (WordPress, Joomla, Drupal у класичному режимі) змішує бекенд і фронтенд. Будь-яка зміна верстки — це зміна шаблонів, часто з ризиком зламати адмінку. Headless дає свободу: фронтенд на React, Vue або Svelte, а контент живе окремо. Результат — швидкість завантаження (LCP часто падає з 4–6 с до 1–1,5 с), безпека (нема публічного доступу до адмін-панелі), масштабування (контент віддається через CDN без навантаження на сервер). Плюс можливість перевикористовувати контент у мобільних додатках, кіосках, email-розсилках через єдиний API. На одному проєкті це заощадило 80 годин переробок і $4000 бюджету.
Яку headless CMS обрати під проєкт?
Нема універсального інструменту. Вибір залежить від команди, складності контенту та інфраструктури. Розберемо ключові варіанти.
Strapi — open-source, self-hosted, Node.js. Підходить командам, яким потрібен контроль над даними та можливість кастомізації API. Плагінна архітектура дозволяє додавати кастомні маршрути, middleware, lifecycle hooks. REST і GraphQL з коробки. Розгортається за годину — в 3 рази швидше за Drupal. Слабке місце — версії v4 та v5 несумісні між собою, міграція болюча. Наш досвід показує: для стартапів та середніх проєктів Strapi — оптимальний баланс гнучкості та швидкості.
Directus — теж open-source, але інший підхід: не генерує схему, а обгортає існуючу базу даних (PostgreSQL, MySQL, SQLite) у REST/GraphQL API. Якщо база даних вже є — Directus підключається до неї без міграцій. Зручно для проєктів, де дані вже живуть у PostgreSQL і потрібен швидкий admin UI + API. Економія часу на етапі інтеграції — до 30%.
Sanity — хмарна CMS з real-time редактором. Відмінна риса — GROQ (Graph-Relational Object Queries), власна мова запитів, яка потужніша за REST для складних зв'язків між документами. Portable Text для структурованого контенту. Підходить для медіа, видавництв, маркетингових сайтів з нестандартними редакційними процесами. Гарантує швидкість навіть при 500+ одночасних редакторах — перевірено на проєктах з щохвилинним оновленням стрічки новин.
Contentful — enterprise хмарна CMS. Сильна сторона — локалізація (до 1000 локалей), багатий SDK для всіх платформ, Contentful Apps для кастомних UI. Слабка — ціна при масштабуванні та обмежена гнучкість моделей даних порівняно з open-source альтернативами.
Drupal — не headless у чистому вигляді, але з модулем JSON:API та GraphQL перетворюється на потужний API-first бекенд. Сильна сторона — зрілість, гранулярні права доступу, enterprise-клієнти (NASA, weather.com). Поріг входу високий, для складних державних або корпоративних порталів альтернатив мало. Ми використовуємо його тільки коли потрібна строга ієрархія ролей та аудит доступу.
| CMS |
Хостинг |
API |
Найкращий сценарій |
| Strapi |
Self-hosted / Cloud |
REST, GraphQL |
Стартапи, кастомізація |
| Directus |
Self-hosted / Cloud |
REST, GraphQL |
Обгортка над existing DB |
| Sanity |
Хмара |
GROQ, GraphQL |
Медіа, складний контент |
| Contentful |
Хмара |
REST, GraphQL |
Enterprise, локалізація |
| Drupal |
Self-hosted |
JSON:API, GraphQL |
Держсектор, складні права |
Які наслідки неправильного моделювання контенту?
Моделювання контенту — критичний етап. Помилка на цьому етапі коштує дорого. Типова проблема: поле body типу rich text для всього. Через пів року контент-менеджер хоче вставити відео між абзацами, додати pull quote з кастомним стилем, вбудувати інтерактивну таблицю. Rich text це не дозволяє. Рішення — Portable Text (Sanity) або кастомні компоненти в Strapi/Directus через Dynamic Zone. Ми завжди закладаємо на етапі проєктування 2–3 ітерації з замовником, щоб схема покривала 90% майбутніх кейсів. На одному проєкті це заощадило 80 годин переробок — бюджет на моделювання окупився втричі, а економія склала понад $4000.
Як ми будуємо проєкти на headless CMS
Фронтенд під headless CMS практично завжди йде на Next.js (App Router) або Nuxt. Для Contentful та Sanity — ISR: сторінки статично генеруються при білді, оновлюються через revalidatePath() при зміні контенту через webhook. Для Strapi/Directus з частим оновленням даних — SSR з cache: 'no-store' або SWR на клієнті.
Кейс: редизайн корпоративного сайту виробничої компанії. Попередній сайт — WordPress з ACF, 200+ сторінок, 4 мови. Проблеми: TTFB 3,8 с, редактори скаржилися на повільну адмінку.
Перейшли на Strapi (self-hosted, PostgreSQL), Next.js App Router. Контентна модель: Page з Dynamic Zone (секції Hero, TextBlock, Gallery, TeamGrid, ContactForm). Локалізація через Strapi i18n plugin + next-intl на фронтенді. Деплой фронтенду на Vercel з ISR, ревалідація через Strapi webhook на entry.publish.
TTFB з 3,8 с впав до 180 мс (статика з CDN) — різниця в 21 раз. Редактори отримали чистий інтерфейс без 47 плагінів. Вартість хостингу знизилася на $200 на місяць — це економія $2400 на рік.
Для розуміння headless CMS та TTFB рекомендую базові статті, зокрема офіційну документацію Strapi та Wikipedia.
Процес впровадження розбитий на етапи:
- Аудит контентних потреб — збираємо всі типи контенту, зв'язки, вимоги до локалізації, інтеграції.
- Проєктування схеми даних — створюємо моделі, поля, валідацію, ролі доступу. Документуємо в Swagger/OpenAPI.
- Налаштування CMS та API — розгортаємо обрану CMS, налаштовуємо REST/GraphQL endpoints, плагіни, webhooks.
- Розробка фронтенду — підключаємо Next.js/Nuxt, налаштовуємо ISR/SSR, компоненти секцій, роутинг.
- Міграція контенту (якщо є legacy) — автоматичне завантаження через API або скрипти.
- Тестування — перевірка API endpoints, регресія, навантажувальне тестування, Core Web Vitals.
- Деплой — налаштування CDN, SSL, CI/CD, моніторинг.
Скільки часу займає впровадження?
Стандартний шлях включає всі етапи. Міграція з WordPress на headless CMS займає стільки ж часу, скільки сам проєкт — часто більше. Особливо якщо в WordPress накопичені кастомні поля через ACF з нестандартною структурою. Наші середні терміни:
| Тип проєкту |
Термін |
| Простий сайт на Strapi + Next.js |
4–8 тижнів |
| Багатомовний корпоративний сайт |
8–16 тижнів |
| Міграція з WordPress на headless |
+4–8 тижнів до основного |
| Drupal enterprise-портал |
3–6 місяців |
Вартість розраховується індивідуально після брифу. Економія на хостингу за рахунок статичної генерації — до 40% на місяць.
Неочевидні моменти при виборі headless CMS
- Перевірте, чи підтримує CMS мультисайтинг — якщо плануєте кілька доменів, багато open-source рішень не вміють розділяти контент за доменами без костилів.
- Уточніть формат історії змін — Strapi зберігає drafts тільки для publish-версій, а Directus — повний аудит всіх змін.
- Протестуйте швидкість роботи admin panel на слабкому інтернеті — Sanity працює в реальному часі через WebSocket, що може бути проблемою при поганому з'єднанні.
- Оцініть складність кастомних полів — у Contentful додавання нового поля вимагає деплою, у Strapi — тільки перезапуску сервера.
- Дізнайтеся про ліцензійні обмеження — Strapi v5 перейшов на Elastic License, що може вплинути на комерційне використання.
Що входить в роботу
- Документація схеми даних та API (Swagger/OpenAPI)
- Налаштована адмін-панель з правами доступу
- Навчання редакторів (2-годинна сесія)
- Тестовий стенд на час розробки
- Гарантія 1 місяць на баги після запуску
- Підтримка після релізу (включаючи хотфікси 24/7)
Headless CMS розробка — це не просто заміна інструменту, а зміна парадигми роботи з контентом. Ми допомагаємо зробити цей перехід без простоїв та втрати даних. Отримайте консультацію та попередню оцінку — залиште заявку на сайті. Замовте впровадження headless CMS з гарантією результату.