E-Commerce mit Astro – Warum statische Shops schneller verkaufen

Das Problem traditioneller E-Commerce-Plattformen

Die meisten Online-Shops setzen auf schwere Plattformen wie Shopify, WooCommerce oder Magento. Diese Systeme liefern bei jedem Seitenaufruf hunderte Kilobytes an JavaScript aus – selbst für eine einfache Produktseite.

Das Ergebnis:

• Ladezeiten von 4–8 Sekunden auf mobilen Geräten
• Schlechte Core Web Vitals
• Hohe Absprungrate (53 % bei über 3 Sekunden Ladezeit laut Google)
• Niedrigere Conversion Rates

Jede Sekunde zusätzliche Ladezeit reduziert die Conversion Rate um durchschnittlich 7 %.

Astro als E-Commerce-Framework

Astro verfolgt einen radikal anderen Ansatz: Ship less JavaScript. Produktseiten werden als statisches HTML vorgerendert und laden in Millisekunden. Interaktive Elemente wie Warenkorb oder Produktfilter werden als isolierte „Islands” nur dort eingesetzt, wo sie gebraucht werden.

Architektur eines Astro-basierten Shops

src/
├── data/
│   └── products/          # Produktdaten als JSON/Markdown
├── pages/
│   ├── shop/
│   │   ├── [...page].astro     # Produktlisting mit Pagination
│   │   └── [slug].astro        # Einzelne Produktseite
│   └── warenkorb.astro
├── components/
│   ├── ProductCard.astro       # Statische Produktkarte
│   ├── AddToCart.tsx            # React Island (interaktiv)
│   └── ProductFilter.tsx       # React Island (interaktiv)
└── lib/
    └── cart.ts                 # Warenkorb-Logik (Client-Side)

Islands Architecture in der Praxis

Das Prinzip ist einfach: Statisch wo möglich, interaktiv wo nötig.

• Produktbilder, Beschreibungen, Preise → Statisches HTML (Zero JS)
• „In den Warenkorb”-Button → React/Preact Island mit client:visible
• Produktfilter → React/Preact Island mit client:load
• Bewertungen → Statisch gerendert, JS nur für das Absenden

---
// Produktseite – fast komplett statisches HTML
import ProductGallery from '../components/ProductGallery.astro';
import AddToCart from '../components/AddToCart.tsx';

const { product } = Astro.props;
---

<ProductGallery images={product.images} />
<h1>{product.name}</h1>
<p class="price">{product.price} €</p>

<!-- Nur dieser Button benötigt JavaScript -->
<AddToCart client:visible productId={product.id} />

Performance-Vergleich

Hier ein realer Vergleich zwischen einem klassischen Shopify-Shop und einem Astro-basierten Shop mit identischem Design:

Metrik	Shopify	Astro
LCP	3,8s	0,9s
INP	380ms	45ms
CLS	0,24	0,01
JS-Bundle	487 KB	23 KB
PageSpeed Score	42	98
Time to Interactive	6,2s	1,1s

SEO-Vorteile für E-Commerce

Astro-basierte Shops haben massive SEO-Vorteile:

1. Perfekte Core Web Vitals

Wie oben gezeigt – statische Seiten liefern konsistent grüne Werte. Google belohnt das mit besseren Rankings.

2. Strukturierte Produktdaten

Mit Astro lassen sich Schema.org-Daten nahtlos integrieren:

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Premium Sneaker",
  "description": "Handgefertigte Sneaker aus nachhaltigem Material",
  "offers": {
    "@type": "Offer",
    "price": "149.00",
    "priceCurrency": "EUR",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "127"
  }
}

3. Statische Sitemaps

Astro generiert automatisch XML-Sitemaps für alle Produktseiten – perfekt für die Indexierung.

4. Pre-Rendering für Crawlability

Im Gegensatz zu SPA-Shops (React, Vue) ist der gesamte Inhalt als echtes HTML verfügbar. Keine JavaScript-Rendering-Abhängigkeit für Suchmaschinenbot.

Payment-Integration

Astro arbeitet nahtlos mit headless Payment-Anbietern:

• Stripe – Checkout Sessions via API-Routes
• Snipcart – Drop-in E-Commerce mit wenigen HTML-Attributen
• Shopify Storefront API – Headless-Anbindung an bestehende Shops
• Medusa – Open-Source Alternative zu Shopify

Beispiel: Stripe Checkout

// src/pages/api/checkout.ts
export async function POST({ request }) {
  const { items } = await request.json();

  const session = await stripe.checkout.sessions.create({
    mode: "payment",
    line_items: items,
    success_url: `${origin}/bestellung/erfolgreich/`,
    cancel_url: `${origin}/warenkorb/`,
  });

  return Response.json({ url: session.url });
}

Wann Astro die richtige Wahl ist

Astro eignet sich besonders für:

• Katalog-Shops mit vielen Produktseiten (100–10.000+)
• Content-Commerce – Shops, die Storytelling mit Produkten verbinden
• Landing Pages für einzelne Produkte oder Kampagnen
• B2B-Shops mit komplexen Produktbeschreibungen
• Digitale Produkte – Downloads, Kurse, Templates

Weniger geeignet für:

• Hochdynamische Marktplätze mit Echtzeit-Inventar
• Shops mit extrem komplexer Warenkorb-Logik (Konfiguratoren)

Fazit

E-Commerce mit Astro ist ein Game-Changer. Die Kombination aus blitzschnellen Ladezeiten, perfekter SEO und moderner Entwicklererfahrung führt zu messbaren Verbesserungen bei Conversion Rate und Umsatz. Wer einen Shop baut, der gefunden werden und verkaufen soll, findet in Astro das ideale Framework.