Почему я ушёл с Gatsby.js

Этот сайт прошёл через несколько систем сборки. Для меня он всегда был местом, где можно проверять технологии на реальном проекте.

На нём были и WordPress, и Ghost, и Hugo. Идея написать этот пост появилась после целого дня, потраченного на перенос блога на новую версию Gatsby.js: старая перестала работать с актуальной версией Node.js LTS.

Gatsby.js - коротко

Gatsby.js - это фреймворк поверх React.js и GraphQL. Большая часть проекта написана на JavaScript, часть - на TypeScript. Команда планировала полный переезд на TypeScript, но, похоже, так и не завершила его.

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

На диаграмме видно, как посты, картинки, товары и другие данные из разных источников превращаются в готовый сайт. Сначала данные читаются плагинами: можно написать свои или использовать готовые. Затем преобразователи меняют формат данных. Для блога это часто означает преобразование Markdown в HTML. После этого данные можно доставать из хранилища через GraphQL-запросы.

Ниже пример запроса, который получает все Markdown-записи, сортирует их по дате и возвращает основные поля: дату, заголовок и короткий фрагмент.

{
  allMarkdownRemark(sort: { frontmatter: { date: ASC } }) {
    nodes {
      excerpt
      html
      fields {
        slug
      }
      frontmatter {
        title
        date
      }
    }
  }
}

Первый опыт использования Gatsby.js v2 - 2019 год

Я начал использовать Gatsby.js, когда вышла вторая версия. Хотел попрактиковаться с React.js, и мне показалась интересной идея использовать этот фреймворк. Тогда я ещё не использовал GraphQL в продакшене и не знал, насколько это удачное решение.

Я немного сомневался, когда увидел, насколько Gatsby.js большой, но всё равно решил попробовать. Пришлось принять, что во время разработки будет определённое количество “магии”.

Мне запомнилась их интересная реализация переходов между страницами с помощью подгрузки только нужных данных в формате JSON. Грубо говоря, это выглядело так, что когда ты кликаешь на ссылку внутри сайта, то у тебя не происходило полной перезагрузки страницы, а подгружались необходимые данные.

Реализовано это было с помощью специального элемента <Link>, который под капотом имеет очень хитрый механизм по оптимизации загрузки страниц и поэтому используется для навигации по сайту вместо обычной ссылки.

И все отлично работало в таком виде, я сделал новую тему на React.js и оставил это так жить. Иногда что-то писал.

Но со временем все начало разваливаться, так как с выходом новой версии Node.js эта версия Gatsby.js перестала собираться. В CI всё собиралось, там использовались контейнеры с конкретной версией, но локально я жил просто с последней версией Node.js из Homebrew, так что закатал рукава и полез разбираться, что же там не так.

Переезд на Gatsby v4 - 2021 год

За это время успела выйти уже две версии, так что я перешел сразу на V4. Версия 3 для меня была как версия 2, ничего интересного я там не видел и поэтому не обновлялся. Но переехать сразу через 2 версии оказалось ещё тем делом. В итоге оказалось проще начать всё с начала.

Я взял их заготовку и перенес туда просто все посты и тему для сайта. Так я и продолжил жить с такой конфигурацией, всё запускалось и локально, и в CI.

Переезд на Gatsby v5

И буквально, как только я закончил с V4, вышла новая версия. Пока у меня были свежи воспоминания о переезде, я решил сразу обновиться на последнюю версию.

На удивление это оказалось довольно легко, нужно было только подправить GraphQL-запросы для работы с Markdown и изображениями. Оказалось, это неспроста: работа в репозитории уже довольно сильно замедлилась, поэтому и не было никаких глобальных изменений.

Текущее состояние Gatsby.js

Если коротко, проект почти перестал развиваться. Netlify купила Gatsby, через какое-то время почти вся команда ушла, и проект фактически замер. Разработчики, которые раньше активно занимались Gatsby, уже перешли в другие компании. Осталось несколько человек, которые раз в пару недель исправляют опечатки в документации.

График падения числа коммитов видно на изображении ниже. Это состояние на середину 2024 года. Видно, что самые активные разработчики покинули проект в промежутке между 2022 и 2023 годом.

Если интересно чуть подробнее, то есть короткое видео:

Похоже, Gatsby купили не потому, что это был выдающийся инструмент, а потому что у Netlify было много клиентов, которые им пользовались. Такой вывод я сделал из сообщения Netlify о закрытии Gatsby Cloud после покупки.

Более 20 процентов клиентов Netlify Enterprise используют Gatsby. Мы обязались поддерживать и развивать Gatsby JS…

Плюсы

• Большое количество готовых плагинов
• Разумные стандартные настройки, подходящие большинству
• Экосистема React.js, можно использовать готовые модули также.
• Довольно гибкий способ получения данных через GraphQL.
• Есть UI для выполнения отладки запросов GraphQL.
• Простое подключение источников данных. На работе у нас помимо файлов также интеграция с Cloudinary.

Минусы

• Не поддерживается, умер.
• Хотя сайт генерируется статический, но загружается большой runtime.
• Идет привязка к GraphQL, хотя можно попробовать и обойтись
• Core и плагины часто ощущаются как магия. Типов не хватает, поэтому многое приходится дебажить запуском и проверкой того, что упало. Это не только проблема Gatsby, но здесь она особенно заметна.
• Dependency hell - главная причина, по которой я ушёл. У пакета gatsby 168 зависимостей на npm.
• Был в конце жизни проекта большой упор на Gatsby Cloud, который по итогу также умер².

Выводы

Если обернуться назад и посмотреть на Gatsby.js, то был интересный эксперимент и даже рабочий инструмент, для того кому нужен статический сайт с публичной информацией. Сейчас остаётся много сайтов на Gatsby.js, которым ещё долго будут нужны поддержка и обновления.

Я сам упоминал сайт компании V4Scale, который работает на версии 4, и не планирую его переносить или обновлять. Он просто работает. На выходе у Gatsby.js статические файлы, пусть они хоть на bash собираются.

Но сейчас я бы не начинал новый сайт на Gatsby.js. Он уже отработал своё, и больше у него нет нормальной поддержки или развития. В репозитории на GitHub остались в основном исправления опечаток и ошибок в документации.

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

Системы, которым нужна поддержка разных фреймворков, постепенно отказываются от Gatsby.js. А на форуме обсуждают переезд на новую версию Gatsby.js, потому что зависимости отвалились и пора выбирать другую технологию взамен.

- There have been zero commits to the Gatsby repo in the last 24 days.
- It’s dead. The whole staff is gone except one. It still works well but don’t expect major React 18 features to land

https://x.com/wardpeet/status/1693014604694061194

Ну и если финально взглянуть на популярность пакетов на npm, то точно становится понятно, какой из конкурентов в итоге одержал победу.

Послесловие

Этот пост я начал писать в декабре 2022 года во время поездки в Сербию, но он остался в черновиках до середины 2024 года. Как быстро летит время. Сейчас этот блог обрабатывается уже не Gatsby.js, а просто парой TypeScript модулей (4 файла) и запускается на Bun.

Оказалось, что это может занять не намного больше времени, чем изучение работы и настройка всех плагинов в Gatsby.js.

Фото в момент написания поста в 2022 году в декабре:

Footnotes

1. https://www.gatsbyjs.com/docs/tutorial/getting-started/part-5/ ↩

2. https://www.reddit.com/r/gatsbyjs/comments/1526xfu/gatsby_cloud_sunsetting/ ↩