Technologie & Realisierung

Case Study: Rügen.reisen

Wie eine moderne Headless-Architektur mit Contao 5 und Next.js in Verbindung mit der Destination Solutions (DS) API eine der schnellsten Plattformen für Ferienunterkünfte auf Rügen schafft.

> 4.000
Aktive Unterkünfte
SSG/SSR
Hybrid-Next.js
WebP/AVIF
Bildoptimierung
90+
PageSpeed Core Vitals

Die Architektur: Headless & High-Performance

Next.js Frontend

Als Frontend-Framework kommt Next.js (App Router) auf Basis von React 19 zum Einsatz. Durch die Kombination von Static Site Generation (SSG) für statische Seiten und Server-Side Rendering (SSR) für dynamische Verfügbarkeitsabfragen lädt das Portal extrem schnell und ist optimal für Suchmaschinen (SEO) indizierbar.

Contao 5 als Headless-CMS

Das Content-Management-System Contao 5 fungiert als reines Headless-Backend. Über eine maßgeschneiderte REST-API-Schnittstelle liefert Contao redaktionelle Inhalte, strukturierte Ortsbeschreibungen und verknüpfte Meta-Daten sicher und in Echtzeit an das Next.js-Frontend.

DS API Schnittstelle

Die Anbindung der Destination Solutions (DS) API verwaltet über 4.000 Ferienunterkünfte und Einheiten. Ein automatisierter Symfony-Command synchronisiert in regelmäßigen Intervallen Preise, Belegungsdaten und Stammdaten direkt in die lokale Backend-Datenbank für blitzschnelle Filterung.

Herausforderung: DS API Bilderflut

Mit über 4.000 Ferienunterkünften fallen Zehntausende Bilddateien von der DS API an. Die Einbindung direkt über externe Server führt zu signifikanten PageSpeed-Nachteilen, da externe Server meist keine optimalen Cache-Header liefern und Bilder für Kachelansichten oft in unkomprimierten Riesenformaten übertragen werden.

Die technische Lösung:

  • Format-Optimierung: In Übersichten wird gezielt das optimierte _sm bzw. _l Format geladen, statt unkomprimierte Originale anzufragen.
  • On-Demand Caching Proxy: Alle externen DS-Bilder werden über einen Next.js Image-Proxy geschleust. Dieser fügt einen Cache-Control Header für 1 Jahr hinzu, womit Browser die Bilder dauerhaft lokal vorhalten.

Ladezeit & PageSpeed-Optimierungen

Um Core Web Vitals von unter 2 Sekunden zu erzielen, wurden tiefgehende Performance-Strategien auf Code-Ebene umgesetzt:

  • Lazy Loading für JS-Bloat: Nicht-kritischer JavaScript-Code wie das Cookie-Banner wird über Dynamic Imports mit ssr: false erst nach dem initialen Rendering geladen.
  • Preconnect & Preload: Wichtige DNS-Verbindungen werden bereits vorab aufgebaut. Das LCP Hero-Bild der Homepage wird explizit im Header mit Priorität vorab geladen.
  • Prefetch-Management: Die automatische Next.js Link-Vorabladung für datenintensive Routen (wie /unterkuenfte) wurde deaktiviert, um massiven Datentransfer beim Hovern zu verhindern.

Realisierung & Dienstleister

Webinteger

Lead Agency & Webentwicklung

Die vollständige technische Konzeption, die Entwicklung des Next.js Frontends, die Schnittstellenprogrammierung zur Headless Contao 5 API sowie die gesamte Performance- und PageSpeed-Optimierung wurden durch Webinteger Webentwicklung realisiert.

webinteger.dev besuchen

Rügen Web Design

Support & Designunterstützung

Die Umsetzung erfolgte mit der gestalterischen und lokalen Unterstützung durch Rügen Web Design, die wertvollen Input zur Strukturierung der Urlaubsregionen lieferte.

ruegen-web-design.de besuchen