Когда мой личный сайт на Docusaurus начал напоминать перегруженный SPA с кучей hydration-проблем, я задумался о радикальном упрощении. В итоге собрал стек, где Astro генерит статику, Bun заменяет Node/npm/pnpm одним бинарником, а Cloudflare раздаёт контент с edge-сети. Вот что из этого вышло.
Почему Astro — это новый vanilla-js
Главный pain point в моей прошлой сборке — React-овский hydration, который тянул за собой ненужную интерактивность. Astro здесь даёт контролируемый компромисс:
---
// src/pages/index.astro
import BlogPreview from '../components/BlogPreview.astro';
const posts = await Astro.glob('../posts/*.md');
---
<main>
{posts.map(post => (
<BlogPreview client:load {...post.frontmatter} />
))}
</main>
Ключевые фишки:
- Zero JS по умолчанию — компоненты рендерятся в HTML без клиентского кода, если явно не указать
client:*директиву - Islands architecture — интерактивные элементы загружаются изолированно, без полной перерисовки страницы
- Content Collections — встроенный способ структурировать markdown/MDX с TypeScript-тайпчеком
На практике это дало 10-кратное сокращение JS-бандла — вместо 100+ KB React теперь 8-12 KB на всех страницах.
Bun как универсальный ранер
Переход с Node.js на Bun начался как эксперимент, но дал неожиданные плюсы:
- Скорость:
bun installработает в 20-30 раз быстрее npm на кешированных зависимостях - Интеграции: один бинарник заменяет Node, npm, esbuild и jest
- Совместимость: 95% npm-пакетов работают из коробки, включая Astro-плагины
Особенно удобно для скриптов:
#!/usr/bin/env bun
// scripts/optimize-images.ts
import { $ } from "bun";
await $`convert avatar.jpg -resize 200x200 avatar.webp`;
Но есть и подводные камни — некоторые esbuild-плагины требуют полифиллов, а дебаггер в VSCode пока работает хуже, чем с Node.
Cloudflare Pages + edge-функции
Деплой через GitHub Actions занял 15 строк конфига:
# .github/workflows/deploy.yml
name: Deploy
on: push
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: bun install
- run: bun run build
- uses: cloudflare/pages-action@1
with:
apiToken: ${{ secrets.CF_API_TOKEN }}
Плюсы Cloudflare:
- Бесплатный CDN с instant-инвалидацией кеша
- Edge-функции для редких SSR-страниц (например, форма обратной связи)
- Автооптимизация изображений через
?format=avif&quality=80
Минус — отсутствие полноценного serverless storage, пришлось подключать отдельно R2 для медиа.
Локальный AI в процессе разработки
Интересный эксперимент — использование Ollama с моделью Codestral для рефакторинга:
- Конвертировал React-компоненты в Astro-формат через
ollama run codestral "convert this React component to Astro" - Генерил alt-тексты для изображений через локальный LLaMA
- Оптимизировал CSS-переменные для темы через Claude 3 Haiku
Не сказать, что AI сделал всю работу, но 20-30% рутины закрыл — особенно там, где нужно было применять однотипные изменения.
Что в итоге
Такой стек подойдёт, если:
- Нужен максимально лёгкий статический сайт с редкими интерактивными элементами
- Хочется избавиться от node_modules и сложной сборки
- Важен мгновенный деплой и глобальное кеширование
Мой следующий шаг — попробовать частичную hydration через Astro + React Server Components. Если у вас есть опыт с таким стеком — делитесь в комментах.
Попробуй сам: DigitalOcean — $200 кредитов для новых пользователей.