5 min.
Spis treści:
Co to jest Astro i dlaczego zyskuje popularność?
Jak działa Astro? Islands Architecture i zero JS
Astro vs Next.js – kiedy co wybrać?
Gdzie Astro sprawdza się w praktyce? Projekty i integracje
Jak zacząć z Astro? Szybki start i zasoby
FAQ – najczęściej zadawane pytania o Astro framework
Co to jest Astro i dlaczego zyskuje popularność?
Astro to open-source’owy framework JavaScript do budowania stron content-driven, czyli takich, w których najważniejsza jest treść. Teoretycznie ma rozwiązać bardzo poważny problem dzisiejszego mechanizmu ich ładowania – zamiast wysyłać z serwera użytkownikowi całą witrynę, przypominającą gotową stronę gazety, niektóre www zaczęły przypominać redaktora, który organizuje skład dopiero, gdy zostanie o to poproszony. Dlaczego?
Nawet jeśli strona jest zbudowana w nowoczesnym Next.js i użytkownik może szybko zobaczyć treść, potem wchodzi JavaScript – buduje interakcje, zarządza stanem, aktualizuje elementy itd. W przypadku panelu SaaS, edytora online albo aplikacji z rozbudowanym stanem ma to sens. Jednak w przypadku prostych stron statycznych wielkość ładowanego JS stanowi nadmiarowy koszt i tylko irytuje użytkownika.
Astro bardzo upraszcza ten mechanizm, ale nie jest kolejnym „React killerem” ani prostą alternatywą dla Next.js. To framework o innej filozofii – content-first, server-first i ship less JavaScript.
Przekłada się to na wzrost jego popularności, co potwierdzają poniższe dane.
- Repozytorium withastro/astro ma obecnie ok. 60 tys. gwiazdek na GitHubie.
- Różne źródła wskazują już ponad 3 mln tygodniowych pobrań.
- W State of JavaScript 2024 podano, że wśród badanych developerów 23% używa Astro, a 54% korzysta z Next.js.
- Oficjalny showcase Astro ma 88 stron przykładów, a wśród nich pojawiają się takie firmy, jak IKEA, NordVPN, Porsche, The Guardian Engineering, Michelin, Visa Product Design System. Cloudflare wprost uzasadnia to wydajnością, SEO i architekturą „zero JS by default”.
Jak działa Astro? Islands Architecture i zero JS
Sercem Astro jest Islands Architecture, czyli architektura wyspowa. Oznacza to, że framework traktuje stronę jako ocean, na którym tylko niektóre elementy mają tętnić życiem (m.in. wyszukiwarka, filtr kategorii albo formularz), więc tylko one dostają własny JavaScript. To właśnie określa się jako „zero JS by default”.
Mechanizm Astro jest stosunkowo prosty. Jeśli komponent nie otrzyma dyrektywy client:*, zostanie on domyślnie wyrenderowany do HTML-a i CSS-a na serwerze. A jeśli komponent potrzebuje JS, należy określić moment hydratacji za pomocą dyrektyw takich jak client:load, client:idle czy client:visible.
Dzięki temu w badaniu opublikowanym w marcu 2026 na łamach Journal of Computer Sciences Institute autorzy uzyskali następujące wyniki:
- aplikacja Astro miała łącznie 111 kB skryptów, a Next.js – 270 kB,
- w SSG Astro uzyskało znacznie niższy Total Blocking Time (173 ms) niż Next.js (1137 ms),
- w SSR TBT dla Astro wyniósł 198 ms, a dla Next.js – 1162 ms,
- w CSR Astro nadal miało niższy TBT– 382 ms vs 724 ms w Next.js
Astro wyróżnia się też podejściemframework-agnostic. W jednym projekcie można używać komponentów React, Vue, Svelte, Solid, Preact, Lit lub Web Components. Daje to dużą elastyczność, ponieważ można zachować istniejący komponent Reactowy, nowe pisać w innej wybranej technologii, a resztę strony budować w plikach .astro.