Как использовать WordPress в качестве headless CMS в cвязке с Gatsby
Многие из вас наверняка слышали о статических генераторах сайтов. С их помощью можно создавать и маленькие сайты-визитки и полноценные ecommerce-порталы.
WordPress при этом не сдает позиции. На сегодняшний день, на нем работают больше 35% сайтов в мире.
Предлагаю сегодня поговорить о том, как взять лучшее из обоих миров и познакомиться со способами интеграции Gatsby и WordPress.
WordPress это легко, или
Когда кто-то говорит, что сделать сайт на WordPress это легко, это и правда и ложь одновременно. Да, можно купить самый дешевый хостинг, скачать тему, наставить плагинов, и запустить сайт за вечер.
Интересное начинается позже — нужно следить за апдейтами этих самых плагинов, быть уверенным, что наш самый дешевый хостинг безопасен и сайт не ляжет если заказать рекламу, а версии, например, PHP и MySQL самые последние. Eще нужно быть уверенным, что у всех админов сайта безопасные длинные пароли и никто не лазает на хостинг по FTP. Я даже не хочу начинать разговор про кэширование. Как говорится, the list goes on…
Enter Static Site Generators
Все вышеперечисленные проблемы, в купе с развитием API сервисов привели к тому, что статические генераторы сайтов становятся все более и более популярными. Подумайте сами, статические сайты:
- гораздо быстрее, потому что браузер сразу «отдает» заранее сгенерированные страницы
- безопаснее, потому что сервера с данными попросту нет
- дешевле в плане хостинга, а в случае с Netlify для простых сайтов вообще бесплатны
Вдобавок к этим преимуществам, разные генераторы предлагают дополнительный набор «плюшек», чтобы сделать жизнь разработчиков еще слаще:) Давайте посмотрим на нескольких игроков:
1. Hugo
Генератор с более чем 30, 000 рейтингом на GitHub. А это дорогого стоит! Основан на Go. Билдинг процесс настолько быстрый, что никто его пока не переплюнул. Это самый быстрый SSG (Static Site Generator) на сегодняшний день. Из минусов: надо учить Go…
2. Jekyll
Генератор на Ruby, основанный ещё в мохнатом 2009 году. Отлично работает с GitHub страницами и за 11 лет насобирал достаточно мощное комьюнити с отличной поддержкой. Из популярных юзеров этого SSG: Spotify и Netflix. Из минусов: некоторые считают, что Ruby уже не торт.
3. Gridsome
Отличный генератор, основанный на Vue. Его достаточно просто использовать, а встроенные плагины позволяют подтягивать данные из совершенно разных источников, в том числе WordPress. Из минусов: придётся учить Vue (может это и вовсе не минус)
4. Gatsby
Работает на React и GraphQL. Славится своей скоростью, потому что подгружает только те части сайта, которые нужны в данный конкретный момент. И предварительно выбирает ресурсы для других страниц. Поэтому сама навигация по страницам будет невероятно быстрой.
Почему Gatsby?
Gatsby — это опенсорсный проект, который стартовал в 2015 году как фреймворк для девелоперов, чтобы строить вебсайты на Реакте.
Проект начал быстро набирать популярность и СЕО Gatsby Inc. Кайл Метьюс начал собирать под него инвестиции. С первого раунда инвестиций компании удалось расшириться до 35 человек. А во втором раунде они собрали 35 млн. долларов США и так обалдели, что начали вовсю строить далеко идущие планы и нанимать еще разработчиков. Одним из них стал Джейсон Бaл — создатель плагина WPGraphQL, об этом чуть позже.
Gatsby популяризирует идею так называемого "content mesh" — разработки с учётом содержания. То есть платформы, которая предлагает инфраструктурный слой для несвязных вебсайтов и меняет всё представление о роли CMS в архитектуре.
Это одна из причин, почему компании удалось добиться таких больших долларовых вливаний. Вместо создания медленной и печальной LAMP архитектуры, Gatsby предлагает создавать мосты дружбы с CMS. То есть вместо одной огромной и громоздкой CMSины, которая управляет миром, Gatsby предлагает разделять и властвовать. Фактически он связывает вместе специализированные сервисы современной разработки с оптимизированной поставкой вебсайтов. Это даёт разработчикам доступ к облачным сервисам без ручной интеграции и позволяет использовать Gatsby как слой представления в их CMS. Что особенно радостно для девелоперов на WordPress.
Резюмируя пользу Гетсби:
- Быстрый генератор статических сайтов
- Большой выбор плагинов для работы с различными API
- Работает на знакомом всем React’е
- Большое и быстро растущее сообщество
Немного о JAMstack
Говоря о Gatsby нельзя не упомянуть JAMstack, потому что, по сути, Gatsby генерирует JAMstack сайты.
JAMstack — это JavaScript, API и Markup.
JavaScript — любая динамическая часть сайта на этапе запрос/ответ хендлится при помощи JavaScript, запущенном на клиенте. Это может быть любой фронтенд фреймворк, любая библиотека, и даже чистый ламповый JavaScript собственной персоной.
API — все процессы на стороне сервера или события баз данных проходят через переиспользуемый API, с допуском на основе HTTPs с JavaScript. Это может быть создано кастомно или на уровне третье-сторонних сервисов.
Markup — шаблонная разметка должна пребилдится на этапе деплоя, обычно с использованием сайт генератора для контента сайтов, или системы сборки для приложений.
Developers, developers, developers
Помните это видео? Так вот, eщё один плюс Gatsby — заточенность только под разработчиков. Никакого доступа для пользователей, никаких красочных интерфейсов. Только консоль, только хардкор! Для создания и управления контентом можно использовать WordPress, Drupal, Sanity, Contentful... У любой из этих систем есть интерфейс.
Как использовать WordPress в качестве headless CMS в cвязке с Gatsby
Вернемся к заголовку статьи. Начать работать с Gatsby довольно просто. Нужно установить Gatsby CLI:
... и затем:
Это создаст новый сайт. Чтобы начать разработку, достаточно запустить:
Gatsby начнет следить за изменениями кода и перезагружать браузер по необходимости.
Два cпособа интеграции
Стоит отметить, WordPress можно интегрировать с Gatsby двумя способами.
1. Через REST API. Этот способ реализован в плагине gatsby-source-wordpress.
2. Через плагин WPGraphQL. Что такое WPGraphQL? Это опенсорсный проект, созданный Джейсоном Балом. Он (плагин, а не Джейсон) позволяет видеть данные WordPress как схему GraphQL.
WPGraphQL показывает себя с хорошей стороны перед JavaScript комьюнити как бы оно не делилось, будь то Next.js, Gridsome или Gatsby. Джейсона, кстати, и наняли работать в Gatsby благодаря этому плагину.
Вкратце рассмотрим оба варианта.
1. REST API метод
Сначала необходимо установить плагин gatsby-source-wordpress:
... затем добавить конфигурацию в gatsby-config.js
Здесь мы указываем URL сайта, на котором установлен WordPress, (притом, неважно хостится ли он на самом wordpress.com или где-то ещё), протокол и нужен ли нам ACF (Advanced Custom Field) плагин.
Как только плагин подтянет данные можно начинать строить страницы нашего сайта имплементируя createPages API в gatsby-node.js.
Например, вот так может выглядеть часть gatsby-node.js файла, которая перебирает все помещённые в WordPress данные:
И вот так может выглядеть базовый шаблон ленты постов:
Подробную инструкцию по конфигурации можно прочитать здесь.
2. WPGraphQL метод
В певрую очередь необходимо установить плагин 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, поделитесь своим опытом в комментариях.