Astro или Next.js для контентных сайтов, блогов и лендингов

Короткий ответ

• Astro — для сайтов, где главное контент: блоги, документация, лендинги, корпоративные сайты, медиа. По умолчанию страницы уходят в браузер как чистый HTML без JavaScript.
• Next.js — для продуктов, где контент соседствует с приложением: личные кабинеты, сложные формы, фильтры, авторизация, динамические данные.

Оба фреймворка умеют и статику, и серверный рендеринг. Разница в том, что они считают нормой: Astro — статичную страницу с редкими интерактивными вставками, Next.js — React-приложение, часть которого рендерится на сервере.

Островная архитектура Astro

Острова (islands) — интерактивные компоненты на статичной странице. Всё остальное остаётся обычным HTML.

---
import Header from '../components/Header.astro';
import SearchBox from '../components/SearchBox.jsx';
---
<Header />
<article>...</article>
<SearchBox client:visible />

Здесь Header и статья превращаются в HTML без скриптов, а SearchBox загрузит свой JavaScript, только когда появится в зоне видимости. Директивы управляют моментом гидрации:

• client:load — сразу после загрузки страницы;
• client:idle — когда браузер освободится;
• client:visible — когда компонент попадёт в экран.

Острова можно писать на React, Vue, Svelte и других библиотеках, даже смешивая их на одном сайте.

Zero-JS по умолчанию: почему это важно

Для контентного сайта лишний JavaScript — это:

• медленнее первая отрисовка на слабых телефонах и мобильном интернете;
• хуже метрики Core Web Vitals, особенно INP;
• больше кода, который нужно обновлять и поддерживать.

В Next.js React Server Components тоже сокращают объём клиентского кода, но страница всё равно загружает рантайм React и роутер для гидрации и навигации. Для приложения это оправдано, для статьи из текста и картинок — обычно избыточно.

Content collections

В Astro есть коллекции контента: Markdown и MDX-файлы описываются схемой, а фреймворк проверяет frontmatter при сборке.

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});

Если у статьи нет заголовка или дата записана с ошибкой, сборка упадёт, а не сломается страница в продакшене. В Next.js аналогичное решают через MDX, сторонние библиотеки или headless CMS — это гибче, но требует больше настройки.

Сравнение по ключевым пунктам

Как выбрать

Выбирайте Astro, если:

• большинство страниц — тексты, статьи, описания услуг;
• контент пишется в Markdown или приходит из headless CMS;
• важна скорость на мобильных при минимуме усилий;
• интерактив ограничен формой, поиском, слайдером.

Выбирайте Next.js, если:

• кроме контента есть приложение: кабинет, корзина, дашборд;
• много страниц с персональными или часто меняющимися данными;
• команда уже работает на React и хочет один стек для сайта и продукта.

Смешанный вариант тоже рабочий: маркетинговый сайт и блог на Astro, продукт — на Next.js на поддомене.

Типичные ошибки

• Делать лендинг как SPA, когда он мог быть статичным HTML.
• Превращать всю страницу в остров с client:load — так теряется смысл Astro.
• Выбирать Next.js «на вырост» для сайта, где интерактивности не будет.
• Не продумать CMS: редакторам нужен удобный способ публиковать, а не правка Markdown в репозитории.