Swiss AquaticsDie Website des Schweizer Schwimmverbands – WordPress im Hintergrund, Next.js davor, mit eigener API und mehrstufigem Schutz
Swiss Aquatics ist der nationale Dachverband für Schwimmen, Artistic Swimming, Diving, Water Polo und Open Water in der Schweiz. Auf swiss-aquatics.ch liegen mehr als 4000 Seiten in Deutsch und Französisch – Verbandsinformationen, News, Agenda, Ausbildung, ein Shop und ein Mitgliederbereich. Bisher lieferte WordPress die Website mit einem klassischen Theme aus. Für den Relaunch bleibt WordPress das vertraute Redaktionssystem: Das Theme haben wir durch ein eigenständiges Headless-Frontend mit Next.js ersetzt und dafür die API-Endpunkte sowie mehrere Sicherheitsebenen aufgebaut.
Die Startseite führt über einen Slider zu den Sportarten und zur Ausbildung, zeigt die nächsten Termine und aktuelle News mit Kategoriefilter. Die Suche liefert schon beim Tippen gruppierte Treffer aus Seiten, News, Agenda und Shop. Der Sprachwechsel führt direkt auf die übersetzte Seite, im Shop führen Warenkorb und mobiloptimierter Checkout zur Online-Zahlung, Mitglieder haben einen eigenen Login samt Konto. Adressen der alten Website werden weitergeleitet, Analyse-Dienste laden erst nach Einwilligung.
Hinter der Oberfläche bleibt WordPress mit WooCommerce Redaktions-, Medien- und Shop-Backend. Für das Frontend haben wir eigene API-Endpunkte entwickelt, die Navigation, Seiten, News, Agenda, Suche, Shop und Formulare pro Sprache als fertig aufbereitete Daten liefern; die Suche läuft über einen eigenen Index. Öffentliche Seiten werden vorgerendert und aus dem CDN ausgeliefert. Speichert die Redaktion einen Inhalt, meldet WordPress genau diese Änderung ans Frontend, und nur die betroffenen Seiten werden neu aufgebaut. Preise, Rabatte und Formulare bleiben unter der Kontrolle von WordPress: Das Frontend zeigt an, der Server rechnet und validiert.
Technisch basiert die Website auf Next.js, React, TypeScript und Tailwind CSS und wird über Vercel ausgeliefert; das WordPress-Backend läuft gehärtet auf AWS in Zürich, mit Redis als Zwischenspeicher. Die Absicherung ist in Schichten aufgebaut: Zugangsdaten zum Backend bleiben auf dem Server, Eingaben werden validiert, CMS-Inhalte vor der Ausgabe bereinigt, Formulare gegen Spam geschützt, und Daten aus Konto und Bestellungen landen in keinem gemeinsamen Cache. Dazu kommen Zugriffsschutz für die Verwaltung, Rate-Limits und eine automatische Abwehr von Brute-Force- und Scan-Angriffen. Der Betrieb wird mit Alarmen überwacht und täglich kontrolliert, verschlüsselte Datensicherungen mit geprobter Wiederherstellung gehören dazu.
