Astro Grundlagen

6 Kernkonzepte

Die wichtigsten Astro-Konzepte für moderne Webentwicklung: Astro-Komponenten · Inseln-Architektur · Rendering-Modi · Layouts · Content Collections · Integrationen Astro ist ein modernes Web-Framework für inhaltsorientierte Websites. Es kombiniert statische Site-Generierung mit der "Inseln"-Architektur für interaktive Komponenten und liefert nur das notwendige JavaScript.

Astro-Komponenten – .astro Dateien

.astro · Frontmatter · HTML · JSX-ähnlich

--- const title = "Hallo Welt"; const items = ["eins", "zwei", "drei"]; --- <html> <h1>{ title }</h1> <ul> {items.map(item => <li>{item}</li>)} </ul> </html>

Astro-Komponenten sind .astro-Dateien mit einem Frontmatter (Code-Block) und einem HTML-Template. Sie ähneln JSX, laufen aber serverseitig und rendern zu statischem HTML.

Beispiele

---

// Frontmatter – wird serverseitig ausgeführt

export interface Props {

name: string;

age?: number;

}

const { name, age = 0 } = Astro.props;

---

<h2>Hallo { name }</h2>

{ age > 0 && <p>Alter: { age }</p> }

</div>

<style>

.card { padding: 1rem; border: 1px solid #ccc; }

</style>

Tipp: Der Frontmatter-Code (---) wird serverseitig ausgeführt und nie an den Client gesendet. Das macht Astro-Komponenten sehr schnell und sicher.

Inseln-Architektur – Interaktive Komponenten

client:load · client:idle · client:visible · client:media

Inseln sind interaktive Komponenten, die nur dann JavaScript laden, wenn sie benötigt werden. Das reduziert die Bundle-Größe drastisch und verbessert die Performance.

client:*-Direktiven

Direktive	Beschreibung
client:load	Wird sofort geladen (beim Seitenaufbau)
client:idle	Wird geladen, wenn der Browser idle ist (nach Hauptinhalten)
client:visible	Wird geladen, wenn die Komponente sichtbar wird (Intersection Observer)
client:media	Wird geladen, wenn eine Media-Query zutrifft
client:only	Nur client-seitig rendern (kein SSR)

Beispiele

---

import Counter from '../components/Counter.astro';

import Chart from '../components/Chart.astro';

import Gallery from '../components/Gallery.astro';

import MobileNav from '../components/MobileNav.astro';

---

Tipp: Die Inseln-Architektur ist das Kernkonzept von Astro. Verwenden Sie client:load nur für kritische interaktive Elemente und client:idle oder client:visible für alle anderen.

Rendering-Modi – SSG, SSR, SPA

output: static · server · hybrid · prerender

// astro.config.mjs export default defineConfig({ output: 'static', // 'server' oder 'hybrid' }); // In Seiten: export const prerender = true/false

Astro unterstützt verschiedene Rendering-Modi: statische Site-Generierung (SSG), serverseitiges Rendering (SSR) und Hybrid-Modus. prerender steuert das Verhalten pro Seite.

Rendering-Modi

Modus	Beschreibung	output
Static (SSG)	Alle Seiten werden zur Build-Zeit generiert	static
Server (SSR)	Alle Seiten werden dynamisch serverseitig gerendert	server
Hybrid	Einige Seiten statisch, andere dynamisch	hybrid

Beispiele

// astro.config.mjs

import { defineConfig } from 'astro/config';

export default defineConfig({

// Static Site Generation (Standard)

output: 'static',

// Oder: Server-Side Rendering

// output: 'server',

// Oder: Hybrid

// output: 'hybrid',

});

// In einer Seite (für Hybrid/Server)

---

// Diese Seite wird statisch vorgerendert

export const prerender = true;

---

// Dynamische Pfade für SSG

export async function getStaticPaths() {

return [

{ params: { slug: 'hello-world' } },

{ params: { slug: 'astro-guide' } },

];

}

Tipp: Für die meisten inhaltsorientierten Websites ist output: 'static' die beste Wahl – die Seiten werden einmalig gebaut und sind extrem schnell.

Layouts & Slots – Wiederverwendbare Strukturen

// src/layouts/BaseLayout.astro <html> <head> <title>{ title }</title> </head> <body> <nav>...</nav> <slot />  <footer>...</footer> </body> </html>

Layouts in Astro sind Komponenten, die das Grundgerüst einer Seite definieren. Sie können Slots für dynamische Inhalte verwenden.

Beispiele

---

export interface Props {

title: string;

description?: string;

}

const { title, description } = Astro.props;

---

<head>

<title>{ title }</title>

{ description && <meta name="description" content={ description } /> }

</head>

<body>

<main>

</main>

</body>

</html>

---

import BaseLayout from '../layouts/BaseLayout.astro';

---

<h1>Willkommen!</h1>

<p>Dies ist der Hauptinhalt.</p>

</BaseLayout>

Tipp: Mit <slot name="..." /> können Sie mehrere Inhaltsbereiche in einem Layout definieren – z.B. für Sidebar oder Footer.

Content Collections – Inhalte verwalten

src/content/ · defineCollection · schema

// src/content/config.ts import { defineCollection, z } from 'astro:content'; export const collections = { blog: defineCollection({ schema: z.object({ title: z.string(), pubDate: z.date(), }) }) };

Content Collections ermöglichen die strukturierte Verwaltung von Inhalten (Blogposts, Dokumentation, Produkte) mit Typensicherheit und automatischer Inhaltsverzeichnis-Generierung.

Beispiele

// src/content/config.ts

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({

type: 'content', // 'content' für .md/.mdx, 'data' für .json/.yaml

schema: z.object({

title: z.string(),

description: z.string().optional(),

pubDate: z.date(),

tags: z.array(z.string()).optional(),

draft: z.boolean().optional().default(false),

}),

});

export const collections = { blog };

// In einer Seite: src/pages/blog/[...slug].astro

---

import { getCollection } from 'astro:content';

// Alle Blogposts abrufen

export async function getStaticPaths() {

const posts = await getCollection('blog');

return posts.map(post => ({

params: { slug: post.slug },

}));

}

const { post } = Astro.props;

---

<h1>{ post.data.title }</h1>

{ <Content /> }

</article>

Tipp: Content Collections bieten automatische Typensicherheit und IntelliSense in Ihrem Editor – ideal für große Inhaltsmengen wie Blogs oder Dokumentationen.

Integrationen – Erweiterungen für Astro

@astrojs/react · @astrojs/vue · @astrojs/tailwind

// astro.config.mjs import { defineConfig } from 'astro/config'; import react from '@astrojs/react'; import tailwind from '@astrojs/tailwind'; export default defineConfig({ integrations: [react(), tailwind()], });

Integrationen erweitern Astro um Unterstützung für andere Frameworks, CSS-Tools, Sitemaps, Bildoptimierung und mehr.

Beliebte Integrationen

Integration	Beschreibung
@astrojs/react	React-Komponenten in Astro verwenden
@astrojs/vue	Vue-Komponenten in Astro verwenden
@astrojs/svelte	Svelte-Komponenten in Astro verwenden
@astrojs/tailwind	Tailwind CSS-Unterstützung
@astrojs/sitemap	Automatische Sitemap-Generierung
@astrojs/mdx	MDX-Unterstützung (Markdown + JSX)
@astrojs/partytown	Partytown für Drittanbieter-Skripte
@astrojs/image	Bildoptimierung (veraltet, siehe astro:assets)

Beispiele

// astro.config.mjs

import { defineConfig } from 'astro/config';

// React-Integration

import react from '@astrojs/react';

// Sitemap-Integration

import sitemap from '@astrojs/sitemap';

// Tailwind CSS

import tailwind from '@astrojs/tailwind';

// MDX für erweiterte Markdown-Inhalte

import mdx from '@astrojs/mdx';

export default defineConfig({

site: 'https://example.com',

integrations: [

react(),

tailwind(),

sitemap(),

mdx(),

});

---

import Counter from '../components/Counter.jsx';

---

Tipp: Astro-Integrationen sind "opt-in" – Sie fügen nur die Funktionen hinzu, die Sie tatsächlich benötigen. Das hält das Bundle klein und die Build-Zeiten kurz.

Astro im Überblick

.astro Astro-Komponente
Frontmatter + HTML + CSS

client:* Inseln-Direktiven
load, idle, visible, media

output Rendering-Modus
static, server, hybrid

src/content Content Collections
Blog, Dokumentation

<slot /> Layout-Slots
Mehrere Inhaltsbereiche

@astrojs/* Integrationen
React, Vue, Tailwind

Quick Summary

.astro

Komponenten

client:load

Inseln

output

Rendering

<slot />

Layouts

collections

Content

@astrojs/*

Integrationen

const { title } = Astro.props; · <Counter client:load /> · export const prerender = true