Почему Astro?

Astro — это веб-фреймворк для создания сайтов, ориентированных на контент, таких как блоги, маркетинговые площадки и интернет-магазины. Astro наиболее известен как пионер новой фронтенд-архитектуры, которая снижает накладные расходы и сложность JavaScript по сравнению с другими фреймворками. Если вам нужен сайт, который быстро загружается и обладает отличным SEO, то Astro создан для вас.

Особенности

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

Ключевые особенности:

• Островки: Компонентная архитектура, оптимизированная для сайтов с большим количеством контента.
• Независимость от UI-фреймворка: Поддержка React, Preact, Svelte, Vue, Solid, HTMX, веб-компонентов и многого другого.
• Приоритет сервера: Перенос ресурсоёмкого рендеринга с устройств посетителей на сервер.
• Zero JS по умолчанию: Минимум JavaScript на стороне клиента для максимальной скорости.
• Коллекции контента: Организация, валидация и типизация TypeScript для вашего контента в формате Markdown.
• Гибкая настройка: Поддержка Partytown, MDX и сотен других интеграций.

Принципы проектирования

Вот пять основных принципов, объясняющих, почему мы создали Astro, какие проблемы он решает и почему он может стать лучшим выбором для вашего проекта.

Astro — это…

1. Ориентация на контент: Astro спроектирован так, чтобы ваш контент был в центре внимания.
2. Приоритет сервера: Сайты работают быстрее, когда HTML рендерится на сервере.
3. Скорость по умолчанию: В Astro должно быть почти невозможно создать медленный сайт.
4. Простота использования: Вам не нужно быть экспертом, чтобы начать создавать на Astro.
5. Фокус на разработчике: У вас должны быть все ресурсы для успешной работы.

Ориентация на контент

Astro был разработан специально для сайтов с большим количеством контента. Сюда относятся маркетинговые сайты, издательские платформы, документация, блоги, портфолио и интернет-магазины. Контент должен доходить до читателя мгновенно.

В то же время большинство современных веб-фреймворков создавались для построения веб-приложений. Они отлично подходят для создания сложных интерфейсов в браузере: панелей управления, почтовых сервисов, социальных сетей и инструментов вроде Figma. Однако такая сложность часто мешает производительности при доставке обычного контента.

Специализация на контенте позволила Astro эффективно масштабироваться до мощных динамических веб-приложений, сохраняя при этом уважение к вашему контенту и аудитории. Этот фокус позволяет нам внедрять уникальные функции производительности, которые были бы избыточны для фреймворков, ориентированных на приложения.

Приоритет сервера

Astro максимально использует серверный рендеринг вместо рендеринга в браузере. Это тот же проверенный подход, который десятилетиями применялся в PHP, WordPress, Laravel и Ruby on Rails. Но вам не нужно учить новый язык — всё по-прежнему строится на HTML, CSS и JavaScript (или TypeScript).

Этот подход отличается от модели многих современных фреймворков, таких как Next.js, SvelteKit или Nuxt. Они изначально создавались для рендеринга всего сайта на стороне клиента (Single-Page App, SPA) и добавили серверный рендеринг в основном для решения проблем с производительностью. Astro же придерживается модели Multi-Page App (MPA).

Модель SPA имеет свои плюсы, но они часто сопровождаются сложностью и потерей в производительности первой загрузки, что критично для контент-сайтов. Подход Astro позволяет использовать клиентский рендеринг только там, где это действительно необходимо.

Скорость по умолчанию

Производительность важна всегда, но для сайтов, чей успех зависит от контента, она критична. Доказано, что плохая скорость загрузки ведет к потере вовлеченности и прибыли:

• Каждые 100 мс ускорения → +1% к конверсии (Mobify)
• Ускорение в 2 раза → +12% к продажам (AutoAnything)
• На 20% быстрее → +10% к конверсии (Furniture Village)

Во многих фреймворках легко создать сайт, который быстро работает на мощном ноутбуке разработчика, но «тормозит» на смартфонах пользователей. Чаще всего виной тому избыточный JavaScript.

Магия Astro заключается в сочетании фокуса на контент и серверной архитектуры. Мы стремимся к тому, чтобы было практически невозможно создать медленный сайт на Astro. Сайт на Astro может загружаться на 40% быстрее и использовать на 90% меньше JavaScript, чем аналогичный проект на самом популярном React-фреймворке.

Простота использования

Цель Astro — быть доступным для каждого веб-разработчика. Он спроектирован так, чтобы казаться знакомым независимо от вашего опыта.

Язык компонентов .astro — это надмножество HTML. Любой валидный HTML-код является валидным кодом Astro! Если вы умеете писать на HTML, вы уже умеете писать компоненты Astro. Мы добавили в него лучшие идеи из JSX (выражения) и Svelte/Vue (области видимости стилей), оставаясь максимально близкими к стандартам веба.

Вы также можете продолжать использовать свои любимые инструменты: React, Preact, Svelte, Vue, Solid и другие. Все они отлично работают внутри проектов Astro.

На сервере нет реактивности в привычном понимании, поэтому вам не нужно беспокоиться о сложных концепциях вроде хуков (React), наблюдаемых объектов (Svelte) или сложных систем управления состоянием. Вся эта сложность просто исчезает.

Фокус на разработчике

Мы верим, что Astro будет успешным только в том случае, если разработчикам будет нравиться его использовать. У нас есть всё, чтобы поддержать вас: отличный CLI, официальное расширение для VS Code с поддержкой TypeScript и документация, которую переводят и поддерживают сотни контрибьюторов на 14 языках.

Наше сообщество в Discord всегда готово помочь, поддержать и дать конструктивную обратную связь. Будь вы новичком или опытным профи, в Astro вы найдете ресурсы для успеха.

Как open-source проект, мы рады любому вкладу — от исправления опечаток до реализации новых функций в ядре. Присоединяйтесь к нам в формировании будущего интернета!