Gatsby или Astro: сравнения SEO-возможностей статических сайтов

Когда я начал изучать современные генераторы статических сайтов, передо мной встал вопрос: какой инструмент лучше подходит для SEO-оптимизации — Gatsby или Astro? Оба фреймворка популярны, оба работают с React, но их подходы к рендерингу, гидратации и управлению JavaScript кардинально отличаются. В этой статье я поделюсь своими экспериментами, тестами и выводами, чтобы помочь вам выбрать оптимальное решение.

Gatsby: классическая гидратация React-приложений

Gatsby использует полную клиентскую гидратацию. Это означает, что после загрузки статического HTML весь интерфейс «оживает» как полноценное React-приложение. Для SEO это хорошо, потому что:

• Контент предварительно рендерится на сервере (SSG).
• Поисковые боты видят готовый HTML.

Но есть и проблема: размер JavaScript-бандла. Например, даже простой блог на Gatsby может загружать 150–200 KB JS, что замедляет время интерактивности (TTI) — критичный параметр для SEO.

Вот типичный пример компонента в Gatsby:

import React from "react"

export default function BlogPost({ data }) {
  const post = data.markdownRemark
  return (
    <div>
      <h1>{post.frontmatter.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </div>
  )
}

Astro: частичная гидратация как прорыв

Astro подходит иначе: он отправляет 0 KB JavaScript по умолчанию. Компоненты рендерятся в статический HTML, а JS подгружается только для тех элементов, которые требуют интерактивности (например, форма поиска). Это называется «partial hydration» или «островная архитектура».

Пример компонента в Astro:

---
// src/components/Button.astro
const { text } = Astro.props
---
<button data-astro-hydration="onClick">{text}</button>

Преимущества для SEO:

• Минимальный вес страницы.
• Мгновенная загрузка контента (высокий балл в Lighthouse).
• Нет «мерцания» при гидратации, что улучшает пользовательский опыт.

Как Astro переигрывает Gatsby в производительности

Тест 1: Время загрузки главной страницы

Я создал два идентичных блога:

• Gatsby: с плагинами gatsby-plugin-image, gatsby-source-filesystem.
• Astro: с интеграцией @astrojs/image и @astrojs/mdx.

Результаты Lighthouse (мобильное устройство):

Astro выигрывает за счет отсутствия ненужного JS. Но что, если сайту нужна сложная интерактивность?

Интеграция с CMS: гибкость или простота

Gatsby: экосистема плагинов

Gatsby славится богатой коллекцией плагинов для CMS. Например, для WordPress:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url: `https://your-wp-site/graphql`,
      },
    },
  ],
}

Плюсы:

• Готовые решения для GraphQL.
• Реализация Incremental Static Regeneration (ISR) через Gatsby Cloud.

Минусы:

• Сложные сборки при большом количестве данных.
• Зависимость от GraphQL (не всем нравится).

Astro: универсальный подход

Astro работает с любым источником данных через нативные API. Пример для WordPress:

---
// src/pages/blog.astro
import { getCollection } from 'astro:content'

const posts = await fetch('https://your-wp-site/wp-json/wp/v2/posts')
  .then(res => res.json())
---
{posts.map(post => (
  <article>
    <h2>{post.title.rendered}</h2>
    <div set:html={post.content.rendered} />
  </article>
))}

Плюсы:

• Простота: не нужно изучать GraphQL.
• Меньше абстракций — больше контроля.

Тест 2: Время сборки 1000 страниц

Я сгенерировал 1000 MDX-статей и замерил время:

Почему Astro быстрее? Он не обрабатывает клиентский JS и не создает runtime для гидратации.

Когда выбрать Gatsby, а когда — Astro?

Gatsby подойдет, если:

• Нужен сложный PWA с оффлайн-режимом.
• Команда уже использует React-экосистему.
• Требуется ISR для часто обновляемого контента.

Astro — ваш выбор, когда:

• Приоритет — скорость и SEO.
• Сайт в основном статический (блог, документация).
• Хочется использовать несколько фреймворков (React, Svelte, Vue) без конфликтов.

Заключение

После месяцев экспериментов я пришел к выводу:

• Astro — чемпион по SEO благодаря нулевой гидратации и минимальному JS. Идеален для контентных сайтов.
• Gatsby — мощный инструмент для проектов, где интерактивность важнее скорости.

Совет: Если вы переходите с Gatsby на Astro, используйте astro add gatsby для совместимости компонентов. Помните, это компромисс между экосистемой и производительностью.