Astro vs Gatsby в 2026: Почему Gatsby стал legacy

Если вы поддерживаете проект на Gatsby или только знакомитесь с миром статических генераторов, эта статья прольёт свет на важный вопрос 2026 года: что произошло с Gatsby и почему Astro стал его естественным преемником.

Краткая история Gatsby

Gatsby появился в 2015 году и к 2019-му был главным статическим фреймворком для React-разработчиков. Его идея казалась революционной: GraphQL-слой, через который сайт на этапе сборки получает данные из любых источников — WordPress, Contentful, JSON-файлов, APIs.

К 2022-2023 годам Gatsby оказался в глубоком кризисе:

• Медленная сборка: GraphQL-интроспекция и плагины-процессоры при 5 000+ страниц занимали 15-30+ минут
• Конфликты плагинов: экосистема из 3 000+ плагинов превратилась в минное поле версионных конфликтов
• Устаревший подход: появление Astro показало, что GraphQL-прослойка — излишество, данные можно получать напрямую

В 2023 году Gatsby купил Netlify. С тех пор активное развитие фактически остановилось.

Сравнение Astro и Gatsby

Почему Gatsby «тяжёлый»?

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

Страница блога на Gatsby:
├── React рантайм: ~130 KB
├── Gatsby рантайм: ~70 KB
├── Компонент Header: 15 KB
├── Компонент ArticleList: 25 KB
└── Итого: ~240 KB JavaScript (даже для статичной страницы!)

Та же страница на Astro:
├── Только если есть остров: 0-15 KB
└── Итого: 0-15 KB JavaScript

Миграция с Gatsby на Astro

Хорошая новость: переезд с Gatsby на Astro — один из самых «чистых», потому что оба работают с React и Markdown.

Шаг 1: Маппинг структуры

Gatsby                    →  Astro
src/pages/               →  src/pages/
src/components/          →  src/components/
content/blog/post.md     →  src/content/articles/post.mdx
gatsby-config.js         →  astro.config.mjs
gatsby-node.js           →  Убрать → логика в [slug].astro

Шаг 2: Замена gatsby-node.js

Самое болезненное в Gatsby — gatsby-node.js. В Astro это не нужно:

// Gatsby: gatsby-node.js (сложно, специфично)
exports.createPages = async ({ graphql, actions }) => {
  const result = await graphql(`
    query {
      allMdx {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);
  result.data.allMdx.nodes.forEach((node) => {
    actions.createPage({
      path: `/blog/${node.frontmatter.slug}`,
      component: path.resolve(`./src/templates/post.jsx`),
    });
  });
};

---
// Astro: src/pages/articles/[slug].astro (просто!)
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const articles = await getCollection('articles');
  return articles.map((article) => ({
    params: { slug: article.id.replace(/\.mdx?$/, '') },
    props: { article },
  }));
}

const { article } = Astro.props;
const { Content } = await article.render();
---

<Content />

Шаг 3: Данные без GraphQL

В Gatsby данные приходили через GraphQL-запросы в компонентах. В Astro — нативный fetch или Content Collections:

---
// Вместо gatsby GraphQL-запросов
import { getCollection } from 'astro:content';
const articles = await getCollection('articles');
---

Шаг 4: React-компоненты

Ваши существующие React-компоненты из Gatsby работают в Astro без изменений как острова:

---
import MyReactComponent from '../components/MyReactComponent.jsx';
---

<MyReactComponent client:load />

SEO при миграции

Переезд с Gatsby на Astro для SEO — однозначно позитивное событие. PageSpeed вырастает с 55-75 до 95-100. Но нужно соблюдать базовые правила:

1. Сохраните URL — если были /blog/post-slug/, они должны остаться
2. Настройте 301-редиректы при изменении структуры
3. Перенесите метатеги из frontmatter Gatsby в frontmatter Astro
4. Подключите sitemap через @astrojs/sitemap

Итог

Gatsby сделал важнейший вклад в развитие Jamstack, но его архитектура устарела. В 2026 году поддерживать новые проекты на Gatsby — нецелесообразно. Astro предлагает всё то же самое (SSG, React-компоненты, Markdown-контент), но с лучшей производительностью, современным DX и активным развитием под крылом Cloudflare. Если у вас есть Gatsby-проект — мигрируйте. Это быстрее, чем кажется.