Как использовать WordPress в качестве headless CMS в cвязке с Gatsby

Многие из вас наверняка слышали о статических генераторах сайтов. С их помощью можно создавать и маленькие сайты-визитки и полноценные ecommerce-порталы.

WordPress при этом не сдает позиции. На сегодняшний день, на нем работают больше 35% сайтов в мире.

Предлагаю сегодня поговорить о том, как взять лучшее из обоих миров и познакомиться со способами интеграции Gatsby и WordPress.

Когда кто-то говорит, что сделать сайт на WordPress это легко, это и правда и ложь одновременно. Да, можно купить самый дешевый хостинг, скачать тему, наставить плагинов, и запустить сайт за вечер.

Интересное начинается позже — нужно следить за апдейтами этих самых плагинов, быть уверенным, что наш самый дешевый хостинг безопасен и сайт не ляжет если заказать рекламу, а версии, например, PHP и MySQL самые последние. Eще нужно быть уверенным, что у всех админов сайта безопасные длинные пароли и никто не лазает на хостинг по FTP. Я даже не хочу начинать разговор про кэширование. Как говорится, the list goes on…

Все вышеперечисленные проблемы, в купе с развитием API сервисов привели к тому, что статические генераторы сайтов становятся все более и более популярными. Подумайте сами, статические сайты:

Вдобавок к этим преимуществам, разные генераторы предлагают дополнительный набор «плюшек», чтобы сделать жизнь разработчиков еще слаще:) Давайте посмотрим на нескольких игроков:

Генератор с более чем 30, 000 рейтингом на GitHub. А это дорогого стоит! Основан на Go. Билдинг процесс настолько быстрый, что никто его пока не переплюнул. Это самый быстрый SSG (Static Site Generator) на сегодняшний день. Из минусов: надо учить Go…

Генератор на Ruby, основанный ещё в мохнатом 2009 году. Отлично работает с GitHub страницами и за 11 лет насобирал достаточно мощное комьюнити с отличной поддержкой. Из популярных юзеров этого SSG: Spotify и Netflix. Из минусов: некоторые считают, что Ruby уже не торт.

Отличный генератор, основанный на Vue. Его достаточно просто использовать, а встроенные плагины позволяют подтягивать данные из совершенно разных источников, в том числе WordPress. Из минусов: придётся учить Vue (может это и вовсе не минус)

Работает на React и GraphQL. Славится своей скоростью, потому что подгружает только те части сайта, которые нужны в данный конкретный момент. И предварительно выбирает ресурсы для других страниц. Поэтому сама навигация по страницам будет невероятно быстрой.

Gatsby — это опенсорсный проект, который стартовал в 2015 году как фреймворк для девелоперов, чтобы строить вебсайты на Реакте.

Проект начал быстро набирать популярность и СЕО Gatsby Inc. Кайл Метьюс начал собирать под него инвестиции. С первого раунда инвестиций компании удалось расшириться до 35 человек. А во втором раунде они собрали 35 млн. долларов США и так обалдели, что начали вовсю строить далеко идущие планы и нанимать еще разработчиков. Одним из них стал Джейсон Бaл — создатель плагина WPGraphQL, об этом чуть позже.

Gatsby популяризирует идею так называемого "content mesh" — разработки с учётом содержания. То есть платформы, которая предлагает инфраструктурный слой для несвязных вебсайтов и меняет всё представление о роли CMS в архитектуре.

Это одна из причин, почему компании удалось добиться таких больших долларовых вливаний. Вместо создания медленной и печальной LAMP архитектуры, Gatsby предлагает создавать мосты дружбы с CMS. То есть вместо одной огромной и громоздкой CMSины, которая управляет миром, Gatsby предлагает разделять и властвовать. Фактически он связывает вместе специализированные сервисы современной разработки с оптимизированной поставкой вебсайтов. Это даёт разработчикам доступ к облачным сервисам без ручной интеграции и позволяет использовать Gatsby как слой представления в их CMS. Что особенно радостно для девелоперов на WordPress.

Резюмируя пользу Гетсби:

Говоря о Gatsby нельзя не упомянуть JAMstack, потому что, по сути, Gatsby генерирует JAMstack сайты.

JAMstack — это JavaScript, API и Markup.

JavaScript — любая динамическая часть сайта на этапе запрос/ответ хендлится при помощи JavaScript, запущенном на клиенте. Это может быть любой фронтенд фреймворк, любая библиотека, и даже чистый ламповый JavaScript собственной персоной.

API — все процессы на стороне сервера или события баз данных проходят через переиспользуемый API, с допуском на основе HTTPs с JavaScript. Это может быть создано кастомно или на уровне третье-сторонних сервисов.

Markup — шаблонная разметка должна пребилдится на этапе деплоя, обычно с использованием сайт генератора для контента сайтов, или системы сборки для приложений.

Помните это видео? Так вот, eщё один плюс Gatsby — заточенность только под разработчиков. Никакого доступа для пользователей, никаких красочных интерфейсов. Только консоль, только хардкор! Для создания и управления контентом можно использовать WordPress, Drupal, Sanity, Contentful... У любой из этих систем есть интерфейс.

Вернемся к заголовку статьи. Начать работать с Gatsby довольно просто. Нужно установить Gatsby CLI:

... и затем:

Это создаст новый сайт. Чтобы начать разработку, достаточно запустить:

Gatsby начнет следить за изменениями кода и перезагружать браузер по необходимости.

Стоит отметить, WordPress можно интегрировать с Gatsby двумя способами.

1. Через REST API. Этот способ реализован в плагине gatsby-source-wordpress.

2. Через плагин WPGraphQL. Что такое WPGraphQL? Это опенсорсный проект, созданный Джейсоном Балом. Он (плагин, а не Джейсон) позволяет видеть данные WordPress как схему GraphQL.

WPGraphQL показывает себя с хорошей стороны перед JavaScript комьюнити как бы оно не делилось, будь то Next.js, Gridsome или Gatsby. Джейсона, кстати, и наняли работать в Gatsby благодаря этому плагину.

Вкратце рассмотрим оба варианта.

Сначала необходимо установить плагин gatsby-source-wordpress:

... затем добавить конфигурацию в gatsby-config.js

Здесь мы указываем URL сайта, на котором установлен WordPress, (притом, неважно хостится ли он на самом wordpress.com или где-то ещё), протокол и нужен ли нам ACF (Advanced Custom Field) плагин.

Как только плагин подтянет данные можно начинать строить страницы нашего сайта имплементируя createPages API в gatsby-node.js.

Например, вот так может выглядеть часть gatsby-node.js файла, которая перебирает все помещённые в WordPress данные:

И вот так может выглядеть базовый шаблон ленты постов:

Подробную инструкцию по конфигурации можно прочитать здесь.

В певрую очередь необходимо установить плагин WPGraphQL на стороне WordPress. Это превратит ваш сайт в GraphQL API сервер. После установки и активации, GraphQL запросы можно будет делать через /graphql/ эндпоинт.

Затем на стороне Gatsby нужно установить плагин gatsby-source-graphql

... и добавить конфигурацию в gatsby-config.js

После этого можно, как и в предыдущем примере создавать страницы с помощью createPages API в gatsby-node.js файле.

Подробно об интеграции WordPress с Gatsby через WPGraphQL можно на сайте плагина.

В каждой бочке мёда есть ложка дёгтя. Ну или почти в каждой. Вот и у интеграции Gatsby с WP есть свои минусы. Контент не доступен “прямо сразу”. Gatsby пока не поддерживает инкрементальные билды, a это значит что с момента публикации в WordPress до обновления сайта может пройти какое-то время.

Если вы ищете решение типа "сайт за вечер" WordPress + Gatsby не ваш случай, потому что фронтенд придется строить самостоятельно. Это и минус и плюс одновременно.

Если вы уже использовали WordPress с Gatsby, поделитесь своим опытом в комментариях.