Astro 4 — zero JS

Co to jest Astro i jak działają pliki .astro?

Astro: framework dla content-driven websites. Zero JS domyślnie — czyste HTML. Islands architecture — JS tylko tam gdzie potrzeba. Multi-framework — React, Vue, Svelte, Solid, Lit. Vite pod spodem. Plik .astro: --- (frontmatter) --- template. Frontmatter: TypeScript między ---. Importy komponentów. Fetch danych (server-side). Nie dociera do klienta! Template: HTML + {wyrażenia}. Komponenty: Astro.Component, React, Vue. Props: const {title, date} = Astro.props. Slots: slot name='header'. Atrybuty: class:list dla warunkowych klas. set:html dla HTML string. Routing: src/pages/index.astro — /. src/pages/blog/[slug].astro — /blog/:slug. src/pages/[...path].astro — catch-all. getStaticPaths: export async function getStaticPaths() { const posts = await getPosts(). return posts.map(p => ({params: {slug: p.slug}, props: {post: p}})) }. SSR mode: output: 'server' w astro.config. Adapter: @astrojs/vercel, @astrojs/cloudflare, @astrojs/node. Hybrid: output: 'hybrid' — domyślnie static, opt-in SSR. export const prerender = false — per page SSR. Styles: scoped CSS domyślnie. is:global — globalne. Tailwind integracja. CSS modules. Sass.

Content Collections — strukturyzowane treści z TypeScript?

Content Collections: type-safe kolekcje treści. Markdown, MDX, JSON, YAML. Definicja schematu: src/content/config.ts. import {defineCollection, z} from 'astro:content'. const blog = defineCollection({type: 'content', schema: z.object({title: z.string(), date: z.coerce.date(), author: z.string(), tags: z.array(z.string()).optional(), draft: z.boolean().default(false)})}). export const collections = {blog}. Pliki treści: src/content/blog/my-post.md. Frontmatter typowany przez Zod schema. Błąd przy złym typie. Querying: import {getCollection, getEntry} from 'astro:content'. const posts = await getCollection('blog', ({data}) => !data.draft). const post = await getEntry('blog', 'my-post'). Rendering: const {Content, headings} = await post.render(). Content /. Filtrowanie i sortowanie: getCollection z filter function. posts.sort((a, b) => b.data.date - a.data.date). MDX: @astrojs/mdx integration. Używaj komponentów w Markdown. import {components} from './components'. MDXContent {components}. Data collections (JSON): type: 'data'. Schema dla JSON/YAML. API responses, konfiguracja. Rss feed: @astrojs/rss. items z getCollection. XMLResponse. Sitemap: @astrojs/sitemap. Automatyczny sitemap.xml. Custom pages. Image integracja: astro:assets. getImage, Picture, Image. Automatyczne WebP, srcset. Local images optimized.

View Transitions i Islands Architecture w Astro?

View Transitions: animacje między stronami bez SPA. Wbudowane w Astro 3+. Import: import {ViewTransitions} from 'astro:transitions'. head ViewTransitions/. Domyślna animacja: fade. Nazwy przejść: transition:name='hero-image'. Matching element in next page animuje się. Morphing transition. Typy animacji: slide, fade, none. Własne CSS animations. Astro a11y: prefers-reduced-motion respektowane. Persist między stronami: transition:persist — zachowaj element. Audio player nie restartuje. Islands Architecture: Client directives — kiedy hydrować. client:load — natychmiast. client:idle — gdy main thread wolny. client:visible — gdy element widoczny. client:media='(min-width: 768px)' — breakpoint. client:only='react' — tylko klient (brak SSR). Przykłady islands: Fragment jako button — bez JS. Interaktywny counter: Counter client:visible. Carousel: Swiper client:load. Search: SearchBar client:idle. Partial hydration: tylko interaktywne komponenty mają JS. Reszta — czysty HTML. Wynik: minimalne JS bundle. Szybki TTI. Svelte, React, Vue, Solid islands: integracje @astrojs/react, @astrojs/svelte, etc. Mieszane frameworks na jednej stronie. Współdzielone state przez nanostores. import {atom} from 'nanostores'. Shared state między React i Svelte islands. Astro Transitions API: navigate() — programmatic navigation. transition() — manual. Lifecycle events: astro:page-load, astro:after-swap.

Astro DB i integracje?

Astro DB: SQLite + Drizzle ORM wbudowane. Hosted lub self-hosted. @astrojs/db integracja. db/config.ts: import {defineTable, column} from 'astro:db'. const Comment = defineTable({columns: {id: column.number({primaryKey: true}), author: column.text(), content: column.text(), createdAt: column.date()}}). export default defineDbConfig({tables: {Comment}}). Query: import {db, Comment} from 'astro:db'. const comments = await db.select().from(Comment).where(eq(Comment.postId, postId)). db.insert(Comment).values({...}). Astro Actions (nowe): Type-safe form actions. import {defineAction} from 'astro:actions'. export const server = {createComment: defineAction({input: z.object({content: z.string().min(1)}), handler: async ({content}, context) => { await db.insert(Comment).values({content, author: context.locals.user.name}). return {success: true} }})}. Form w .astro: form action={actions.createComment}. useActionResult() — wynik. Integracje popularne: @astrojs/tailwind — Tailwind CSS. @astrojs/mdx — MDX support. @astrojs/sitemap — sitemap.xml. @astrojs/image — image optimization. @astrojs/react — React islands. @astrojs/svelte — Svelte islands. @astrojs/solid-js — SolidJS. Partytown: third-party scripts w Web Worker. analytics.js w worker. Brak blokowania main thread. Middleware w Astro SSR: src/middleware.ts. defineMiddleware. Dostęp do request, cookies, locals. Auth guard pattern. Astro.locals — kontekst między middleware a stronami.

Astro deployment, performance i kiedy wybrać?

Deployment opcje: Vercel: @astrojs/vercel adapter. Zero-config. SSR + ISR. Edge functions. Netlify: @astrojs/netlify adapter. Automatyczne. Cloudflare Pages: @astrojs/cloudflare. Workers + D1. GitHub Pages: output: 'static'. dist/ na gh-pages. Żaden adapter. Performance Astro: PageSpeed Insights — prawie zawsze 100. Zero JS domyślnie. LCP szybki — HTML dostępny od razu. CLS = 0 — brak re-hydration layout shifts. INP doskonały — islands tylko gdzie potrzeba. Astro vs Next.js: Astro — content sites, blogs, docs. Next.js — aplikacje, SaaS, e-commerce z interakcją. Astro — mniej JS = szybszy. Next.js — większy ekosystem. Astro vs Gatsby: Gatsby — brak aktywnego developmentu. Astro — aktywny, lepszy DX. Astro — mniej opinionated. Astro vs Hugo/Jekyll: Astro — nowoczesny stack (JS/TS, Vite). Hugo/Jekyll — prostszy, starszy. Astro — lepsze komponenty UI. Kiedy Astro: Marketing sites. Dokumentacja (docs.astro.build zbudowany w Astro). Blog, portfolio. E-commerce catalog (bez cart — Shopify). Kombinuj z Medusa.js. Landing pages. Nie Astro: Heavy SPA (dashboard, CRM). Real-time features bez Server Islands. App-like UI (todo app, chat). Ecosystem: Starlight — dokumentacja framework. Oparty na Astro. MDX, i18n, search. Deploy do dowolnego hostu.

Wyślij zapytanie