Дружим GatsbyJS с API Drupal

Cоюз GatsbyJS с Drupal: «молниеносный генератор статических сайтов для React» обещающий скорость и старый добрый CMS Drupal. Что нам дает эта дружба?

Годами ранее, я был впечатлен концепцией динамических сайтов, в эту гибкость, которую дают Joomla, WordPress, и прочие CMS, меня устраивали. Сделал пару сайтов для клиентов. Все довольны.

Мой уход в мир генераторов статических сайтов (например, Gatsby) лишил меня возможности создавать контент без кода. Написать новую страницу, потребуется “подумать” (как я говорю сам себе – программировать). Но, представим, если клиенту нужен сайт, где он сам наполняет свой блог — решение сделать чистый статичный сайт превратится в занозу для самого владельца сайта. Клиент будет привязан ко мне навсегда.

Сейчас в мире программистов, делающие сайты инструментами генераторов статических сайтов (в моем случае Gatsby), можно смело “дружить” GatsbyJS и WordPress, Drupal (полагаю, скоро это будет возможно и с Joomla ver.4)

Зачем вообще использовать GatsbyJS?

Gatsby позиционирует себя как «молниеносный генератор статических сайтов для React» обещающий скорость. GatsbyJS по умолчанию предоставляет рендеринг на стороне сервера и предварительно загружает ресурсы при сборке, поэтому переход по сайту происходит безумно быстро. Например, если вы запустите мой текущий сайт, который по большинству стандартов довольно минимален, через тест скорости на https://web.dev/, вы получите рейтинг всех пунктов 100% (плюс/минус). Одна из причин, по которой GatsbyJS работает так быстро, связана с тем, как загружается страница. Каждый раз, когда вы загружаете новую страницу на традиционном сайте, управляемые PHP, каждая загрузка новой страницы требует запроса и ответа от базы данных. В зависимости от того, сколько ресурсов вы загружаете и насколько велик запрос/ответ, это может замедлить загрузку страницы.

В союзе GatsbyJS с Drupal, на сервере происходит несколько вещей. Во-первых, когда вы создаете свой сайт, Gatsby использует API Drupal для получения всех данных сообщений, страниц, настраиваемых блоков, которые понадобятся для отображения вашего сайта. Это действительно легко сделать с помощью плагина Gatsby Source для Drupal. Когда у него есть все данные, он создает все страницы во время сборки. Используя шаблоны, которые вы пишете, Gatsby создает все маршруты, чтобы они были готовы к работе. Вы можете убедиться в этом, если запустите сборку на любом проекте Gatsby, вы увидите новый список файлов в папке /public, в которой будут шаблоны index.html для всех ваших маршрутов.

В результате, когда вы загружаете сайт на сервер, все ваши страницы уже готовы к работе. Переключение между страниц происходит мгновенно, так как все страницы уже созданы заранее. А встроенные алгоритмы оптимизаций изображений, сокращают размер картинок — прощайте гигантские мегабайтные фото файлы — плагины Gatsby позаботились об этом. Плюс, хорошие показатели SEO.

---

Я подумал, это будет полезный опыт подсоединить Gatsby и Drupal. Я считаю, что можно многому научиться, экспериментируя, извлекая уроки из целенаправленных проектов, а не из однодневных уроков по программированию.

---

Любопытство и экспериментирование

Вторая (и более личная) причина, почему я решил использовать GatsbyJS, – это простое любопытство экспериментировать с новыми технологиями. Я подумал, это будет полезный опыт подсоединить Gatsby и Drupal. Я считаю, что можно многому научиться, экспериментируя, извлекая уроки из целенаправленных проектов, а не из однодневных уроков по программированию.

Исходя из опыта работы с кодом в Gatsby, мне понравилось создавать свой собственный макет и шаблоны. Я понял, что мне гораздо удобнее работать с кодом делая сайты с Gatsby, скажем, вручную, “с нуля”.

С другой стороны, в WordPress, Drupal, Joomla, у них есть множество аспектов, которые гораздо удобны, например, простой поиск, страницы категорий, контактная форма и т. д. Определенно, это возможно с Gatsby, но вы должны создать их самостоятельно.

Заключение

Я думаю, что GatsbyJS предлагает уникальные инструменты, методы и коммерческие предложения для генератора статических сайтов, и я хочу создать и запускать сайты, используя API Drupal и GatsbyJS. Возможно, это не всегда требуется, но если вы делаете статический сайт и ваш клиент собирается заполнять его контентом самостоятельно, то дружба Gatsby c Drupal уместна.