Czym jest Astro, jego podejście techniczne i jak działa

Do niedawna, kiedy tworzyłem stronę firmową, u mnie — podobnie jak u prawie wszystkich — standardem było sięgnięcie po WordPress. Z oczywistych powodów: jest prosty, masz gotowe niemal wszystko, czego potrzebujesz, a po wielu latach mój workflow jest bardzo szybki.

Ale w ostatnim projekcie, stronie Rondabus, użyłem Astro. 

Dlaczego?

Polecano je w newsletterze o AI, który śledzę, bo podobno bardzo dobrze integruje się z agentami.

I rzeczywiście.

Potraktowałem ten projekt przede wszystkim jako test obecnego stanu web developmentu. Chciałem sprawdzić, ile nadal zależy od człowieka, a ile można już zrobić z pomocą AI. Dlatego użyłem polecanego frameworka.

Oczywiście wcześniej poczytałem, żeby sprawdzić, czy nada się do tego, co chciałem zrobić. Z tej dokumentacji powstał ten artykuł, w którym opowiadam, co warto wiedzieć, żeby spróbować. I trochę więcej.

Ale zanim przejdziemy do rzeczy, dwie drobnostki:

Po pierwsze, zachwyciło mnie podejście HTML first. Dokładnie to głoszę od lat.

Po drugie, dziś przy tworzeniu strony internetowej poza osądem całą resztę zapewnia ChatGPT albo Claude..

No dobrze, zaczynamy.

Czym dokładnie jest Astro

Astro to framework do budowania stron internetowych, czyli zestaw narzędzi i zasad, który pomaga generować kod strony.

Ni mniej, ni więcej.

Frameworków jest wiele, każdy ma swoje cechy. Tutaj opowiadam o tych charakterystycznych dla Astro.

Astro pozwala pracować z elementami wielokrotnego użytku, współdzielonymi danymi i szablonami. Potem łączy wszystko i tworzy stronę.

Innymi słowy, pomyśl, czego potrzebujesz do zbudowania strony firmy: nagłówka, menu, stron usług, zdjęć, tekstów, formularza i stopki. Możesz napisać każdą stronę ręcznie w HTML, ale będziesz powtarzać mnóstwo pracy.

Jeśli zmienisz numer telefonu, dodasz element menu albo link w stopce, trzeba byłoby poprawić to we wszystkich plikach strony. W Astro nie, bo elementy są ponownie wykorzystywane.

I powiesz mi: tak jak w WordPressie. Tak, to prawda, ale tutaj nie ma bazy danych.

Możesz też odpowiedzieć, że to jak w każdym języku serwerowym, na przykład PHP, a ja powiem, że na serwerze nie musisz mieć uruchomionego żadnego języka — wystarczą zapisane pliki.

Tak jak robiło się to pierwotnie: jeden plik HTML na URL oraz powiązane CSS i JS.

W praktyce możesz używać HTML, CSS i JavaScriptu albo TypeScriptu, ale także komponentów React, Vue lub Svelte, jeśli ich potrzebujesz, czego ja akurat nie robię.

A jak uzyskać elementy wielokrotnego użytku i wiele plików HTML?

Podstawowa różnica: wygenerować stronę, zanim pojawi się użytkownik

Żeby zrozumieć Astro, warto rozdzielić dwa momenty życia strony:

1. Kiedy jest tworzona.
2. Kiedy ktoś ją odwiedza.

Na tradycyjnej dynamicznej stronie serwer przygotowuje stronę po otrzymaniu żądania. Uruchamia kod, pobiera potrzebne dane, umieszcza je w szablonie i zwraca wynik do przeglądarki.

WordPress działa na przykład tak: PHP uruchamia aplikację, odpytuje bazę danych i używa motywu oraz wtyczek do wygenerowania strony. Owszem, cache pozwala zapisać odpowiedź i użyć jej ponownie, dzięki czemu nie trzeba powtarzać całego procesu przy każdej wizycie. Ważne jest jednak zrozumienie, że istnieje aplikacja zdolna przygotować odpowiedź podczas działania strony.

W Astro natomiast możesz wykonać tę pracę przed publikacją. Przygotowujesz strony, generujesz pliki i umieszczasz wynik na hostingu. To nazywa się build..

Gdy ktoś później otwiera stronę kontaktową, serwer podaje HTML, który był już gotowy. Nie musi dla tego użytkownika ponownie budować nagłówka, pobierać telefonu ani składać stopki.

Ten sposób pracy nazywa się SSG, czyli generowaniem stron statycznych. Ma kilka zalet, na przykład to, że takie strony dosłownie śmigają..

Jest ich więcej i opisuję je w artykule.

To, co powiedziałem do tej pory, wystarczy, żebyś z grubsza wiedział, o czym mówimy, jeśli nie jesteś techniczny. Jeśli jesteś, od teraz zagłębimy się w sposób działania frameworka.

Mocna kawa dla kawoszy. Zostałeś ostrzeżony.

Porozmawiajmy o buildach

Najpierw musisz zrozumieć, że build to po prostu wynik zautomatyzowanego procesu, który bierze wszystkie zapisane przez ciebie pliki (kod, obrazy, style) i przekształca je w pakiet gotowy do uruchomienia przez serwer lub przeglądarkę..

I tyle.

Masz więc zestaw plików z kodem wykonujących różne zadania. Gdy uruchamiasz polecenie kompilujące build, Astro identyfikuje strony, pobiera treść, wykonuje szablony i przygotowuje zasoby, aby ostatecznie zwrócić kompletną statyczną stronę z HTML, CSS i JS (jeśli są potrzebne)..

Na przykład możesz mieć jeden wspólny szablon i osiem kart usług. Build łączy szablon z danymi każdej karty i tworzy odpowiednie strony.

W Astro robi się to poleceniem npm run build , które zwykle uruchamia astro build. . Strona gotowa do wysłania znajduje się w folderze dist i jest gotowa do przesłania na serwer, na który wskazuje domena.

Jak buduje się stronę w Astro

Jeśli nie masz z tym doświadczenia, słownictwo brzmi bardziej skomplikowanie, niż jest. Zobaczmy to na przykładzie małej strony firmowej.

Jak wygląda plik .astro

Plik .astro może łączyć część z kodem z szablonem przypominającym HTML:

—

const titulo = 'Transporte para tu empresa';

—

<h1>{titulo}</h1>

<p>Organizamos los desplazamientos de tu equipo.</p>

To, co znajduje się między dwiema grupami myślników, przygotowuje dane. Niżej jest szablon, który ich używa. Nawiasy klamrowe wskazują miejsce wstawienia wartości.

Ten kod wykonuje się podczas budowania strony, a przeglądarka otrzymuje zwykły nagłówek z tekstem i zwykły akapit z zawartością zmiennej titulo.

Komponenty

Elementy, które są wykorzystywane ponownie.. 

Na przykład nagłówek może być komponentem. Stopka — kolejnym. Szablon modułu hero banner na stronach usług — jeszcze innym. Przechowujesz je osobno i używasz na stronach, które ich potrzebują.

Na przykład strona może zaimportować Header.astro oraz Footer.astro i umieścić <Header /> na początku oraz <Footer /> na końcu. Astro zamienia te elementy na odpowiedni kod HTML.

Props

Te props to dane przekazywane komponentowi, aby można było używać tej samej struktury z różną treścią..

Jeśli utworzyłeś komponent dla modułu hero banner na stronach usług, możesz przekazać mu tytuł, opis i obraz. Struktura zachowuje wygląd, a zmieniają się wartości. Dzięki temu moduł hero usługi 1 może być inny niż usługi 2, z inną treścią, ale tym samym projektem.

W Astro komponent może odczytywać te wartości przez Astro.props. 

Layouty i sloty

Taki layout to struktura współdzielona przez kilka stron. Można powiedzieć, że jest jak komponent na wyższym poziomie: : komponent zwykle stanowi małą część strony, podczas gdy layout obejmuje praktycznie całość..

Może zawierać dokument HTML, metadane, nagłówek i stopkę.

Taki slot to miejsce, w którym umieszcza się własną treść każdej strony. 

Jeśli znasz WordPressa, przypomni ci to szablony współdzielące nagłówek i stopkę, podczas gdy główna treść zmienia się między URL-ami. Nie działa dokładnie tak samo, ale pełni podobną funkcję: pozwala nie budować wspólnych elementów od nowa za każdym razem.

Jak Astro organizuje adresy URL

Astro używa routingu opartego na plikach. W prostym projekcie położenie strony wewnątrz src/pages wyznacza jej adres:

Plik	Ścieżka
src/pages/index.astro	/
src/pages/contacto.astro	/contacto
src/pages/servicios/bodas.astro	/servicios/bodas

Końcowy ukośnik zależy od konfiguracji i hostingu, ale podstawowa zależność wygląda właśnie tak.

Nie musisz ręcznie tworzyć osobnego pliku dla każdego artykułu lub usługi. Dzięki temu możesz generować wiele stron z jednego szablonu i zestawu danych bez ciągłego kopiowania tego samego kodu.

Gdzie przechowuje się treść, jeśli Astro nie ma bazy danych

To, że Astro nie wymaga bazy danych, oznacza, że teksty i dane muszą być przechowywane w jakimś źródle; sam wybierasz jakim.

Pliki, Markdown, JSON i YAML

W małej witrynie część tekstu może znajdować się bezpośrednio na stronach. Dane wspólne, takie jak numer telefonu, warto trzymać osobno, żeby nie poprawiać ich w dwudziestu miejscach.

Artykuł można przechowywać w Markdownie, czyli formacie tekstowym z prostymi oznaczeniami nagłówków, list i linków. JSON i YAML służą do organizowania danych, na przykład kart usług, informacji o pojazdach czy tekstów w różnych językach.

To różne formaty do różnych potrzeb. Nie musisz używać wszystkich ani zamieniać każdego zdania na stronie w skomplikowaną strukturę.

Content Collections

Te Content Collections, czyli kolekcje treści, pomagają organizować zestawy wpisów danych i definiować ich strukturę..

Wyobraź sobie kolekcję usług, w której każda karta musi mieć tytuł, opis i obraz. Możesz ustalić te zasady i walidować dane, dzięki czemu łatwiej wykryć niepełną kartę albo wartość niewłaściwego typu.

Jeśli znasz typy treści i pola niestandardowe w WordPressie, pomysł organizowania kart będzie ci znajomy.

Zaawansowana treść: API, CMS-y i zewnętrzne bazy danych

Choć generujemy strony statyczne, treść może również pochodzić z CMS-a, API lub bazy danych. API to sposób wymiany informacji między dwoma systemami: Astro prosi o dane, a drugi system je dostarcza.

Możesz nawet używać WordPressa jako źródła artykułów, a część publiczną budować w Astro. Do tego połączenia wrócimy w Astro vs WordPress..

Kluczowe pytanie brzmi: kiedy pobierasz te informacje. Jeśli zostaną włączone podczas buildu, zmiana w źródle nie zmieni opublikowanego HTML-a, dopóki nie wygenerujesz go ponownie. Jeśli są pobierane podczas żądania albo z poziomu przeglądarki, zachowanie jest inne i bardziej przypomina tradycyjne strony dynamiczne.

Czym są Astro Islands

Strona może mieć dużo treści przeznaczonej tylko do czytania i niewielką część, z którą chcesz wchodzić w interakcję. Na przykład kalkulator wyceny na stronie usługi. Albo formularz..

Architektura wysp pozwala, aby ten komponent miał własne zachowanie bez zamieniania całej strony w aplikację uruchamianą w przeglądarce.

Co oznacza hydratacja komponentu

Hydratacja polega na dodaniu kodu interaktywnego komponentu do już wygenerowanego HTML-a, aby mógł reagować na działania użytkownika.

Kalkulator lub formularz mogą pojawić się po załadowaniu strony, a następnie uruchomić swoją logikę.. 

Tutaj mówimy o wyspach klienta. Astro ma również wyspy serwerowe do osobnego obsługiwania części dynamicznych, choć na tym etapie nie trzeba wchodzić w szczegóły.

Kiedy przeglądarka potrzebuje JavaScriptu

Nie każda interakcja wymaga wyspy. Link działa w HTML. Proste rozwijane menu można zrealizować za pomocą HTML i CSS.

Natomiast kalkulator aktualizujący wyniki podczas zmiany opcji zwykle potrzebuje JavaScriptu. Formularz zaś wymaga integracji lub języka serwerowego, aby wysłać dane.

I właśnie tutaj podoba mi się podejście Astro: decyzja zależy od funkcji, którą chcesz zaoferować, a nie od wyświechtanej idei, że nowoczesna strona musi ładować całą aplikację..

Astro domyślnie próbuje wysyłać zero JavaScriptu

Uwaga, żebyśmy się nie pomylili: mówimy o stronie widzianej przez użytkownika.. 

Bo Astro rzeczywiście używa JavaScriptu do pracy i kompilacji, ale komponenty .astro nie muszą wysyłać swojego kodu przygotowawczego do przeglądarki. 

Dodane przez ciebie skrypty, hydratowane wyspy i narzędzia zewnętrzne mogą jednak wprowadzać JavaScript. Czat, platforma analityczna (GA4) lub osadzony film go potrzebują.

Dlatego „zero JavaScriptu domyślnie” to punkt wyjścia, a nie obowiązek.

I jak wyjaśniam niżej, na przykład bardzo dobrze pasuje to do mojego podejścia do tworzenia stron firmowych.

Astro może być nie tylko statyczne, ale też dynamiczne lub hybrydowe

Dobrze, dotąd skupiałem się na jednym podejściu, ale istnieją dwa możliwe.

SSG

To, co widzieliśmy do tej pory: strona jest generowana przed wizytami, podczas buildu. 

To idealne rozwiązanie, gdy treść może pozostać taka sama dla wszystkich aż do kolejnej publikacji. Innymi słowy, dla stron, które niewiele się zmieniają.

SSR

Strona jest generowana na serwerze na żądanie. Może korzystać z informacji, których nie ma podczas buildu, na przykład danych powiązanych z sesją. 

Nie wystarczy już dowolny serwer: potrzebujesz zgodnego środowiska uruchomieniowego i odpowiedniego adaptera.

Renderowanie hybrydowe

Możesz łączyć strony prerenderowane ze stronami generowanymi na żądanie. Na przykład zachować gotowe strony publiczne, a strefę prywatną obsługiwać na serwerze.

Jaką rolę odgrywają Node.js i Vite

Node.js pozwala uruchamiać JavaScript poza przeglądarką. W typowym projekcie Astro jest używany podczas tworzenia projektu i generowania buildu, a npm pomaga zarządzać pakietami i poleceniami. W przypadku strony statycznej Node.js nie musi działać na serwerze produkcyjnym, na którym hostujemy build.

Vite to silnik używany przez wiele nowoczesnych frameworków. Jest częścią mechanizmu, którego Astro używa do pracy z plikami i zapewniania środowiska deweloperskiego. 

Tyle wystarczy, żeby złapać ogólny obraz.

Jak zorganizowany jest projekt Astro

Gdy otworzysz projekt, zobaczysz foldery, które nie są stronami, oraz pliki, które nie są publikowane. Ta mała mapa pomoże je rozróżnić.

src

Zawiera kod źródłowy: strony, komponenty, layouty i inne pliki robocze. To tutaj powstaje duża część strony.

public

Zawiera zasoby serwowane bez typowego przetwarzania plików importowanych: na przykład robots.txt albo określone obrazy. Wszystko, co tu umieścisz, będzie publiczne, więc to nie miejsce na dane dostępowe.

package.json

Opisuje projekt, jego zależności i skrypty. To tutaj określa się, co wykonują polecenia takie jak npm run build. Plik blokady zależności pomaga zachować konkretne wersje, aby dało się odtworzyć instalację.

node_modules

To folder, w którym instalowane są pakiety potrzebne projektowi. Zwykle odtwarza się go na podstawie plików zależności i nie zapisuje w całości w Git.

dist

Zawiera wynik produkcyjny po buildzie. W przypadku strony statycznej znajdziesz tu pliki gotowe do publikacji.

Co naprawdę ładuje przeglądarka i Google

Powtórzę to jeszcze raz dla tych w ostatnim rzędzie: przeglądarka nie otrzymuje twojego projektu w takiej postaci, w jakiej widzisz go w edytorze. Otrzymuje HTML i zasoby potrzebne do wyświetlenia i używania strony.

Wyszukiwarka żądająca tego URL-a otrzyma HTML niezależnie od tego, czy przygotowałeś go podczas buildu, czy wygenerowałeś na serwerze. To nie gwarantuje indeksacji ani dobrych pozycji: nadal liczą się treści, linki oraz ustawienia crawlowania i indeksowania, ale z mojego doświadczenia wynika, że to, co otrzymuje wyszukiwarka, można zoptymalizować bardzo, bardzo dobrze.

Chcę, żeby została ci w głowie ta myśl: wszystkie te szablony, kolekcje i komponenty służą do stworzenia strony, która nadal korzysta z tych samych, znanych od lat technologii. Astro steruje tworzeniem strony; wynikowy HTML trafia do przeglądarki.

Wniosek: do jakich stron nadaje się Astro

Ten sposób pracy dobrze pasuje do stron, których treść nie zmienia się zbyt często:

• Strony firmowe.
• Portfolio
• Landing page’e.

Nie polecałbym go do magazynów, blogów i stron, na których powstaje dużo treści albo pracuje wielu twórców treści. Do tego nadal wybieram WordPress zamiast Astro..

Jeśli podoba ci się to podejście i chcesz wiedzieć więcej, możesz dalej poczytać o zaletach i wadach Astro..

A jeśli wolisz zobaczyć to w pełnym projekcie, przygotowałem proces, jak stworzyć stronę lokalnego biznesu z AI, wykorzystując mój ostatni projekt jako przykład.

Gwarantuję, że kiedy raz spróbujesz, nie będziesz chciał wracać.