Как мы построили atlasceo.ru на Astro 5: стек, архитектура, контент-слой

Сайт — это не «лендинг и блог». Это продуктовый конвейер.

atlasceo.ru публикует 5-10 премиум-статей в сутки. Каждая — с кастомными компонентами, AI-иллюстрациями, интерактивными блоками. Без единого ручного действия в верстке.

Это не магия. Это инженерное решение. Astro 5 + Tailwind 4 + React 19 + MDX + Vercel. Стек, который превращает файл в src/data/ в журнальную публикацию за 40 секунд сборки.

И нет, я не буду рассказывать «почему Astro — это круто» в стиле маркетинговой брошюры. Я расскажу, как мы строили, что ломалось, что работает и почему через полгода эксплуатации я не жалею ни об одном решении.

Прежде чем объяснять, почему Astro — сначала объясню, почему всё остальное перестало работать. Потому что контекст решений важнее самих решений.

Видите паттерн? Индустрия 10 лет строила фреймворки для приложений и пыталась натянуть их на контентные сайты. Astro — первый, кто сказал: «Контент — это не приложение. Перестаньте обращаться с ним как с приложением».

Стек — это не список технологий. Это набор решений, каждое из которых закрывает конкретную проблему. Вот наш и вот — почему.

Astro 5 — ядро. Content Layer API позволяет определить схему данных для статей: frontmatter с типизацией, валидация через Zod, автоматическая генерация TypeScript-типов. Ни одна статья не попадёт в билд без title, description, author, publishedAt. Фреймворк ловит ошибки до того, как они попадут в прод.

Tailwind 4 — не «утилитарный CSS», а дизайн-система. Директива @theme определяет все токены: цвета, шрифты, отступы, анимации. Один файл — и весь сайт визуально консистентен. Темная тема? Одна строка. Адаптив? По умолчанию. Типографика? @tailwindcss/typography с кастомными стилями для prose.

React 19 — точечно. 95% страниц — чистый Astro (ноль JS). React подключается через client:visible или client:load только для интерактивных виджетов: калькулятор ROI, форма обратной связи, навигационное меню. Islands architecture означает: React грузится только там, где он нужен. Остальная страница — статический HTML.

MDX — секретное оружие. Markdown + JSX = контент, в который можно встроить любой компонент. StatGrid, ComparisonTable, StepFlow, TimelineBlock — всё это живёт внутри статьи как обычный тег. Автор (или AI) пишет контент — и он сразу выглядит как журнальная публикация.

Контент-слой atlasceo.ru — это не «папка с файлами». Это конвейер с жёстким стандартом. Каждая статья проходит через одинаковую структуру, одинаковые компоненты, одинаковые CTA. Результат: 500 статей выглядят так, будто их верстал один дизайнер вручную. На самом деле их верстал ноль дизайнеров.

Вот полный арсенал компонентов, которые доступны в каждой статье:

Архитектура atlasceo.ru — это «convention over configuration» в чистом виде. Каждая папка имеет одну ответственность. Каждый файл лежит там, где его ожидаешь найти. Нулевая магия, максимальная читаемость.

src/
  data/                 # статьи (MDX) — по рубрикам
    singularity/        # AI и сингулярность
    business/           # бизнес, экономика, стратегии
    build/              # стройка: технологии, стек, архитектура
    core/               # ядро: модели, frameworks, benchmarks
  components/
    article/            # 10 premium MDX-компонентов
    content/            # карточки статей, CTA, рубрики
    widgets/            # React islands (калькуляторы, формы)
    layout/             # Header, Footer, Navigation
  layouts/              # ArticleLayout, BaseLayout
  pages/                # Astro-роутинг
    [rubric]/[...slug].astro  # динамический роут статей
public/
  media/generated/      # AI-изображения по slug

Почему это работает на масштабе: добавление новой рубрики = одна папка в src/data/ + одна запись в конфиге Content Layer. Добавление нового компонента = один файл в src/components/article/ + один import в статье. Система растёт линейно, а не экспоненциально.

Я не оптимизировал atlasceo.ru для Lighthouse. Я просто выбрал стек, который не мешает браузеру делать свою работу.

Как это достигается:

Zero JS by default. Astro не отправляет JavaScript, если вы его не попросите. Статья из 5,000 слов с 10 компонентами — это чистый HTML + CSS. Ноль килобайт JS. Браузер рендерит мгновенно.

Islands architecture. React-виджет калькулятора загружается с client:visible — только когда пользователь доскроллил до него. До этого момента — статический placeholder. Страница не ждёт, пока React проинициализируется.

Image optimization. Astro <Image /> компонент генерирует WebP/AVIF, srcset для разных размеров экрана, lazy loading по умолчанию. AI-иллюстрации в hero.png весят 200-400KB в оригинале, но отдаются в 60-80KB WebP.

Edge caching. Vercel кеширует каждую страницу на edge-ноде. Первый визит — 200ms TTFB. Повторный — 20-40ms. CDN делает то, что никакой SSR не сделает.

Деплой atlasceo.ru — это один контракт, который никогда не нарушается:

Полгода эксплуатации atlasceo.ru — это не только успехи. Это коллекция граблей, на которые мы наступили, чтобы вам не пришлось.

MDX и runtime-ошибки. MDX компилируется в build-time. Если AI сгенерировал невалидный JSX — билд падает. Решение: валидация MDX перед коммитом через кастомный скрипт. Ловим синтаксические ошибки до того, как они попадут в CI.

Tailwind 4 breaking changes. Переход с Tailwind 3 на 4 сломал 200+ компонентов. Новый синтаксис @theme, изменённые утилиты, другая работа с dark mode. Совет: не обновляйтесь на major версию в пятницу вечером. Классика, но мы наступили.

Content Layer и большие коллекции. При 1,000+ статей dev-server стартует за 12 секунд вместо 3. Решение: фильтрация коллекций в dev-режиме. В проде — полный билд. В деве — только последние 50 статей.

Изображения и размер репозитория. 500 статей x 5 изображений = 2,500 файлов в public/. Git-репозиторий растёт. Решение на будущее: вынос изображений в CDN (R2/S3) с lazy-загрузкой URL в frontmatter.

Итог: стек, который работает на вас, а не наоборот

atlasceo.ru — это доказательство простой идеи: контентный сайт не должен быть сложным. Он должен быть правильно спроектированным.

Astro 5, Tailwind 4, React 19, MDX, Vercel — каждый элемент стека решает одну задачу и решает её хорошо. Никакого over-engineering. Никакого «а вдруг нам понадобится». Только то, что нужно сейчас — и архитектура, которая позволит добавить то, что понадобится потом.

Если вы строите контентный проект в 2026 году и выбираете Next.js — остановитесь. Подумайте. Посчитайте, сколько JavaScript вы отправите пользователю, который пришёл прочитать текст.

А потом посмотрите на Astro.