Astro vs Eleventy (11ty): Сравнение двух генераторов статики

Eleventy (11ty) и Astro — два JavaScript-генератора статических сайтов. Оба — отличный выбор для контентных проектов. Оба работают без тяжёлого рантайма. Но между ними есть принципиальные различия в философии и подходе.

История и философия

Eleventy создан Зак Лезерманом в 2017 году. Его девиз — минимализм и гибкость. Eleventy не навязывает ни один шаблонизатор: выбирайте из Nunjucks, Liquid, Handlebars, Pug, EJS, Markdown и даже смешивайте их в одном проекте.

Astro появился в 2021 году с принципиально другой идеей — «Острова Архитектура». Astro ориентирован на компонентный подход с .astro-файлами и поддержкой React/Vue/Svelte/Preact.

Сравнение

Производительность сборки

Eleventy часто выигрывает по скорости сборки для очень больших сайтов (10 000+ страниц), потому что не обрабатывает JS-компоненты.

Eleventy (10 000 страниц):  ~8 секунд
Astro (10 000 страниц):     ~18 секунд

Но для типичных проектов (< 1 000 страниц) разница незаметна.

Шаблонизация: разные парадигмы

Eleventy — Nunjucks (классический):

{% raw %}
---
title: Моя статья
---

<article>
  <h1>{{ title }}</h1>
  {% for post in collections.all %}
    <a href="{{ post.url }}">{{ post.data.title }}</a>
  {% endfor %}
</article>
{% endraw %}

Astro — компонентный подход:

---
const { title } = Astro.props;
const posts = await getCollection('blog');
---

<article>
  <h1>{title}</h1>
  {posts.map((post) => <a href={post.url}>{post.data.title}</a>)}
</article>

Astro ближе к современному React-миру. Eleventy ближе к классическому шаблонному подходу.

Экосистема и плагины

Eleventy имеет богатую экосистему плагинов:

• @11ty/eleventy-img — оптимизация изображений
• @11ty/eleventy-plugin-syntaxhighlight — подсветка кода
• @11ty/eleventy-navigation — навигация
• WebC — компонентная система Eleventy

Astro использует npm-интеграции:

• @astrojs/react, @astrojs/vue — UI-фреймворки
• @astrojs/sitemap, @astrojs/rss — SEO
• @astrojs/mdx — расширенный Markdown
• @astrojs/starlight — документация

Когда выбрать Eleventy

• Простой блог или документация без UI-фреймворков
• Команда знакома с Nunjucks/Liquid/Handlebars
• Нужна максимальная скорость сборки (100 000+ страниц)
• Проект исторически на Eleventy — миграция не нужна
• Хотите минимум зависимостей и максимум контроля

Когда выбрать Astro

• Нужны React/Vue/Svelte компоненты на отдельных страницах
• Команда знакома с JSX/TSX
• Важна типизация через TypeScript и Zod
• Нужен @astrojs/starlight для документации
• Новый проект с нуля в 2026 году

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

Eleventy                    →  Astro
_site/                      →  dist/
src/_includes/base.njk      →  src/layouts/BaseLayout.astro
src/posts/post.md           →  src/content/blog/post.mdx
.eleventy.js                →  astro.config.mjs
collections                 →  Content Collections

Markdown-файлы переносятся без изменений. Шаблоны Nunjucks переписываются в .astro.

Итог

Eleventy и Astro — не конкуренты, а инструменты для разных задач. Eleventy побеждает в минимализме, гибкости шаблонизаторов и скорости сборки гигантских сайтов. Astro побеждает в современном DX, TypeScript, оптимизации изображений и компонентном подходе. Для нового проекта в 2026 году — Astro. Для стабильного Eleventy-проекта — оставайтесь на Eleventy, если нет веских причин мигрировать.