Dlaczego Astro?

Astro to wszechstronny framework do budowania szybkich stron internetowych skoncentrowanych na dostarczaniu treści.

Dlaczego wybrać Astro, a nie inny webowy framework? Oto pięć głównych zasad projektowych, które pomogą wytłumaczyć dlaczego zbudowaliśmy Astro, problemy które rozwiązuje, i dlaczego Astro może być najlepszym wyborem dla Twojego projektu lub zespołu:

Astro jest…

Dział zatytułowany Astro jest…

1. Skoncentrowany na treści: Astro jest zaprojektowane dla stron bogatych w treść.
2. Server-first: Strony działają szybciej, kiedy HTML jest generowany na serwerze.
3. Domyślnie szybki: Zbudowanie wolnej strony za pomocą Astro powinno być niemożliwe.
4. Łatwy w użyciu: Nie musisz być ekspertem, żeby budować z Astro.
5. Pełny funkcji, ale elastyczny: Ponad 100 integracji z Astro do wyboru.

Skoncentrowany na treści

Dział zatytułowany Skoncentrowany na treści

Astro zostało zaprojektowane do budowania stron bogatych w treść. Należą do nich większość stron marketingowych, wydawniczych, dokumentacje, blogi, portfolia oraz niektóre strony e-commerce.

W przeciwieństwie do tego podejścia większość współczesnych webowych frameworków jest zaprojektowana w celu budowania aplikacji internetowych. Te frameworki sprawdzają się najlepiej przy tworzeniu bardziej zaawansowanych, przypominających aplikacje stron, na przykład: panele admina, skrzynki odbiorcze, serwisy społecznościowe, listy zadań, a nawet aplikacje podobne do natywnych jak Figma lub Ping.

Jest to jedna z najważniejszych różnic, która pomaga zrozumieć Astro. Unikalny dla Astro nacisk na treść pozwala nam na podejmowanie decyzji, które pomagają dostarczyć niezrównaną wydajność oraz funkcjonalności, których nie miałoby sensu implementować we frameworkach służących do tworzenia aplikacji.

Tip

Jeśli Twój projekt wpisuje się w kategorię “aplikacji”, Astro może nie być właściwym wyborem… i jest to w porządku! Sprawdź Next.js, alternatywny do Astro framework do budowania aplikacji webowych.

Server-first

Dział zatytułowany Server-first

Astro korzysta z renderowania na serwerze (ang. server-side) zamiast na kliencie (ang. client-side) wszędzie, gdzie jest to możliwe. Jest to rozwiązanie, które serwerowe frameworki — PHP, WordPress, Laravel, Ruby on Rails, itd. — stosują od dekad. Nie musicie jednak uczyć się osobnego języka, żeby korzystać z renderowania na serwerze. Z Astro, wszystko to wciąż tylko HTML, CSS i JavaScript (lub, jeśli wolicie, TypeScript).

To podejście stoi w kontrze do innych współczesnych JavaScriptowych frameworków, takich jak Next.js, SvetleKit, Nuxt, Remix i podobnych. Wymagają one renderowania na kliencie całej strony i używają serwerowego renderowania głównie, by zaadresować problemy z wydajnością. Takie podejście zostało nazwane Single Page App (SPA), w przeciwieństwie do podejścia Multi Page App (MPA), które stosuje Astro.

Model SPA ma swoje korzyści. Jednak są one okupione dodatkową złożonością i kompromisami związanymi z wydajnością. Te kompromisy obniżają wydajność strony — włączając w to istotne metryki, jak Czas do Interaktywności (ang. Time to Interactive — TTI) — i nie mają one większego sensu dla stron opartych na treści, gdzie szybkość pierwszego ładowania jest kluczowa.

Domyślnie szybki

Dział zatytułowany Domyślnie szybki

Dobra wydajność zawsze jest ważna, lecz dla stron opartych o treści jest wyjątkowo krytyczna. To, że niska wydajność negatywnie wpływa na zaangażowanie, konwersje i potencjalny zysk, zostało dobrze sprawdzone. Na przykład:

• Każde 100ms szybciej → 1% więcej konwersji (Mobify, dodatkowe $380,000/rok)
• 50% szybciej → 12% więcej sprzedaży (AutoAnything)
• 20% szybciej → 10% więcej konwersji (Furniture Village)
• 40% szybciej → 15% więcej rejestracji (Pinterest)
• 850ms szybciej → 7% więcej konwersji (COOK)
• Każda 1s wolniej → 10% mniej użytkowników (BBC)

W wielu webowych frameworkach łatwo jest zbudować stronę, która wygląda świetnie podczas developmentu, tylko po to, żeby po zahostowaniu ładowała się boleśnie wolno. Winowajcą często jest JavaScript, ponieważ telefony i mniej wydajne urządzenia użytkowników rzadko dorównują wydajnością laptopom deweloperów.

Magia Astro bierze się z połączenia dwóch wartości opisanych powyżej — skupieniu na treści oraz bazującej na serwerze architekturze MPA — pozwala to podejmować decyzje i dostarczać funkcjonalności, których nie są w stanie dostarczyć inne frameworki. Rezultatem jest niesamowita wydajność dla każdej strony. Naszym celem jest: Zbudowanie wolnej strony przy użyciu Astro powinno być prawie niemożliwe.

Strona zbudowana z Astro jest w stanie ładować się 40% szybciej używając 90% mniej JavaScriptu, niż ta sama strona zbudowana przy pomocy najpopularniejszego frameworku używającego Reacta. Nie musicie wierzyć naszym słowom: zobaczcie jak wydajność Astro odbiera Ryan’owi Carniato (twórcy frameworków Solid.js i Marko) mowę.

Łatwy w użyciu

Dział zatytułowany Łatwy w użyciu

Celem Astro jest przystępność dla każdego web developera. Astro zostało zaprojektowane tak, by być łatwe i dostępne, niezależnie od poziomu umiejętności, czy poprzednich doświadczeń z web developmentem.

Zaczęliśmy, upewniając się, że będziecie w stanie użyć którejkolwiek z waszych ulubionych bibliotek do budowania interfejsów. React, Preact, Svelte, Vue, Solid, Lit i inne są wspieranymi metodami tworzenia interfejsów użytkownika w projektach Astro.

Chcieliśmy też, żeby Astro miało wbudowany świetny język do budowania komponentów. W tym celu stworzyliśmy własny język .astro do opisywania interfejsu użytkownika. Jest on silnie inspirowany przez HTML: jakikolwiek fragment prawidłowego HTML-a jest również działającym komponentem Astro! Zawiera on w sobie również niektóre z naszych ulubionych funkcjonalności, które pożyczyliśmy z innych języków UI, jak wyrażenia JSX (React) i domyślne scope’owanie CSS-a (Svelte i Vue). Bliskość .astro do HTML-a ułatwia też stosowanie progresywnego wzbogacania (ang. progressive enhancement) i powszechnych wzorców dostępności bez dodatkowych komplikacji.

Astro zostało zaprojektowane, by być mniej skomplikowane niż inne frameworki i języki UI. W dużej mierze jest tak dlatego, że celem Astro jest renderowanie na serwerze, a nie w przeglądarce. To oznacza, że nie musicie się martwić o: hooki (React), stale closures (również React), refs (Vue), observables (Svelte), atomy, selektory, reactions ani derivations. Na serwerze reaktywność nie istnieje, więc wszystkie związane z tym komplikacje znikają.

Jednym z naszych ulubionych powiedzeń jest: złożoność jest wyborem. Zaprojektowaliśmy Astro tak, by pozbyć się z developmentu jak najwięcej “koniecznej złożoności”, szczególnie podczas początkowego wdrażania się w Astro. Możecie zbudować przykładową stronę “Hello World” używając jedynie HTML-a i CSS-a. Następnie, chcąc zbudować coś bardziej skomplikowanego, możecie inkrementalnie sięgać po nowe funkcjonalności i API.

Pełny funkcji, ale elastyczny

Dział zatytułowany Pełny funkcji, ale elastyczny

Astro to wszechstronny framework, który ma w sobie wszystko czego potrzebujecie, żeby zbudować stronę. Astro zawiera składnię do tworzenia komponentów, routing bazujący na systemie plików, zarządzanie assetami, mechanizm budowy i bundlowania, optymalizacje, ładowanie danych i wiele więcej. Jesteście w stanie tworzyć świetne strony nie wychodząc poza zestaw funkcjonalności oferowany przez Astro.

Jeśli potrzebujecie więcej kontroli, możecie rozszerzyć Astro korzystając z ponad 100+ integracji jak React, Svelte, Vue, Tailwind CSS, MDX, optymalizacje obrazów, i wiele więcej. Połączcie Astro z waszym ulubionym systemem CMS lub deploy’ujcie na wasz ulubiony hosting używając pojedynczej komendy.

Astro ma agnostyczne podejście do interfejsu użytkownika, co oznacza, że możecie użyć waszego ulubionego frameworku UI (ang. “Bring Your Own UI Framework” - BYOF). React, Preact, Solid, Svelte, Vue, i Lit są oficjalnie wspierane przez Astro. Możecie nawet korzystać z różnych frameworków w ramach jednej strony, co ułatwi przyszłe migracje i pomoże uniknąć zbytniej zależności od pojedynczego frameworku.