Почему Astro?

Astro это веб-фреймворк все-в-одном, для разработки быстрых, ориентированных на контент вебсайтов.

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

1. Ориентирован на контент: Astro был спроектирован для сайтов, с насыщенным контентом.
2. Server-first: Веб-сайты работают быстрее, когда они рендерят HTML на сервере.
3. Быстрый по-умолчанию: Создать медленный веб-сайт с Astro должно быть практически невозможно.
4. Легкий в использовании: Вам не нужно быть экспертом в Astro.
5. Многофункциональный, но гибкий: Более 100+ интеграций Astro на выбор.

Astro был спроектирован для сайтов, с насыщенным контентом… Это включает маркетинговые, новостные сайты, сайты-документации, блоги, портфолио и ecommerce сайты.

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

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

Astro использует server-side rendering вместо client-side rendering настолько, на сколько это возможно. Это тот же подход, что и традиционные серверные фреймворки - PHP, WordPress, Laravel, Ruby on Rails и т.д. -- используются десятилетиями. Но вам не нужно изучать второй серверный язык, чтобы использовать его.

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

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

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

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

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

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

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

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

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

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

Astro был разработан так, чтобы быть менее сложным, чем другие UI фреймворки. Одна из главных причин этого заключается в том, что Astro был разработан для рендеринга на сервере, а не в браузере. Это значит, что вам не нужно переживать о: хуках (React), stale closures (так же React), refs (Vue), observables (Svelte), atoms, selectors, reactions, or derivations. На сервере отсутствует реактивность, поэтому вся эта сложность исчезает.

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

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

Если вам нужно больше контроля, вы можете расширить Astro с более 100 интеграций как React, Svelte, Vue, Tailwind CSS, MDX, оптимизация картинок, и так далее. Подключите ваш любимый CMS или или деплой на ваш хост (EN) одной только командой.

Astro не зависит от UI фреймворков, что означает, что вы можете Создать свой Собственный UI Фреймворк. React, Preact, Solid, Svelte, Vue и Lit официально поддерживаются в Astro. Вы даже можете смешивать разные фреймворки на одной странице, упрощая будущие миграции и предотвращая привязку проекта к одному фреймворку.