Astro Components rendern – überall
Astro-Komponenten außerhalb klassischer Seiten rendern – als HTMX-Fragment, E-Mail-Template, OG-Card oder CMS-Block. Zero-Config, Multi-Channel.
GitHubAstro-Komponenten außerhalb klassischer Seiten rendern – als HTMX-Fragment, E-Mail-Template, OG-Card oder CMS-Block. Zero-Config, Multi-Channel.
npm install @casoon/fragment-rendererWas ist @casoon/fragment-renderer?
Eine Runtime, die Astro-Komponenten außerhalb klassischer Astro-Pages zugänglich macht. Rendering-Ergebnis ist immer ein HTML-String oder ein Response-Objekt — kein Build-System, kein Dev-Server nötig.
Der Einstieg ist createAstroRuntime(). Wer mehr braucht, ergänzt Registry, Services oder Presets — schrittweise, ohne den Rest zu ändern.
Wann brauchst du das?
Astro-Komponenten rendern ohne laufenden Astro-Server — in Workers, Pipelines und E-Mail-Systemen.
HTMX-Fragmente
Server-seitig generierte HTML-Ausschnitte für HTMX-Antworten. Kein Full-Page-Reload, keine clientseitige Hydration.
E-Mail-Templates
Astro-Komponenten als E-Mail-HTML rendern – mit Layout-Support und Provider-Presets für Resend und SendGrid.
OG-Card-Generierung
Social-Preview-Karten als HTML rendern und anschließend in ein Bild konvertieren — ohne separaten Screenshot-Service.
CMS-Block-Rendering
Headless-CMS-Blöcke mit typisiertem Block-Registry rendern – Inhalte kommen aus dem CMS, Komponenten aus Astro.
Quick Start
import { createAstroRuntime } from '@casoon/fragment-renderer';
import Banner from './Banner.astro';
const runtime = createAstroRuntime();
// Als HTML-String rendern
const html = await runtime.renderComponent(Banner, { title: 'Hallo Welt' });
// Als Response (z.B. für Cloudflare Worker)
const response = await runtime.renderToResponse(Banner, { title: 'Hallo Welt' }); Presets
Vorkonfigurierte Bundles für häufige Use Cases – einsatzbereit ohne weitere Konfiguration.
AHA-Stack Preset
Astro + HTMX + Alpine.js. Enthält HTMX-Helfer, Response-Header und Locale-Kontext. Sofort einsatzbereit für partielle Seitenaktualisierungen.
E-Mail Preset
E-Mail-optimiertes Rendering mit Provider-Presets. `renderEmail()` gibt HTML und Subject zurück – kompatibel mit Resend, SendGrid und anderen.
CMS Preset
Headless-CMS-Integration mit typisiertem Block-Registry. Blöcke werden per ID registriert und in Sequenz gerendert.
Adapters
Passende Integration für jede Laufzeitumgebung – Node.js, Edge und CLI.
Node.js
HTTP-Request/Response-Integration für Express, Hono, Fastify und andere Node.js-Server.
Cloudflare Workers
Edge-Rendering mit Worker-Bindings. Direkte Integration in den Worker-Fetch-Handler.
Vercel Edge / Serverless
Kompatibel mit Vercel Edge Functions und Serverless Functions. Gleiches API, anderer Laufzeit.
CLI
Kommandozeilen-Rendering für statische Pipelines, Generierungsskripte und CI-Prozesse.
AHA-Stack Preset im Detail
import { ahaStackPreset } from '@casoon/fragment-renderer/presets/aha-stack';
const runtime = createAstroRuntime(ahaStackPreset({ locale: 'de' }));
const htmx = await runtime.getService('htmx');
// HTMX-spezifische Response-Header setzen
const headers = htmx.getResponseHeaders({ trigger: 'cartUpdated' }); Designprinzipien
Einfach starten, schrittweise erweitern — ohne Overhead für das, was nicht gebraucht wird.
Zero-Config
Direkt nach der Installation nutzbar. Kein Konfigurationsschalter, kein Mode-Switching — `createAstroRuntime()` reicht.
Progressive Erweiterbarkeit
Registry, Services, Presets — nur verwenden was gebraucht wird. Kein Overhead für Projekte, die es nicht brauchen.
Astro-nativ
Kein eigener Build-Prozess, keine erzwungenen Abstraktionen. Astro bleibt Astro — die Runtime wrapp nur die Container API.
Im Einsatz: Rechenkiste-Projekt
fragment-renderer wurde im Kontext des AHA-Stacks entwickelt und in der Rechenkiste-App produktiv eingesetzt. Der Artikel beschreibt, wie HTMX-Partials mit Astro-Komponenten als Fragments gerendert werden.
Im CASOON-Ökosystem
fragment-renderer ist Teil einer Werkzeugkette aus Open-Source-Plugins – alle MIT-lizenziert, alle auf Astro ausgerichtet.
@casoon/astro-structured-data
Schema.org-Komponenten für Astro – Article, FAQ, Product, Breadcrumb und mehr. Für SEO auf gerenderten Seiten.
@casoon/astro-post-audit
Prüft Canonical, Headings, Meta-Tags, JSON-LD und Accessibility direkt beim Build.
@casoon/astro-site-files
Erzeugt robots.txt, sitemap.xml mit i18n-hreflang, llms.txt und security.txt.
Häufige Fragen
Was ist der Unterschied zu normalen Astro API-Endpunkten?
Astro API-Endpunkte brauchen den Astro-Page-Kontext und einen laufenden Dev- oder Production-Server. fragment-renderer arbeitet außerhalb dieses Kontexts – in einem Cloudflare Worker, einer E-Mail-Pipeline oder einem CLI-Skript, ohne Astro-Build-Prozess.
Welche Astro-Versionen werden unterstützt?
Astro >= 4.0.0 als Peer Dependency. Die Runtime nutzt die stabile Astro Container API, die seit Astro 4 verfügbar ist.
Funktioniert das mit Cloudflare Workers?
Ja. Der Cloudflare-Adapter (`@casoon/fragment-renderer/adapters/cloudflare`) integriert sich direkt in den Worker-Fetch-Handler. Das AHA-Stack-Preset ist speziell auf diesen Use Case ausgerichtet.
Kann ich mehrere Komponenten-Typen parallel verwalten?
Ja, über die Component Registry. Komponenten werden per ID registriert und können dann beliebig oft mit verschiedenen Props gerendert werden – ohne erneuten Import.
Ist das Paket kostenlos?
@casoon/fragment-renderer ist unter der MIT-Lizenz veröffentlicht und vollständig Open Source.