Energie Schweiz - Gatsby to Astro Migration
★ FeaturedMigration der öffentlichen, dreisprachigen (DE/FR/IT) Plattform EnergieSchweiz (Bundesamt für Energie) von Gatsby auf Astro - evolutionär statt Neubau. URLs, SEO und Suche bleiben erhalten; der Go-live ist ausfallzeitfrei und rückrollbar.
Technische Herausforderungen
- Live-Bundesplattform in drei Sprachen umbauen - ohne Ausfallzeit, ohne sichtbare Änderung
- Alle URLs übernehmen und SEO schützen (~500 Weiterleitungen pro Sprache)
- Querverweise über zwei getrennte Content-Systeme intakt halten - inklusive zirkulärer Verweise
- Suche neu bauen: immer aktuelle Treffer, keine Altlasten
- Performance und Barrierefreiheit mindestens auf dem Niveau der alten Website
Lösungen
Ich prüfte die bestehende Architektur, behielt Bewährtes und ersetzte nur, was der Framework-Wechsel verlangte. Kern war eine schnelle statische Website mit Redaktions-Vorschau plus eine Routing-Schicht, die identische URLs über alle drei Sprachen garantiert. Den Absicherungsaufwand richtete ich am Risiko aus: Proof of Concept, produktionsidentische Vorstufen und eine rückrollbare Umschaltung mit dem Altsystem als Fallback.
Ergebnisse
- Erfolgreicher, ausfallzeitfreier und rückrollbarer Go-live am 27.07.2026
- Alle URLs 1:1 übernommen (~500 pro Sprache, DE/FR/IT); Rankings geschützt
- Schnelle statische Website mit Live-Redaktionsvorschau
- Suche stets aktuell und nachvollziehbar korrekt
- Performance und Barrierefreiheit gegen die alte Website abgesichert
- Schlankere, klar strukturierte Codebasis
Projektkontext & Ziele
EnergieSchweiz ist die offizielle Informationsplattform des Bundesamts für Energie (BFE) für Bürger und Unternehmen. Sie wird in drei Sprachen (Deutsch, Französisch und Italienisch) betrieben. Die Migration von Gatsby auf Astro wurde als evolutionärer technologischer Austausch konzipiert. Die Hauptziele waren: vollständige Beibehaltung der URL-Strukturen, Absicherung aller SEO-Rankings, Modernisierung der Suche (Algolia) und eine signifikante Steigerung der Ladezeiten – alles ohne sichtbare Veränderungen für die Benutzer.
Architektur & Monorepo-Struktur
Um eine saubere Modularität und Code-Hygiene zu gewährleisten, wurde das Projekt als modernes Monorepo strukturiert:
- Statisches Website-Frontend (Astro/React): Die Präsentationsschicht, welche React-Komponenten als interaktive, hydrierte Islands einbindet.
- Contentful-Datalayer (LevelDB): Eine Datenzugriffsschicht, die Contentful-Inhalte bei Builds in lokale LevelDB-Dateien synchronisiert und typsicheren Lesezugriff ohne API-Limits ermöglicht.
- Custom Content-Routing: Ein entkoppeltes Paket für die hierarchische Pfadgenerierung und Auflösung zirkulärer Querverweise.
Wichtige Architekturentscheidungen (ADRs)
- ADR-001 (LevelDB Caching): Zur Umgehung von API-Limits wird vor dem Build ein Cache-Abgleich mit Contentful durchgeführt. Die Astro-Builds lesen die Daten direkt aus einer lokalen LevelDB-Datenbank.
- ADR-003 (Datenschranke): Datenzugriffe erfolgen ausschließlich im Frontmatter der Astro-Seiten. React-Komponenten verhalten sich pur und erhalten Daten rein über Props (keine API-Abfragen im Client).
- ADR-005 (Lokalisierung): Auf interaktiven React-Islands wird
react-intlfür die Übersetzungen verwendet. - ADR-006 (Styles Cache): Emotion-Styling wird über Babel geladen. Hydrierte React-Komponenten werden in einen
<CacheProvider>gehüllt, um SSR/CSR-Hash-Differenzen und Layout-Flackern zu vermeiden.
URL-Routing & Suche
Das Nachbilden des komplexen Routings aus Gatsby erforderte eine präzise Umsetzung. Seiten unter der Hauptmarke / dem Hauptportal
werden direkt unter / ausgespielt, während kampagnenspezifische Seiten hierarchisch unter dynamischen Pfaden wie /{programme|programmes|programmi}/{campaignSlug}/...
abgebildet sind.
Die Suche wurde mit Algolia-Indexern direkt in die CI/CD-Pipeline integriert, wodurch sichergestellt wird, dass nur freigegebene, aktuelle Inhalte durchsuchbar sind.