Darum ist Craft Headless die Webseiten-Lösung unserer Wahl für preisbewusste KMU-Kunden

Ob Craft oder Storyblok, hauptsache headless

In den letzten Jahren haben wir unsere Webseiten-Projekte ausschliesslich mit dem Content Management System “Craft” umgesetzt. Dieses bietet maximale Flexibilität bei guter Performance. Bestehende Kunden sind sehr zufrieden mit der intuitiven CMS-Oberfläche und fühlen sich schnell zuhause: Die Benutzerfreundlichkeit mit Live-Vorschau der Inhalte und die einfache Content-Pflege mittels des klar strukturierten Editors sucht in der CMS-Welt seinesgleichen.

Standartmässig unterstützt Craft einen monolithischen Ansatz, bei dem durch Twig Templates serverseitig HTML generiert wird. Die Zukunft der Frontend-Webentwicklung zeichnet sich aber durch den Einsatz dynamischer Webapplikationen anstelle statischer Webseiten aus, die mithilfe moderner und unabhängiger JavaScript-Frameworks entwickelt werden. Für uns war daher klar, dass wir uns in Richtung Headless-CMS positionieren werden, um nicht mehr von der standartmässigen PHP-basierten Craft Frontend-Technologie abhängig zu sein. In diesem Kontext bedeutet "Headless", dass Craft ausschliesslich als Backend zur Contentverwaltung dient, wodurch man bei der Auswahl der Frontend-Technologie vollständige Freiheit geniesst

Unsere grösseren Projekte setzen wir daher seit 2023 mit dem CMS von Storyblok in Kombination mit Nuxt um, da Server-Side-Rendering zusammen mit dem Headless-Ansatz klare Vorteile in Performance, SEO und User Experience aufweisen. Für eine einfachere KMU-Webseite wie jene der Praxis Molteni stehen aber die CMS-Kosten in keinem Verhältnis zum tatsächlichen Nutzen. Darum haben wir uns entschieden, für solche kleineren Projekte auf Craft Headless zu setzen.

Aufgrund unserer umfangreichen Erfahrung und Expertise mit Nuxt in bestehenden Storyblok-Projekten war die Entscheidung klar, Nuxt auch für Craft zu nutzen. Diese Wahl ermöglicht uns eine flexible Einsatzplanung der Mitarbeitenden und den effizienten Einsatz von internem Wissen.

Technische Details und Herausforderungen

Speziell an unserer technischen Umsetzung ist die Schnittstelle zwischen Front- und Backend. Dazu haben wir keine klassische REST API benutzt sondern GraphQL Queries. Der Vorteil dabei ist, dass man die Queries manuell zusammensetzen kann und somit immer nur genau die Datensätze abfragen und empfangen kann, welche für den spezifischen Fall benötigt werden. Anstatt mühsam verschiedene APIs aufzurufen und Daten zusammenzuführen, ermöglicht GraphQL die nahtlose Abfrage aller benötigten Informationen von nur einem einzigen Endpunkt.

Eine wesentliche Herausforderung dieses Leuchtturm-Projektes war das Deployment: Die Trennung von Craft Backend und der Nuxt-App erforderte eine sorgfältige Koordination. Es musste sichergestellt werden, dass die beiden getrennten Applikationen sicher und schnell miteinander kommunizieren können.

Zudem stellte die Integration des CSRF-Tokens in den Formular-Header eine komplexe Aufgabe dar, welche eine individuelle Lösung erforderte. Dies wäre im headful Ansatz automatisch von der Twig Template Engine übernommen worden. Ganz generell bietet eine Entkopplung von CMS und Frontend grössere Flexibilität, es bedeutet aber auch, dass man vermehrt auf custom made code und individuelle Lösungen setzen muss.

Ausblick

Die Vorteile dieses Ansatzes für bestehende und zukünftige Kunden sind deutlich: Günstiger als andere CMS-Anbieter, kombiniert mit einer superschnellen, SEO-optimierten Webseite und einem intuitiven Content Management System. Nach dieser erfolgreichen Umsetzung der Praxis Molteni-Webseite ist für uns klar, dass wir weiterhin für kleinere und mittlere Webentwicklungs-Projekte auf die Kombination Craft/Nuxt setzen werden.