BayWa r.e. Corporate Website: Multi-Site-Plattform mit Nuxt, Storyblok und Cloudflare

1: Multi-Site- und Multi-Domain-Architektur

Eine der zentralen Herausforderungen bestand darin, viele unterschiedliche Länder- und Markenauftritte in einer gemeinsamen Plattform abzubilden. Die Lösung war eine skalierbare Multi-Site-Architektur, in der verschiedene Domains, Sprachräume, Inhalte und Umgebungen über eine einheitliche Codebasis gesteuert werden.

Eine zentrale Site-Konfiguration definiert dabei unter anderem, welche Domain zu welcher Site gehört, welche Sprachen aktiv sind, welche Storyblok-Ordner als Content-Quellen dienen und welche Routing-Logiken je Website gelten. Dadurch lassen sich sowohl globale als auch länderspezifische Anforderungen innerhalb eines konsistenten Systems abbilden.

Alle produktiven Domains werden in einer gemeinsamen Worker-Konfiguration zusammengefasst und über einen einzigen Cloudflare Worker ausgeliefert:

 {
  "name": "baywa-re-nuxt-storyblok-production-main",
  "main": ".output/server/index.mjs",
  "routes": [
    { "pattern": "www.baywa-re.com", "custom_domain": true },
    { "pattern": "www.baywa-re.de", "custom_domain": true },
    { "pattern": "www.baywa-re.fr", "custom_domain": true },
    { "pattern": "www.baywa-re.es", "custom_domain": true },
    { "pattern": "careers.baywa-re.com", "custom_domain": true },
    { "pattern": "sedgeby-solar.co.uk", "custom_domain": true }
  ],
  "kv_namespaces": [
    { "binding": "cacheBaywaRe", "id": "..." }
  ]
}

JSON

Dieser Aufbau macht sichtbar, wie mehrere Länderauftritte und Webpräsenzen in einer gemeinsamen Infrastruktur zusammengeführt wurden. Für BayWa r.e. bedeutet das: weniger technischer Pflegeaufwand, eine konsistente Betriebsbasis und gleichzeitig genug Flexibilität für regionale Unterschiede.

3: Edge Deployment und intelligentes Performance-Konzept

Um weltweit schnelle Ladezeiten und eine stabile Auslieferung sicherzustellen, wurde die Plattform auf Cloudflare Workers als Edge-Runtime bereitgestellt. Die Anwendung läuft damit nicht auf einem klassischen zentralen Server, sondern wird nahe an den Nutzerinnen und Nutzern ausgeliefert. Das verbessert die Performance insbesondere bei internationalem Traffic deutlich.

Ein zentrales Element der Architektur ist dabei das intelligente Edge-Caching. Über ein mehrstufiges Cache-Konzept werden Seiteninhalte abhängig vom jeweiligen Content-Typ unterschiedlich lange zwischengespeichert. So können etwa häufig wechselnde Inhalte wie News mit kürzeren Laufzeiten versehen werden, während statischere Seitentypen deutlich länger gecacht werden.

Die technische Umsetzung erfolgt direkt über die Cloudflare Cache API. Im Response-Schritt werden Inhalte mit dynamischen Laufzeiten und Cache-Tags versehen:

nitroApp.hooks.hook('afterResponse', async (event) => {
  const ttlMap = {
    news: 1800,
    careers: 1800,
    events: 3600,
    default: 86400
  }

  const headers = new Headers({
    'Content-Type': 'text/html',
    'Cache-Control': `public, s-maxage=${ttl}, stale-while-revalidate=86400`,
    'Cache-Tag': `storyId-${storyId}`
  })

  event.context.cloudflare.context.waitUntil(
    cache.put(cacheKey, new Response(body, { headers }))
  )
})

TypeScript

Die Logik dahinter: Inhalte werden nicht pauschal zwischengespeichert, sondern abhängig von ihrer Aktualität und Relevanz. Durch stale-while-revalidate bleibt die Plattform schnell erreichbar, während Änderungen im Hintergrund aktualisiert werden. Über Cache-Tags können einzelne Inhalte gezielt invalidiert werden, ohne den gesamten Cache zu leeren.

5: Formulare und Systemintegrationen

Ein wesentlicher Bestandteil der Plattform ist die flexible Integration von Formularen und angeschlossenen Drittsystemen. Dafür wurde ein eigenes Formular-Modul auf Nuxt-Basis entwickelt, das direkt mit Storyblok verbunden ist und Formulare strukturiert aus dem CMS heraus steuerbar macht.

Formularfelder, Validierungen, Bedingungen und Folgeprozesse lassen sich dadurch zentral konfigurieren.

Auch komplexere Anforderungen wie mehrstufige Formulare, bedingte Feldanzeigen oder unterschiedliche Ausgabepfade konnten auf diese Weise umgesetzt werden.

Besonders relevant ist dabei die Finisher-Architektur: Nach dem Absenden eines Formulars können verschiedene Prozesse automatisiert angestoßen werden – etwa der Versand von E-Mails, die Übergabe an Salesforce, die Anbindung von Evalanche oder die Weiterverarbeitung in anderen Systemen.

Für BayWa r.e. bedeutet das: Formulare sind nicht nur Eingabemasken auf der Website, sondern Teil einer durchgängigen digitalen Prozesskette.