Większość stron w internecie to treść: wpisy, oferty, portfolio, dokumentacja. A mimo to wysyłamy do przeglądarki całe aplikacje JavaScript, żeby wyświetlić tekst i kilka zdjęć. Astro odwraca ten schemat: najpierw gotowy HTML, a JavaScript tylko tam, gdzie naprawdę jest potrzebny.
01 / 07Czym jest Astro
Astro to darmowy framework open source do budowania szybkich stron opartych na treści: blogów, portfolio, stron firmowych, landingów i dokumentacji. Kod piszesz w komponentach, ale wynikiem budowania jest zwykły, lekki HTML i CSS.
Najważniejsza różnica w porównaniu z klasycznymi frameworkami SPA: Astro domyślnie nie wysyła do przeglądarki ani bajta JavaScriptu. Interaktywność dodajesz świadomie, komponent po komponencie.
Astro to „HTML z supermocami”. Piszesz jak w nowoczesnym frameworku, a użytkownik dostaje stronę lekką jak z lat 2000.
02 / 07Architektura wysp
Wyobraź sobie stronę jako ocean statycznego HTML-a. Pływają na nim wyspy: małe, niezależne komponenty, które faktycznie muszą reagować na kliknięcia, np. wyszukiwarka, galeria czy koszyk. Tylko one dostają JavaScript.
Przełącz demo na górze wpisu między Typowym SPA a Astro. W SPA hydratowana jest cała strona, nawet stopka. W Astro tylko trzy wyspy, a każda w swoim czasie:
| Dyrektywa | Kiedy ładuje JS | Dobre dla |
|---|---|---|
| client:load | od razu po wczytaniu strony | przyciski widoczne na starcie |
| client:idle | gdy przeglądarka skończy ważniejsze zadania | wyszukiwarka, czat |
| client:visible | gdy komponent wjedzie na ekran | galerie, komentarze na dole |
| client:media | gdy pasuje media query | menu tylko na telefonie |
03 / 07Mniej JS, szybsza strona
Każdy kilobajt JavaScriptu trzeba pobrać, przetworzyć i wykonać. Na mocnym laptopie tego nie widać, na budżetowym telefonie przez mobilny internet już tak. Poniżej poglądowe porównanie dla prostego wpisu blogowego.
Pokaż dane w tabeli
| Podejście | JS (KB, gzip) |
|---|---|
| SPA (React) | ~180 |
| Next.js (SSG) | ~90 |
| Astro + 1 wyspa | ~12 |
| Astro (HTML) | 0 |
Mniej kodu do wykonania to szybsze LCP i INP, czyli dwa z trzech wskaźników Core Web Vitals, które Google bierze pod uwagę przy ocenie strony. Widać to dobrze na osi czasu ładowania:
Pokaż dane w tabeli
| Etap | SPA | Astro |
|---|---|---|
| HTML i CSS | 0–0,35 s | 0–0,6 s |
| Pobieranie JS | 0,35–1,6 s | 0,6–0,75 s |
| Hydratacja | 1,6–2,3 s | 0,75–0,9 s |
Liczby zależą od projektu, ale kierunek jest zawsze ten sam. Jeśli chcesz porównać prawdziwe dane, zajrzyj do HTTP Archive. Jego raport Core Web Vitals Technology Report grupuje wyniki stron według użytej technologii.
04 / 076 zalet Astro
Szybkość to nie wszystko. Astro jest po prostu przyjemne w pracy, zwłaszcza gdy strona ma rosnąć razem z firmą albo blogiem.
- 01
Zero JS domyślnie
Strona startuje jako czysty HTML. Nie musisz niczego „odchudzać” po fakcie.
- 02
Wyspy na żądanie
Ty decydujesz, który komponent i kiedy dostaje JavaScript: od razu, w wolnej chwili albo po przewinięciu.
- 03
Dowolny framework UI
React, Vue, Svelte, Solid czy Preact, nawet kilka w jednym projekcie. Bez przepisywania gotowych komponentów.
- 04
Treść pod kontrolą
Content Collections pilnują wpisów w Markdown i MDX. Brakujący tytuł albo zła data wychodzą przy budowaniu, nie na produkcji.
- 05
SEO od pierwszego bajtu
Roboty widzą gotową treść. Mapę strony i RSS dodasz oficjalnymi integracjami w kilka minut.
- 06
Statycznie albo na serwerze
Domyślnie statyczne pliki, a gdy trzeba, renderowanie na żądanie z adapterem dla Vercel, Netlify, Cloudflare czy Node.
Do tego płynne przejścia między podstronami (View Transitions) bez budowania SPA i świetna dokumentacja, także dla początkujących.
05 / 07Tak wygląda komponent
Plik .astro ma dwie części. Między kreskami --- jest kod, który wykonuje się podczas budowania (nigdy w przeglądarce). Pod spodem szablon podobny do HTML.
Plik blog.astro---
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro";
import Search from "../components/Search.jsx";
const posts = await getCollection("blog");
---
<Layout title="Blog">
<h1>Wpisy</h1>
<ul>
{posts.map((p) => <li><a href={`/blog/${p.id}/`}>{p.data.title}</a></li>)}
</ul>
<Search client:visible />
</Layout>
Lista wpisów zamienia się w zwykły HTML. Jedyny JavaScript na tej stronie to komponent Search, i to dopiero gdy pojawi się na ekranie.
06 / 07Kiedy Astro, a kiedy nie
| Projekt | Astro? | Dlaczego |
|---|---|---|
| Blog, portfolio | Tak | dużo treści, mało interakcji |
| Strona firmowa, landing | Tak | liczy się szybkość i SEO |
| Dokumentacja | Tak | Markdown, wyszukiwarka jako wyspa |
| Sklep internetowy | Raczej tak | katalog statyczny, koszyk jako wyspa |
| Panel, dashboard, edytor | Raczej nie | prawie każdy ekran jest interaktywny |
Jeśli użytkownik głównie czyta, wybierz Astro. Jeśli głównie klika i edytuje, rozważ framework SPA.
07 / 07Najczęstsze pytania
Czy Astro to framework jak React?
Nie. React to biblioteka do budowania interfejsu, a Astro to framework do budowania całych stron. W Astro możesz używać komponentów Reacta, Vue czy Svelte jako interaktywnych wysp.
Czy Astro jest dobre dla SEO?
Tak. Astro domyślnie wysyła gotowy HTML, więc roboty wyszukiwarek widzą treść od razu, a mała ilość JavaScriptu pomaga w Core Web Vitals.
Czy w Astro da się zrobić sklep albo panel z logowaniem?
Tak, dzięki renderowaniu na żądanie i adapterom serwerowym. Przy aplikacji, w której prawie każdy ekran jest interaktywny, lepiej jednak sprawdzi się framework typu SPA.
Ile kosztuje Astro?
Nic. Astro jest projektem open source na licencji MIT, a statyczną stronę możesz hostować za darmo na wielu platformach.
Astro to mój pierwszy wybór, gdy strona ma być szybka, dobrze wypozycjonowana i łatwa w rozbudowie. Jeśli planujesz nową stronę i zastanawiasz się, czy to dobry wybór, napisz do mnie.