ArticleHeadless mit NextJS & GatsbyJS: 9 wichtige Vorteile für dein Business
Was wir uns ansehen werden
Der Begriff „Headless" macht schon seit einer Weile von sich reden. Aber einen Schritt zurück – was bedeutet „Headless" eigentlich? Und warum ist alle Welt so begeistert davon?
In diesem Guide bekommst du einen klaren Überblick. Du wirst verstehen, was „Headless" wirklich bedeutet, und wir tauchen tief in die Vorteile ein, die es mit sich bringt. Von mehr Flexibilität und besserer Performance bis hin zu einem vereinfachten Content-Management schauen wir uns an, wie „Headless" dein Business verändern kann. Natürlich sprechen wir auch über mögliche Herausforderungen und wie du mit ihnen umgehst.
Warum du das wissen solltest
Headless ist für manche ein Mythos und für andere eine Offenbarung. Klar ist aber, dass du besser zur zweiten Gruppe gehören solltest.
Warum? Weil Headless viele der wichtigsten Kennzahlen für dich und deine Kunden verbessern kann – und weil der Wettbewerb immer intensiver wird:
Während traditionelle Großhändler online gehen und globale Handelsriesen wie\nWalmart ihre E-Commerce-Initiativen ausbauen, verschärft sich der digitale\nWettbewerb. Ebenso konkurrieren Wettbewerber in Produktkategorien, die\ntraditionell online nicht gefragt waren, um E-Commerce-Käufer.\n
Shopify
The Future of Ecommerce Report 2021
Du musst kein Experte werden, aber es ist für dich von Vorteil zu verstehen, welche Auswirkungen ein Wechsel zum richtigen Headless-Stack auf dein Business oder das deines Wettbewerbers haben kann.
61 % der befragten Händler nutzen bereits eine Headless-Commerce-Architektur oder planen deren Einführung im Jahr 2020.\n
Yottaa
2020 Ecommerce Leaders Survey
Was bedeutet „Headless"?
„Headless" bedeutet die Trennung von Frontend (dem „Kopf" und der visuellen Benutzeroberfläche) und Backend (dem „Körper" und der Logik) deines Shops.
Diese Entkopplung erlaubt dir, Technologien für das Frontend deines Shops zu wählen, die erhebliche Geschäftsvorteile mit sich bringen können.
Warum sind alle so begeistert davon?
Die Vor- und Nachteile hängen natürlich davon ab, welche Technologien du für dein Frontend wählst. In diesem Guide schauen wir uns eine bestimmte Kombination an, über die alle sprechen: den JAM-Stack oder genauer gesagt Frameworks wie Gatsby & NextJS. Lass uns in die Vorteile eintauchen.
1. Sie sind schnell. Wirklich schnell.
Performance ist wichtig – und wenn eine Seite langsam ist, schadet das deinem Umsatz. Das verstehen die meisten. Was sie meistens nicht verstehen, ist, wie wichtig es wirklich ist. Google und Deloitte haben dazu eine Studie veröffentlicht. Der Titel? „Milliseconds Make Millions." Ein kleiner Vorgeschmack: Eine Verbesserung der Ladezeit um 0,1 Sekunden kann zu 8 % mehr Conversions führen.
Kombiniere das mit der Tatsache, dass 50 % der Kunden eine Website verlassen, wenn sie länger als 3 Sekunden zum Laden braucht – und 20 % davon nie zurückkehren.
Bei Performance geht es um die Verbesserung von Conversions.\n\nNutzer zu halten ist entscheidend für die Verbesserung von Conversions. Langsame Seiten wirken sich negativ auf den Umsatz aus, und schnelle Seiten steigern nachweislich die Conversion-Rate.\n\nBei Mobify führte jede Verkürzung der Homepage-Ladezeit um 100 ms zu einer Steigerung der sitzungsbasierten Conversion um 1,11 %, was einem durchschnittlichen jährlichen Umsatzanstieg von fast 380.000 $ entsprach. Zusätzlich führte eine Verkürzung der Checkout-Ladezeit um 100 ms zu einer Steigerung der sitzungsbasierten Conversion um 1,55 %, was wiederum einen durchschnittlichen jährlichen Umsatzanstieg von fast 530.000 $ ergab.\n\nAls AutoAnything die Ladezeit halbierte, verzeichneten sie einen Umsatzanstieg von 12 % bis 13 %.\n\nDer Händler Furniture Village analysierte seine Seitengeschwindigkeit und entwickelte einen Plan zur Behebung der gefundenen Probleme, was zu einer 20%igen Verkürzung der Ladezeit und einer 10%igen Steigerung der Conversion-Rate führte.
Why Speed Matters
Die Frontends, die mit Gatsby und Next erstellt werden, heben Performance auf ein völlig neues Level. Die erzeugten Seiten sind vorberechnet bzw. vorgerendert, aber trotzdem interaktiv und lebendig (du befindest dich gerade auf einer Seite, die mit Gatsby erstellt wurde). Das bedeutet, dass so viel Arbeit wie möglich im Voraus erledigt wird, damit der Browser des Nutzers das nicht mehr tun muss.
Diese statischen Seiten werden über globale Content Delivery Networks (CDNs) an den Nutzer ausgeliefert. Egal ob du in Frankfurt oder Hongkong bist – du bekommst die schnellstmögliche Verbindung. Du betreibst keinen Server wie bei WordPress, der nur in einem einzigen Land steht und von dem Verbindungen langsam und weit entfernt sein können. Mit einem CDN wird deine Seite weltweit verteilt, und weil die Seite statisch ist und keine Serverberechnungen nötig sind, lädt sie auf dem Gerät des Nutzers viel schneller. Verlinkte Seiten werden auch vorab geladen, wenn der Nutzer darauf klicken könnte. So können Seiten mit hinzugefügtem JavaScript plötzlich schneller sein als reines HTML ohne dieses JavaScript.
Other fashion brands benchmarking against Victoria Beckham Beauty want to understand how it's so much faster.
Ryan Foster
at Fostr for Victoria Beckham Beauty
Hier ist ein Video, das StriVectins Headless-Shopify-Storefront mit Gatsby mit ihrem früheren Shop auf Magento vergleicht:
Die Verlagerung hin zu Mobile macht Speed noch wichtiger. Im Jahr 2014 lag die Aufteilung noch bei 70 % Desktop und 30 % Mobile. Im Jahr 2021 hatte sich das Verhältnis bereits auf 47 % Desktop und 53 % Mobile verschoben.
Das ist bedeutsam, weil mobile Nutzer viel häufiger mit langsamen Internetverbindungen konfrontiert sind – ihre Geduld aber die gleiche bleibt.
Quelle: Milliseconds Make Millions - Google & Deloitte
Die Wahrscheinlichkeit eines Absprungs steigt auch drastisch mit jeder Sekunde, die zur Ladezeit hinzukommt:
Competing on customer experience also requires a lightning-fast mobile experience, with 50% of global ecommerce sales happening on mobile devices. Even prior to COVID-19, mobile commerce accounted for 92% ecommerce growth. Research indicates 53% of consumers will abandon a site that takes longer than three seconds to load on mobile. Worse yet, mobile bounce rates are consistently higher than desktop.\n
Shopify
The Future of Commerce Report 2021
Quelle: Google/SOASTA Research 2017
We're seeing this rapid shift and it's not just ecommerce. It's everything. Our consumers are demanding speed and efficiency, no matter what you're doing.\n
Margo Hays
Principal of Digital Strategy, TSG
Als wäre das nicht genug, hat Google Performance zu einem noch wichtigeren Ranking-Faktor gemacht, was ihre Bedeutung weiter erhöht hat.
2. Sie sind großartig für SEO
Wie bereits erwähnt sind Gatsby- & Next-Seiten statisch bzw. serverseitig gerendert. Das bedeutet, ihr Inhalt ist problemlos crawlbar – kombiniert mit ihrer hohen Geschwindigkeit bedeutet das, dass Suchmaschinen sie lieben werden.
Im Mai 2021 machte Google die Core Web Vitals zu einem zentralen Bestandteil seiner Ranking-Signale. Zusätzlich zum Mobile-First-Indexing bedeutet das, dass Performance nicht nur durch das Nutzerverhalten deine Einnahmen beeinflusst, sondern auch bestimmt, wie sichtbar dein Business und all deine Inhalte in der Öffentlichkeit sind.
3. Sie sind sicher
Weil die generierten Seiten statisch sind und weltweit über ein CDN ausgeliefert werden, sind keine Server beteiligt, die ein Backend betreiben. Das bedeutet, die Seite ist ein (dennoch sehr dynamischer) Betonklotz. Du kannst sie nicht hacken, weil es schlicht nichts zu hacken gibt. Automatisierte Malware hat keine Chance.
Das ist nicht mit traditionellen Setups wie WordPress & WooCommerce vergleichbar.
Mathias Biilmann, CEO von Netlify (einem namhaften Cloud-Computing-Unternehmen aus San Francisco), hat das wiederkehrende Thema der Sicherheitsprobleme bei klassischen Websites treffend auf den Punkt gebracht:
At Netlify we get around 60 million requests every month starting with 'wp-admin' even though you can not put a WordPress site on Netlify. And it's just from crawlers and automated malware looking for holes in WordPress and automatically infecting. I think by now it is save to say, that if you take any normal WordPress site with a few plugins, you put it on a host and then you don't update it, the time it will take from when you put it live until something bad happens to it is probably down to 11 days or something like that.
Mathias Biilmann
CEO and co-founder of Netlify
4. Flexibilität
Der erste Reiz von Drag-&-Drop-Page-Buildern, Templates und fertigen Website-Designs ist schwer zu widerstehen – sie versprechen einen nahtlosen und mühelosen Einstieg. Dieser Charme kann jedoch schnell verblassen, wenn unerwartete Komplikationen auftauchen. Die anfangs geringe Investition in Zeit und Geld sieht schon ganz anders aus, wenn man auf unvorhergesehene Probleme stößt. Die Bequemlichkeit dieser Tools kann sich in Frustration verwandeln und dich mit komplexen Problemen zurücklassen, die sich nicht so leicht lösen lassen.
In solchen Momenten findest du dich gefangen innerhalb der Grenzen einer eingeschränkten Benutzeroberfläche. Die auftauchenden Hürden können sich als gewaltig und kostspielig erweisen. Deine Fähigkeit zur Anpassung und Innovation wird gehemmt – und zwar genau durch die Tools, die eigentlich deine Rettung sein sollten. Die Bequemlichkeit, die einst so verlockend war, wird ironischerweise zum Hindernis für deinen Fortschritt.
Wenn du ein maßgeschneidertes Frontend mit Gatsby oder Next nutzt – beide basieren auf React, der weitverbreiteten JavaScript-Bibliothek – öffnest du die Tür zu nahezu grenzenlosen Möglichkeiten. Das macht sie zu ausgezeichneten Optionen für Unternehmer, die die Langlebigkeit ihrer Plattform sicherstellen wollen.
Du kannst auch ein externes Content Management System wie Sanity.io, Prismic oder Contentful einsetzen, um alle Inhalte deiner Website zu verwalten. Diese zusätzliche Flexibilität ist fantastisch, weil sie dir erlaubt, das am besten geeignete System für deine spezifischen Bedürfnisse und Ziele zu wählen. Dasselbe CMS könnte auch verwendet werden, um eine Android- oder iOS-App mit Daten zu versorgen – und falls du die Grenzen eines bestimmten Anbieters jemals überschreiten solltest, ist ein Wechsel zu einem neuen problemlos möglich.
Ein Headless-Ansatz gibt Unternehmen mehr Kontrolle darüber, wie Kunden einkaufen, und vermeidet die Abhängigkeit von starren Drag-&-Drop-Systemen.
Because eCommerce is constantly changing as the technologies around us evolve, retailers must be agile to adapt their strategies — not as a response, but as a forethought. We work with brands all over the world, and the top initiatives we are currently seeing include headless commerce, mobile, and personalization.
Bridget Fahrlandhead
Digital Strategy, Astound Commerce
5. Niedrige Hosting- und Wartungskosten
Was würdest du dazu sagen, deine monatlichen Serverkosten von mehreren Tausend Dollar zu halbieren? Der europäische Shopping-Center-Marktführer Klépierre hat genau das getan. „Wir haben erkannt: Mit einem Jamstack-Ansatz kann man die Hosting-Kosten halbieren", sagte Jonathan Bobo, CTO des damaligen Unternehmens Proximity (heute RAPP), das Klépierre dabei geholfen hat, diese Ergebnisse zu erzielen.
Außerdem ist Serverwartung mit den damit verbundenen Kosten kein Thema mehr – und du musst dir keine Sorgen machen, dass ein Mitarbeiter oder ein Praktikant deine Datenbank beschädigt.
6. Sie sind zukunftssicher
Gatsby verwendet React, das mit Abstand meistgenutzte JavaScript-Framework, was seine beeindruckende Download-Zahl von 20 Millionen pro Woche eindrücklich belegt. Darüber hinaus nimmt JavaScript eine dominante Stellung als wichtigste Programmiersprache für das Web ein und ist weltweit unglaublich verbreitet. Das bedeutet, dass du stets Zugang zu Entwicklern haben wirst, Probleme lösen und deine Plattform weiterentwickeln kannst, wann immer du es möchtest.
7. Sie skalieren unbegrenzt
Früher hätte man sich womöglich Sorgen gemacht, dass eine Kampagne „zu" erfolgreich wird. Bei einem traditionellen Server-Setup könnte eine sehr erfolgreiche Instagram-Kampagne zu einem plötzlichen Besucheransturm führen und deinen Server zum Absturz bringen. Mit einer serverlosen Architektur ist diese Sorge jedoch Geschichte. Du kannst jetzt einen Super-Bowl-Werbespot schalten, ohne dir über Traffic-Spitzen Gedanken machen zu müssen. Früher musste das ganze Team in Bereitschaft stehen, um die Situation zu bewältigen – das ist nicht mehr nötig.
Traffic spiked immediately after the Super Bowl ad aired, and we saw a high number of simultaneous uses. I remember watching and seeing we had 3,000 simultaneous users, then 10,000, then a few seconds later it was 15,000 — and we just didn't have to worry. Because we built with Gatsby, we knew we had the performance to handle the traffic without even thinking about it.\n
Andrew Smith
Application Architect, Little Caesars
Ein globales CDN von Anbietern wie Netlify kümmert sich kaum darum, wie viel Traffic du bekommst. Das Netzwerk bewältigt es. Es gibt keinen einzelnen Server, der zu schwach sein könnte.
8. Sie helfen dir, der Konkurrenz einen Schritt voraus zu sein
NextJS und GatsbyJS bieten einen klaren Wettbewerbsvorteil durch ihre Fähigkeiten zur Verbesserung von Website-Performance, User Experience, SEO und Conversion-Rate. Diese Frameworks ermöglichen es dir, Websites zu erstellen, die schneller laden – was zu niedrigeren Absprungraten und mehr Nutzerinteraktion führt. Die verbesserte User Experience führt zu höherer Kundenzufriedenheit und stärkerer Markenbindung. Außerdem sorgen sie für bessere Sichtbarkeit in Suchmaschinen, was mehr organischen Traffic anzieht. Durch diese kombinierten Vorteile erzielen Unternehmen höhere Conversion-Rates, treiben Umsatzwachstum voran und verbessern ihre Wettbewerbsposition im Markt.
9. Sie verbessern dein Ergebnis und erweitern deine Margen
Die oben genannten Punkte summieren sich und beeinflussen klar die wichtigsten Ziele: deine unternehmerischen Ziele und dein Endergebnis. Höhere Performance bedeutet höhere Conversions – und das bedeutet, dass du mit demselben Traffic mehr verdienst. Was wiederum höheres Wachstum und mehr Möglichkeiten in allen anderen Bereichen deines Business bedeutet.
Solltest du auf Headless umsteigen?
In ein maßgeschneidertes Frontend zu investieren bietet einen klaren Return on Investment, besonders wenn man bedenkt, wie wichtig deine Online-Präsenz für deinen Umsatz ist. Das richtige Timing spielt jedoch eine Rolle. Wenn dein Business gerade erst startet und das Budget knapp ist, ist es vielleicht noch nicht der richtige Moment. Aber Headless zu gehen und die Kontrolle über deine User Experience zu übernehmen ist ein kluger Schritt für Unternehmer, die hoch hinaus wollen, schneller wachsen und auf Top-Level konkurrieren möchten. Wenn das nach dir klingt, könnte Headless genau das sein, was du brauchst.