Astro 5

Astro 5 — Content Layer API i co nowego?

Astro 5 (2024): major release. Content Layer API — nowe podejście do treści. Server Islands. Astro Actions. Vite 6. Performance improvements. Content Layer API: dowolne źródło danych. Nie tylko pliki MD. CMS, API, baza danych. defineCollection z loader. Stare: defineCollection({type: 'content', schema}). Nowe Astro 5: defineCollection({loader: glob({pattern: '**/*.md', base: './src/content/blog'}), schema}). Lub custom loader: defineCollection({loader: async () => { const posts = await fetchFromCMS(). return posts.map(p => ({id: p.slug, ...p})) }, schema: z.object({title: z.string(), ...})}). Built-in loaders: glob — lokalne pliki. file — pojedynczy plik JSON/CSV. Własne z Loader API. getCollection, getEntry — te same API. Content Collections: src/content/config.ts. Definiuj kolekcje. TypeScript types generowane. Frontmatter validated. Zod schema. Astro 5 benefits: external CMS bez wtyczek. Headless WordPress, Contentful, Sanity. Incremental build z cache. Tylko zmienione treści rebuild. Starlight 0.28+: dokumentacja. Używa Content Layer. Collections adapter. Kompatybilność wsteczna: stary type: 'content' nadal działa. Migracja stopniowa.

Astro Server Islands — hybrydowe wyspy serwerowe?

Server Islands (Astro 5): komponenty renderowane NA SERWERZE dla każdego requestu. Nie statycznie. Nie client-side. Server-side per-request. Koncepcja: strona statyczna (szybka). Wycięte miejsca = server islands. Serwer wypełnia wyspy dynamicznie. Bez pełnego SSR strony. Użycie: import UserGreeting from '../components/UserGreeting.astro'. UserGreeting server:defer /. server:defer = Server Island. Fallback: UserGreeting server:defer. div slot='fallback' Ładowanie... /div. Wyświetlany podczas ładowania wyspy. Kiedy Server Islands: personalizowane treści (imię użytkownika). Koszyk zakupowy (dynamiczny). A/B testing. Geo-specific content. Vs Client Islands: Client Islands: JavaScript w przeglądarce. Server Islands: HTML z serwera, bez JS. Server Islands szybsze, mniej JS. Vs full SSR: full SSR — cała strona per-request (wolniejsza). Server Islands — tylko fragment dynamiczny. Reszta statyczna (szybka). Vs React Server Components: RSC — React specyficzne. Server Islands — dowolny framework (React, Vue, Svelte). Astro agnostyczny. Deferred rendering: strona wraca natychmiast (static). Wyspy dociągane. CDN może cache'ować statykę. Wyspy: origin server. Optymalna wydajność.

Astro Actions — type-safe server actions?

Astro Actions (Astro 4.15+, stable 5): type-safe server mutations. Jak Server Actions Next.js. Bez API routes. Zod validation. Definicja: src/actions/index.ts. import {defineAction} from 'astro:actions'. import {z} from 'astro:schema'. export const server = {subscribe: defineAction({input: z.object({email: z.string().email()}), handler: async ({email}) => { await addToMailingList(email). return {success: true} }})}. Wywołanie z komponentu: import {actions} from 'astro:actions'. Form submit: form method='POST' onSubmit={async (e) => {e.preventDefault(). const formData = new FormData(e.target). const {data, error} = await actions.subscribe(formData). if (error) showError(error)}. Lub: actions.subscribe({email}). Bez formData. Accept: actions akceptują FormData lub JSON. Automatyczne. Zod validates both. Error handling: SafeInput — nie rzuca. const {data, error} = await actions.subscribe(...). error.code — 'BAD_REQUEST' | 'NOT_FOUND' | 'UNAUTHORIZED' | etc. ActionError: throw new ActionError({code: 'UNAUTHORIZED', message: 'Login required'}). isActionError(error) — type guard. Middleware: context.callAction(actions.subscribe, input). HTML forms: pełna kompatybilność. No JS fallback. Progressive enhancement. React integration: useActionState z Astro Actions. TypeScript: automatyczne typy z Zod schema.

Astro i integracje — React, Vue, Svelte, Tailwind, MDX?

Astro Integrations: oficjalne i community. npx astro add react — dodaje React. npx astro add vue. npx astro add svelte. npx astro add solid-js. npx astro add preact. Mieszanie frameworków: jedna strona, różne komponenty. React Card + Vue Header. Astro renderuje SSR każdy osobno. Tylko JS gdy client:* directive. Client directives: client:load — natychmiast. client:idle — gdy browser idle. client:visible — gdy w viewport. client:media='(max-width: 768px)'. client:only='react' — tylko client. Tailwind CSS: npx astro add tailwind. astro.config: integrations: [tailwind()]. Zero config. MDX: npx astro add mdx. .mdx pliki = Markdown + JSX. Importuj komponenty do MDX. import {Card} from '../components/Card.astro'. Keystatic CMS: Thijs de Vries. Content jako pliki. Local lub GitHub. Astro integracja. Sanity: @sanity/astro. Contentful: contentful package. Storyblok: @storyblok/astro. Astro DB: libSQL (Turso) wbudowane. defineTable, db.insert, db.select. Platform adapters: @astrojs/netlify. @astrojs/vercel. @astrojs/cloudflare. @astrojs/node. View Transitions wbudowane: import {ViewTransitions} from 'astro:transitions'. head ViewTransitions /. MPA z SPA-like animations. Prefetch: prefetch wbudowany Astro 3+. Hover prefetch. Tap prefetch.

Astro vs Next.js vs SvelteKit — kiedy wybrać Astro?

Astro doskonały dla: blogów i portali contentowych. Dokumentacji (Starlight). Marketing sites. Portfolio. E-commerce katalogi (z hybrydowymi wyspami). Strony z dużą ilością statycznego kontentu. Astro zalety: MPA — mniej JS domyślnie. Islands Architecture — JS tylko gdy potrzebny. Multi-framework — React+Vue+Svelte razem. Doskonałe SEO out-of-the-box. Content Collections — strukturyzowane treści. Astro ograniczenia: nie dla apps z dużo state. Dashboard z real-time. Ciężkie interaktywne UX. Astro 5 zmniejsza te ograniczenia (Server Islands). Next.js lepszy gdy: React-only projekt. Duża interaktywność. Auth-heavy app. Dashboard. E-commerce z heavy cart. SvelteKit lepszy gdy: Svelte preferowany. Performance critical. SvelteKit 2 bardzo dobry. Mniejszy bundle. Porównanie Lighthouse: Content site z Astro: 100/100/100/100. Typowy Next.js blog: 85-95/90/90/95. Powód: Astro zero JS domyślnie. Image optymalizacja: Astro Image (@astrojs/image). Automatyczna optymalizacja. getImage(), Image komponent. Picture, srcset. WebP/AVIF automatycznie. Font optymalizacja: Astro Fonts (Astro 5). Zero layout shift. Google Fonts + local. CLS fix automatyczny. Decyzja: content site -> Astro. App z state -> Next.js lub SvelteKit. Blog + dokumentacja -> Astro (Starlight). Wciąż chcesz React komponentów -> Astro + React islands.

Wyślij zapytanie