AstroJS

Astro JS — это современный фронтенд-фреймворк, предназначенный для разработки высокопроизводительных веб-сайтов. В последнее время он стремительно завоёвывает популярность, и всё больше компаний выбирают его для своих проектов. Яркий пример — компания Porsche, которая мигрировала с Next.js на Astro JS.

Этот проект сделан на Astro JS

Astro работает по принципу “меньше JavaScript — быстрее сайт”. Он отправляет в браузер пользователя только HTML и CSS, а JavaScript добавляет только там, где это действительно нужно (например, для интерактивных элементов).

Технические особенности Astro JS

Архитектура островов (Islands Architecture)

Astro использует концепцию “островов интерактивности”. Представьте страницу как “океан” статичного HTML, где интерактивные компоненты — это отдельные острова. Только эти острова получают JavaScript, а всё остальное остаётся лёгким HTML. Например, на странице товара статичными будут описание и фото, а интерактивным “островом” — только корзина или форма заказа.

Гидратация по требованию (Partial Hydration)

В отличие от традиционных фреймворков, которые “оживляют” (гидратируют) весь JavaScript сразу при загрузке страницы, Astro делает это выборочно и только когда нужно. Вы сами решаете, когда компонент должен стать интерактивным: сразу, при видимости на экране, при клике или вообще никогда. Это радикально снижает нагрузку на браузер.

Prefetch ссылок (Link Prefetching)

Astro автоматически предзагружает страницы, на которые пользователь может перейти. Когда ссылка появляется в области видимости или пользователь наводит на неё курсор, Astro начинает загружать эту страницу в фоне. Результат — мгновенные переходы между страницами, как в одностраничных приложениях.

UI-агностик (UI Framework Agnostic)

Astro не привязывает вас к одному фреймворку. Вы можете использовать React, Vue, Svelte, Solid или даже комбинировать их на одной странице. Хотите шапку на React, а форму на Vue? Без проблем. Это даёт свободу выбора инструментов и позволяет постепенно мигрировать проекты без полной переписывания кода.

Server-Side Rendering (SSR) и Static Site Generation (SSG)

Astro поддерживает оба режима и их гибридное использование. Можете генерировать статичные страницы для блога, но использовать SSR для личного кабинета — всё в одном проекте.