Если вы разработчик из Vue-экосистемы, вы наверняка столкнулись с выбором: Nuxt.js — привычный мета-фреймворк для Vue, или Astro — агностичный фреймворк с максимальной производительностью?
Ключевое различие
Nuxt.js — «всё в одном» для Vue. Маршрутизация, SSR, управление состоянием через Pinia, автоимпорты — всё в рамках Vue-экосистемы.
Astro — фреймворк-агностик. Не привязан к Vue или React. Его приоритет — генерировать максимально легкий HTML. Astro может использовать Vue-компоненты как «острова», но не является Vue-фреймворком.
Сравнение по параметрам
| Параметр | Astro | Nuxt.js |
|---|---|---|
| Базовый UI | Любой (Vue, React, Svelte…) | Строго Vue |
| JS по умолчанию | 0 KB ✅ | ~100 KB (Vue рантайм) |
| PageSpeed (блог) | 100/100 🔥 | 75-90 |
| Автоимпорты | Нет | ✅ Да |
| SSG | ✅ Нативно | ✅ nuxt generate |
| SSR | ✅ С адаптерами | ✅ Нативно (Nitro) |
| Управление состоянием | Внешние (nanostores) | Pinia встроена |
| Тип проекта | Контент, блоги, лендинги | SPA, полноценные приложения |
Архитектура
Nuxt использует универсальный рендеринг: Vue-компоненты гидратируются полностью при загрузке.
<!-- pages/blog/[slug].vue -->
<script setup>
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>
<template>
<h1>{{ post.title }}</h1>
</template> Astro генерирует статический HTML, интерактивность — исключение:
---
import SearchWidget from './SearchWidget.vue';
const posts = await fetch('/api/posts').then((r) => r.json());
---
{posts.map((p) => <li>{p.title}</li>)}
<!-- Vue-остров загрузится только когда появится на экране -->
<SearchWidget client:visible /> Производительность
Тест: блог с 50 статьями, поиск, форма комментариев.
| Метрика | Astro (SSG) | Nuxt (SSG) | Nuxt (SSR) |
|---|---|---|---|
| JS на клиенте | ~15 KB | ~130 KB | ~130 KB |
| PageSpeed Mobile | 99 | 78 | 68 |
| LCP | 0.7 с | 2.1 с | 2.0 с |
Можно ли использовать Vue в Astro?
Да! @astrojs/vue позволяет использовать .vue файлы как острова:
npx astro add vue Это значит: знаете Vue → можете использовать его в Astro-проекте как острова интерактивности.
Когда выбрать Astro?
Блог / новостной портал
Astro даст 100/100 PageSpeed без усилий. Nuxt потребует оптимизации.
Корпоративный сайт
Лендинги, портфолио, страницы услуг — чистая статика. Astro идеален.
Смешанная команда
Часть пишет React, часть Vue? Astro позволяет использовать оба без конфликтов.
Когда остаться на Nuxt?
- Вся команда в Vue-экосистеме, Pinia, Vue Router
- Нужно сложное управление состоянием с SSR
- Проект — полноценное веб-приложение (дашборд, SaaS)
- Нужны Nuxt-модули без аналогов в Astro
Итог
Astro — лучший выбор для контентных SEO-ориентированных проектов. Nuxt — зрелая экосистема для Vue-команд, строящих полноценные приложения. Хорошая новость: вы можете начать с Astro и использовать Vue-компоненты как острова, получив лучшее из обоих миров. Подробнее про возможности — в обзоре Astro.