Dlaczego Astro?

Astro to framework webowy do budowy stron internetowych skupiających się na dostarczaniu treści, takich jak blogi, strony marketingowe i sklepy e-commerce. Astro jest najbardziej znane z bycia pionierem w nowej architekturze frontendowej, której celem jest zmniejszenie narzutu JavaScriptu i kompleksowości w porównaniu z innymi frameworkami. Jeśli potrzebujesz strony, która ładuje się szybko i ma świetne SEO, to Astro jest dla ciebie.

Cechy

Astro to wszechstronny framework webowy. Wszystko, co jest potrzebne do stworzenia strony internetowej jest wbudowane. Dostępne są także setki różnych integracji oraz hooków API (EN) do dostosowania projektu do Twoich konkretnych przypadków użycia i potrzeb.

Niektóre elementy Astro:

• Wyspy: Oparta na komponentach architektura webowa, zoptymalizowana pod strony skupiające się na treściach.
• Agnostyczne podejście do UI (EN): Wspiera React, Preact, Svelte, Vue, Solid, HTMX, web components i więcej.
• Server-first (EN): Przenosi kosztowne renderowanie z urządzeń twoich odwiedzających.
• Zero JS, domyślnie: Mniej klienckiego JavaScriptu, który spowalnia twoją stronę.
• Kolekcje treści (EN): Organizuj, waliduj i dostarczaj bezpieczne typowanie TypeScript dla twoich treści Markdown.
• Konfigurowalne (EN): Partytown, MDX i setki integracji do wyboru.

Reguły projektowe

Oto pięć rdzennych reguł projektowych, które wyjaśniają, dlaczego stworzyliśmy Astro, jakie problemy rozwiązuje i dlaczego może być najlepszym wyborem dla twojego projektu lub zespołu.

Astro jest…

1. Skoncentrowane na treści: Astro jest zaprojektowane dla stron bogatych w treść.
2. Server-first: Strony działają szybciej, kiedy HTML jest renderowany na serwerze.
3. Domyślnie szybkie: Zbudowanie wolnej strony za pomocą Astro powinno być niemożliwe.
4. Łatwe w użyciu: Nie musisz być ekspertem, żeby budować z Astro.
5. Skupione na developerach: Dostęp do zasobów, dzięki którym zdobędziesz sukces, powinien być łatwy.

Skoncentrowane na treści

Astro zostało zaprojektowane do budowania stron bogatych w treść. Należą do nich większość stron marketingowych, wydawniczych, dokumentacje, blogi, portfolia, landing pages, strony społecznościowe oraz sklepy e-commerce. Jeśli masz treści do przekazania, muszą szybko dotrzeć do twojego czytelnika.

W przeciwieństwie do tego, większość współczesnych frameworków zaprojektowano z myślą o budowaniu aplikacji webowych. 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. Z taką zawiłością mogą jednak mieć problem z zapewnieniem świetnej wydajności przy dostarczaniu twoich treści.

Astro od swoich początków jako kreator stron statycznych skupia się na treściach, co pozwoliło na sensowny wzrost do wydajnego, skutecznego, dynamicznego frameworka, który szanuje twoje treści i twoją publiczność. Unikalna priorytetyzacja Astro na treściach pozwala na kompromisy, które dostarczają niezrównanie wydajne funkcje, których implementacja przez frameworki służące do tworzenia aplikacji nie miałaby sensu.

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 bardziej tradycyjne 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 kontraście do innych współczesnych JavaScriptowych frameworków, takich jak Next.js, SvelteKit, 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 szybkie

Dobra wydajność zawsze jest ważna, lecz dla stron opartych o treści jest szczególnie istotna. 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. Nasz cel: 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 Ryanowi Carniato (twórcy frameworków Solid.js i Marko) mowę.

Łatwe 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.

Interfejsowy język .astro jest nadzbiorem HTML: dowolny fragment prawidłowego HTML-a jest również działającym komponentem Astro! Z tego powodu, jeśli umiesz pisać HTML, umiesz także napisać komponenty 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.

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.

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.

Skupione na developerach

Mocno wierzymy w to, że sukces Astro polega tylko i wyłącznie na tym, czy ludzie uwielbiają z niego korzystać. Astro ma wszystko, czego potrzebujesz, by wspomóc cię w budowaniu z jego użyciem.

Astro inwestuje w narzędzia developerskie takie jak świetne doświadczenie CLI od momentu otwarcia terminala, oficjalne rozszerzenie VS Code do podświetlania składni, TypeScript i Intellisense, a także dokumentacja aktywnie utrzymywana przez setki współautorów i dostępna w 14 językach.

Nasza gościnna, pełna szacunku i inkluzywna społeczność na Discordzie jest gotowa do zapewnienia ci wsparcia i motywacji. Rozpocznij wątek w #support, by uzyskać pomoc dla swojego projektu. Odwiedź nasz dedykowany kanał #showcase, aby podzielić się swoimi stronami Astro, postami na blogu, filmikami, a nawet projektami, nad którymi nadal pracujesz, aby otrzymać odpowiednią informację zwrotną i konstruktywną krytykę. Weź udział w regularnych wydarzeniach na żywo, takich jak nasz cotygodniowy call społeczności, “Talking and Doc’ing” oraz poskramianie API/bugów.

Jako projekt open-source, witamy wkład każdego typu i rozmiaru od członków społeczności na każdym poziomie doświadczenia. Zapraszamy cię do wzięcia udziału w dyskusjach o przyszłości Astro i mamy nadzieję, że dołożysz się do naprawy bugów i implementacji nowych funkcji w naszej podstawowej bazie kodu, kompilatorze, dokumentacji, narzędziach językowych, stronach i innych projektach.