← Все статьи

С Next.js на Astro: когда блогу не нужен React на клиенте

Разработчик перенёс портфолио с Next.js 15 на Astro 6: ~230 КБ JS на странице поста стало ~0 КБ, Lighthouse 99–100.

Содержание

Коротко

На Dev.to автор описал миграцию личного сайта с Next.js 15 (React 19, Framer Motion, GSAP) на Astro 6: для контентного блога React-рантайм и гидратация оказались лишними — страница поста перестала отгружать JS в браузер.

Что произошло

v1 был «портфолио-флексом»: анимации, dual design modes, markdown через content-collections, next-mdx-remote, react-markdown, starry-night. Когда фокус сместился на еженедельный блог, стало видно: ~180 КБ framework + ~45 КБ React + ~60 КБ Framer Motion + ~30 КБ GSAP — ради статичного текста.

Next.js умеет SSG, но гидратирует страницы: браузер качает, парсит и исполняет JS для параграфов и блоков кода.

Astro по умолчанию отдаёт HTML + CSS; JS только там, где нужна интерактивность (islands). У автора на всём сайте — маленький inline-скрипт для тёмной темы.

Миграция заняла ~день: MDX-посты скопировали, Tailwind v4 и темы сохранили, Shiki из коробки вместо starry-night, View Transitions API вместо Framer Motion.

Почему это важно

Выбор фреймворка — не «Astro vs Next.js навсегда», а соответствие задаче:

Сценарий Разумный выбор
SaaS, дашборды, e-commerce Next.js / полноценный React
Контентный блог, документация Astro / аналоги zero-JS по умолчанию

Цифры из статьи: Lighthouse Performance 85–90 → 99–100, сборка ~15 с → ~5 с, зависимости 30+ → ~10.

На практике

  1. Оцените, сколько JS реально нужно на типичной странице блога — если только типографика и подсветка кода, React может быть избыточен.
  2. В Astro content collections и Shiki закрывают 80% потребностей без content-collections и rehype-цепочек.
  3. React-компоненты остаются доступны через client:load для редких виджетов.
  4. Не выбрасывайте «шоу»-анимации портфолио ради блога — автор сознательно пожертвовал morphing layout ради скорости публикаций.
  5. Старый Next-сайт можно оставить архивом — миграция не обязана быть «всё или ничего».

Итог

Материал — здравый framework fit: Next.js отличен для приложений, Astro — для контента. Если ваша главная работа — отдавать markdown быстро, zero-JS по умолчанию часто выигрывает у «бензопилы для масла».