Багато хто з вас напевно чув про статичні генератори сайтів. З їх допомогою можна створювати і маленькі сайти-візитки і повноцінні ecommerce-портали.

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

Поговоримо про те, як взяти найкраще з обох світів і познайомитися зі способами інтеграції Gatsby і WordPress.

WordPress це легко, або ...

Коли хтось говорить, що зробити сайт на WordPress це легко, це і правда і брехня одночасно. Так, можна купити найдешевший хостинг, скачати тему, наставити плагінів, і запустити сайт за вечір.

Цікаве починається пізніше - потрібно стежити за апдейтами цих самих плагінів, бути впевненим, що наш найдешевший хостинг безпечний і сайт не ляже якщо замовити рекламу, а версії, наприклад, PHP і MySQL актуальні. Ще потрібно бути впевненим, що у всіх адмінів сайту безпечні довгі паролі і ніхто не лазить на хостинг по FTP. Я навіть не хочу починати розмову про кешування. Як то кажуть, the list goes on ...

Enter Static Site Generators

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

1. набагато швидше, тому що браузер відразу «віддає» заздалегідь згенеровані сторінки
2. безпечніше, бо сервера з даними попросту немає
3. дешевше в плані хостингу, а у випадку з 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 році як фреймворк для девелоперів, щоб будувати вебсайти на React.

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

Gatsby популяризує ідею так званого "content mesh" - розробки з урахуванням змісту. Тобто платформи, яка пропонує інфраструктурний шар для незв'язних вебсайтів і змінює все уявлення про роль CMS в архітектурі.

Це одна з причин, чому компанії вдалося домогтися таких великих доларових вливань. Замість створення повільної і сумної LAMP архітектури, Gatsby пропонує створювати мости дружби з CMS. Тобто замість однієї величезної і громіздкою CMS, яка керує світом, Gatsby пропонує розділяти і володарювати. Фактично він пов'язує разом спеціалізовані сервіси нового покоління з оптимізованим постачанням вебсайтів. Це дає розробникам доступ до хмарних сервісів без ручної інтеграції.

Трохи про JAMstack

Говорячи про Gatsby не можна не згадати JAMstack, тому що, по суті, Gatsby генерує JAMstack сайти.

JAM stack - це JavaScript, API і Markup.

1. JavaScript - будь-яка динамічна частина сайту на етапі запит / відповідь хендлится за допомогою JavaScript, запущеному на клієнті. Це може бути будь-який фронтенд фреймворк, будь-яка бібліотека, і навіть чистий ламповий JavaScript власною персоною.
2. API - всі процеси на боці сервера або події баз даних проходять через API, з допуском на основі HTTPs з JavaScript. Це може бути створено кастомно або на рівні тсторонніх сервісів.
3. Markup - шаблонна розмітка повинна пребілдитися на етапі деплоя, зазвичай з використанням генератора для контенту сайтів, або системи збирання для додатків.

Developers, developers, developers

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

Як використовувати WordPress в якості headless CMS в парі з Gatsby

Повернемося до заголовку статті. Почати працювати з Gatsby досить просто. Потрібно встановити Gatsby CLI:

npm install -g gatsby-cli... і потім:

gatsby new gatsby-site

Це створить новий сайт. Щоб почати розробку, досить запустити:

gatsby develop

Gatsby почне стежити за змінами коду і перезавантажувати браузер в разі потреби.

Два способи інтеграції

Варто відзначити, 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:

npm install  --save gatsby-source-wordpress

... потім додати конфігурацію в gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "yoursiteurl.ru",
        protocol: "https",
        restApiRoutePrefix: "wp-json",
        hostingWPCOM: false,
        useACF: false,
      },
    },
  ],
}

Тут ми вказуємо URL сайту, на якому встановлений WordPress, (притому, неважливо хоститься він на самому wordpress.com або десь ще), протокол і чи потрібен нам ACF (Advanced Custom Field) плагін.

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

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

const postTemplate = path.resolve(`./src/templates/post.js`)

_.each(result.data.allWordpressPost.edges, edge => {
  createPage({
    path: edge.node.slug,
    component: slash(postTemplate),
    context: {
        id: edge.node.id,
    },
  })
})

І ось так може виглядати базовий шаблон стрічки постів:

import React from  "react" 
import {graphql} from  "gatsby" 
import Layout from  "../components/layout" 
import SEO from  "../components/seo" 

export  default ({data}) => {
   return (
     < Layout > 
      < SEO  title = "home" /> 
      < h1 > My WordPress Blog </ h1 > 
      < h4 > Posts </ h4 >
      {data.allWordpressPost.edges.map (({node}) => (
         < div > 
          < p > {node.title} </ p > 
          < div  dangerouslySetInnerHTML = {{  __html:  node.excerpt }} /> 
        </ div > 
      ))}
     </ Layout > 
  )}
 export  const pageQuery = graphql `query {allWordpressPost (sort: {fields: [date]}) {edges {node {title excerpt slug}}}}`

Докладну інструкцію по конфігурації можна прочитати тут .

2. WPGraphQL метод

У першу чергу необхідно встановити плагін WPGraphQL на стороні WordPress. Це перетворить ваш сайт в GraphQL API сервер. Після установки і активації, GraphQL запити можна буде робити через / graphql / ендпоінт.

Потім на стороні Gatsby потрібно встановити плагін gatsby-source-graphql

npm install  --save gatsby-source-graphql

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

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "WPGraphQL",
        fieldName: "wpgraphql",
        url: "https://yoursiteurl.ru/graphql",
      },
    },
  ]
}

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

Детально про інтеграцію WordPress з Gatsby через WPGraphQL можна почитати на сайті плагіна.

Замість висновку

У кожній бочці меду є ложка дьогтю. Ну або майже в кожній. Ось і у інтеграції Gatsby з WP є свої мінуси. Контент не доступний "прямо відразу". Gatsby поки не підтримує інкрементальні білди, a це означає що з моменту публікації в WordPress до оновлення сайту може пройти якийсь час.

Якщо ви шукаєте рішення типу "сайт за вечір" WordPress + Gatsby не ваш випадок, тому що фронтенд доведеться будувати самостійно. Це і мінус і плюс одночасно.

По матеріалам Dmitry Mayorov