Почему Astro?

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

Особенности

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

Некоторые особенности:

Острова: Компонентная веб-архитектура, оптимизированная для веб-сайтов, ориентированных на контент.
Без UI-ограничений: Поддерживает React, Preact, Svelte, Vue, Solid, Lit, HTMX, веб-компоненты и многое другое.
Серверно-ориентированный: Выносит затратную рендеринговую нагрузку с устройств ваших посетителей.
Нет JavaScript по умолчанию: Меньше JavaScript на стороне клиента, замедляющего работу сайта.
Коллекции контента: Организует, проверяет и обеспечивает типизацию TypeScript для вашего Markdown-контента.
Настраиваемый: Tailwind, MDX и сотни интеграций на выбор.

Принципы дизайна

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

Astro…

Ориентирован на контент: Astro был спроектирован для сайтов, с насыщенным контентом.
Серверно-ориентированный: Веб-сайты работают быстрее, когда они рендерят HTML на сервере.
Быстрый по-умолчанию: Создать медленный веб-сайт с Astro должно быть практически невозможно.
Простота в использовании: Вам не нужно быть экспертом, чтобы создать что-то с помощью Astro.
Ориентирован на разработчиков: У вас должны быть все необходимые ресурсы для успешной работы.

Ориентирован на контент

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

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

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

Серверно-ориентированный

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

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

SPA имеет свои преимущества. Однако это происходит за счет дополнительной сложности и компромиссов в производительности. Эти компромиссы снижают производительность страницы, включая такие критические метрики, как Время взаимодействия (TTI) -- что не имеет особого смысла для веб-сайтов, ориентированных на контент, где важна производительность при первой загрузке.

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

Быстрый по-умолчанию

Хорошая производительность важна всегда, но это особенно важно для веб-сайтов, ориентированных на контент. Хорошо доказано, что низкая производительность приводит к потере вовлеченности, конверсии и денег. К примеру:

Каждые сэкономленные 100мс → на 1% больше конверсии (Mobify)
На 50% быстрее → на 12% больше продаж (AutoAnything)
На 20% быстрее → на 10% больше конверсии (Furniture Village)
На 40% быстрее → на 15% больше регистраций (Pinterest)
На 850 мс быстрее → на 7% больше конверсии (COOK)
Каждая 1 секунда ожидания → на 10% меньше пользователей (BBC)

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

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

Веб-сайт Astro может загружаться на 40% быстрее и использовать на 90% меньше JavaScript чем такой же сайт, построенный на самом популярном веб-фреймворке React. Но не верьте нам на слово: посмотрите, как производительность Astro заставила Райана Карниато (создателя Solid.js и Marko) потерять дар речи

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

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

Язык .astro — это надмножество HTML: любой допустимый HTML допустим в синтаксисе шаблонов Astro! Так что, если вы можете писать HTML, то вы можете писать компоненты Astro! Но он также объединяет некоторые из наших любимых функций, позаимствованных из других компонентных языков, таких как JSX-выражения (React) и области видимости CSS по умолчанию (Svelte и Vue). Такая близость с HTML также упрощает использование прогрессивного улучшения и распространенных шаблонов доступности без каких-либо дополнительных накладных расходов.

Затем мы убедились, что вы также можете использовать любые любимые языки компонентов, которые вы уже знаете, и даже повторно использовать компоненты, которые у вас уже есть. React, Preact, Svelte, Vue, Solid, Lit и другие, включая веб-компоненты, поддерживаются для создания компонентов пользовательского интерфейса в проекте Astro.

Astro был разработан, чтобы быть менее сложным, чем другие фреймворки и языки пользовательского интерфейса. Одной из главных причин этого является то, что Astro был разработан для рендеринга на сервере, а не в браузере. Это значит, что вам не нужно переживать о: хуках (React), нестабильных замыканиях (также React), ссылках (Vue), наблюдаемых (Svelte), атомах, селекторах, реакциях или производных. На сервере нет реактивности, поэтому вся эта сложность исчезает.

Одно из наших любимых высказываний гласит: соглашайтесь на сложность. Мы разработали Astro так, чтобы убрать как можно больше “необходимых сложностей” из опыта разработчика, особенно когда вы впервые приступаете к работе. Вы можете создать пример веб-сайта “Hello World” в Astro, используя только HTML и CSS. Затем, когда вам понадобится создать что-то более мощное, вы сможете постепенно получать доступ к новым функциям и API по ходу работы.

Ориентирован на разработчиков

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

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

Наше гостеприимное, уважительное, инклюзивное сообщество на Discord готово оказать поддержку, мотивировать и ободрить. Откройте тему #support, чтобы получить помощь с вашим проектом. Посетите наш специальный канал #showcase, чтобы поделиться своими сайтами Astro, блогами, видео и даже работой в процессе для обратной связи и конструктивной критики. Участвуйте в регулярных мероприятиях в реальном времени, таких как наш еженедельный общий звонок сообщества, “Talking and Doc’ing”, и API/bug bashes.

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