Witaj w Astro!
Astro to nowoczesny framework do budowania stron internetowych skupiony na treści. Jego główna zasada jest prosta: wysyłaj jak najmniej JavaScript do przeglądarki.
Dlaczego Astro?
W przeciwieństwie do frameworków SPA (React, Vue, Angular), Astro generuje domyślnie czysty, statyczny HTML. JavaScript trafia do przeglądarki tylko wtedy, gdy wyraźnie tego zażądasz.
Efekt? Strony ładują się błyskawicznie, mają doskonałe wyniki w Lighthouse i są przyjazne dla SEO.
Składnia komponentów .astro
Każdy komponent ma dwie części oddzielone ---:
---
// Frontmatter: JavaScript wykonywany na serwerze podczas budowania
const greeting = "Witaj";
const items = ["szybkość", "prostota", "elastyczność"];
---
<!-- Szablon: czysty HTML z wyrażeniami {} -->
<h1>{greeting} w Astro!</h1>
<ul>
{items.map(item => <li>{item}</li>)}
</ul>Zero JavaScript domyślnie
Astro renderuje komponenty do statycznego HTML. Nawet jeśli użyjesz komponentu React czy Vue — bez dyrektywy client:* zostanie on wyrenderowany tylko po stronie serwera.
<!-- Statyczny HTML — zero JS wysłanego do przeglądarki -->
<MyReactComponent />
<!-- Hydratacja po załadowaniu strony -->
<MyReactComponent client:load />
<!-- Hydratacja tylko gdy element jest widoczny -->
<MyReactComponent client:visible />Gdzie zacząć?
- Dokumentacja: docs.astro.build
- Instalacja:
npm create astro@latest - Integracje:
npx astro add react tailwind mdx