Headless Shopify met Hydrogen: wanneer het loont

Headless wordt aanbevolen om redenen die geen stand houden bij nader onderzoek, vooral snelheid en een algemeen gevoel dat het moderner is. Beide zijn zwakke redenen, en ze volgen levert dure projecten op die uiteindelijk langzamer zijn dan het thema dat ze vervingen.

De architectuur is oprecht waardevol in specifieke omstandigheden. Dit artikel probeert die precies te benoemen, en is even precies over de kosten, die stelselmatig worden onderschat.

Wat headless echt verandert

U stopt met het gebruiken van de themalaag van Shopify. Shopify blijft uw backend, producten, voorraad, orders, checkout, en u bouwt de storefront zelf, met bevragingen op de Storefront API.

Hydrogen is het React-framework van Shopify hiervoor, meestal gehost op Oxygen. Het neemt een deel van het infrastructuurwerk weg dat oudere headless-bouwsels duur maakte, en het is de ondersteunde route.

Wat u wint, is volledige controle over de front end. Wat u verliest, is alles wat de themalaag voor u deed, en die lijst is langer dan de meeste projecten vooraf inschatten.

Snelheid is niet de reden

De meest gehoorde rechtvaardiging, en de zwakste.

Headless maakt een storefront niet snel. Het verhoogt het prestatieplafond, omdat u precies bepaalt wat laadt en wanneer. Dat plafond bereiken vraagt discipline die veel projecten niet volhouden.

Ondertussen is een zware React-storefront die een groot JavaScript-bundel verzendt ruim langzamer dan een goed gebouwd Liquid-thema, vooral op de middenklasse mobiele toestellen die het meeste commerce-verkeer voor hun rekening nemen.

De eerlijke vergelijking is niet headless tegenover een langzaam thema. Het is headless tegenover een goed geoptimaliseerd thema waarvan onnodige apps zijn verwijderd, en de meeste webshops die headless overwegen voor snelheid hebben dat goedkopere werk nog niet gedaan. Dat doen herstelt meestal het grootste deel van de beschikbare winst tegen een fractie van de kosten, zoals besproken in Shopify theme vs custom.

De gevallen waarin het echt loont

Vier, en ze hebben gemeen dat een thema het ding helemaal niet kan.

Een front-end-ervaring die thema's niet kunnen uitdrukken. Een echt ongebruikelijke interactie, een configurator, een sterk afwijkend navigatiemodel. Niet "we willen het op maat" (thema's kunnen prima op maat), maar interactie die het themamodel structureel niet ondersteunt.

Eén front end over meerdere backends. Shopify voor commerce, een apart CMS voor redactionele content, andere systemen daarnaast, gepresenteerd als één ervaring. Dit is een sterk argument, en een dat thema-gebaseerde webshops onhandig afhandelen.

Bestaande React-kennis en zin om die te gebruiken. Een team dat al React-applicaties bouwt en onderhoudt, neemt veel minder nieuw risico dan een team dat dat niet doet. Andersom: headless als eerste React-project oppakken is twee problemen tegelijk aannemen.

Contentrijke commerce. Waar redactie en commerce echt door elkaar lopen en de balans richting redactie neigt, kan een maatwerk front end over beide bronnen schoner zijn dan het in een commercethema forceren.

De kosten die worden onderschat

Storefront-apps stoppen met werken. De grootste. Apps die in de webshop worden getoond, leunen op theme app extensions, die een maatwerk front end niet heeft. Reviews, upsells, videowidgets, aanbiedingsmeldingen: functionaliteit die u nu krijgt door iets te installeren, wordt functionaliteit die u bouwt en onderhoudt. Inventariseer uw storefront-apps voordat u zich vastlegt; de lijst is meestal langer dan verwacht.

Ondernemers verliezen de thema-editor. Welke contentbewerking uw team ook doet, het wordt iets dat u bouwt, via metafields, metaobjecten of een apart CMS. Slaat u dit over, dan wordt elke tekstwijziging een ticket voor de ontwikkelaar, precies het knelpunt dat de meeste teams proberen te ontlopen.

U bezit de front end voor altijd. Framework-upgrades, onderhoud van dependencies, browsercompatibiliteit en toegankelijkheid worden allemaal uw verantwoordelijkheid. Een thema krijgt updates van de maker; uw storefront krijgt alleen wat u er zelf in stopt.

De eigen front-end-verbeteringen van Shopify komen niet meer aan. Platformwerk aan thema's en storefrontprestaties bereikt een maatwerk front end niet. Over meerdere jaren stapelt dit zich stilletjes op, en het is onzichtbaar op het moment dat u de beslissing neemt.

Hydrogen versus het zelf bouwen

Gaat u headless op Shopify, dan is Hydrogen de logische standaardkeuze. Het is het ondersteunde framework van Shopify, het handelt de Storefront API-integratie idiomatisch af, en Oxygen neemt hostingbeslissingen weg.

Zelf iets bouwen met een ander framework is verdedigbaar bij specifieke eisen die Hydrogen niet goed dient, of bestaande infrastructuur die u uitbreidt in plaats van vervangt. Het betekent dat meer van het integratiewerk voor u is, en minder van het ecosysteem van toepassing is.

Voor de meeste teams is de vraag niet welk framework, maar of headless überhaupt de juiste route is. Is die vraag positief beantwoord, dan is Hydrogen meestal het antwoord op de tweede vraag.

Wat wel en niet verandert aan de checkout

Een veelvoorkomend misverstand dat het waard is recht te zetten: headless gaan betekent niet dat u uw eigen checkout bouwt.

De checkout blijft van Shopify. Uw maatwerkstorefront regelt browsen, productpagina's en winkelwagen, en draagt daarna over aan de Shopify checkout voor betaling. Dat is bewust en het is goed: checkout is het risicovolste onderdeel van elke webshop, brengt verplichtingen rond betalingscompliance met zich mee, en Shopify verbetert het doorlopend.

Drie gevolgen. Checkout Extensibility blijft van toepassing. UI-extensies, Functions voor korting- en verzendlogica, en branding via de admin werken allemaal op dezelfde manier. Uw investering daarin gaat niet verloren als de storefront verandert, zoals beschreven in Checkout Extensibility.

De overdracht is een ontwerpprobleem. Een klant die van uw maatwerkstorefront naar de Shopify checkout gaat, steekt een visuele grens over. Brandinginstellingen verkleinen de kloof maar heffen die niet op, en een schokkerige overgang op het moment van betalen kost conversie. Plan dit overgangspunt.

De status van de winkelwagen moet de overgang overleven. Dit is gewoon werk in plaats van moeilijk werk, maar het is wel werk, en het is een plek waar headless-bouwsels subtiele bugs oplopen, een korting die op de storefront is toegepast maar niet meegaat, of een winkelwagen die leeg is bij terugkeer.

De migratie zelf plannen

Beslist u dat headless de juiste keuze is, dan brengt de migratie risico's met zich mee die niets met de architectuur te maken hebben en alles met het in één keer vervangen van een hele front end.

URL's mogen niet veranderen. Elke product-, collectie- en content-URL zou zich precies moeten oplossen als voorheen. Dit is het grootste SEO-risico van het project en volledig te vermijden, zoals uitgebreider besproken in migreren zonder SEO-verlies voor het geval van een volledige platformwissel.

Structured data moet opnieuw worden opgebouwd. Uw thema stuurde product-schema mee. Uw maatwerkstorefront stuurt wat u zelf schrijft, en het is makkelijk om zonder de lucht in te gaan en het maandenlang niet te merken.

Server-side rendering is geen keuze. Content die alleen in de browser wordt gerenderd, is content die sommige crawlers en agents niet betrouwbaar zien. Hydrogen rendert standaard server-side; het risico zit in wat er later aan wordt toegevoegd.

Laat de twee parallel draaien als het kan. Eerst een subset templates migreren, of de nieuwe storefront op een staging-domein met echte data laten draaien, brengt problemen naar boven terwijl de oude webshop klanten nog steeds bedient.

Een goedkopere tussenweg

De moeite waard om te kennen vóór u zich vastlegt, want het vervult een groot deel van de motivatie tegen een fractie van de kosten.

Moderne Shopify-thema's zijn aanzienlijk flexibeler dan de reputatie doet vermoeden, en het blokgebaseerde systeem van Horizon met geneste samenstelling heeft dat verder verbreed. Een goed gebouwd maatwerkthema kan de meeste ontwerpen uitdrukken, en het behoudt app-compatibiliteit, de thema-editor en platformverbeteringen.

Voor de meeste webshops waarvan de motivatie ontwerpcontrole is, is een maatwerkthema het juiste antwoord. Headless is voor wanneer de beperking structureel is in plaats van esthetisch.

Een nuttige test vóór u zich in een van beide richtingen vastlegt: laat een ontwerper de storefront ontwerpen die u echt wilt, en vraag daarna een ervaren Shopify-ontwikkelaar of een thema dat kan bouwen. Is het antwoord ja met wat maatwerk, wat meestal het geval is, dan heeft u uw antwoord, en heeft u dat vóór het uitgeven van het budget in plaats van erna.

Wat het kost, en wanneer u hulp inschakelt

Een headless project op Hydrogen begint bij $5.000 volgens de gepubliceerde prijzen op de dienstenpagina headless Shopify van ByteInfy, en loopt op tot $25.000 of meer met een eigen contentmodel, multi-market en koppelingen. Dit bedrag komt bovenop, niet in plaats van, de posten uit wat een webshop echt kost, waar headless de hoogste categorie is, niet het gebruikelijke startpunt.

Vraag voordat u een offerte aanvraagt of het bureau u de kaderende vraag heeft gesteld, en niet gewoon de brief heeft aangenomen zoals die is. De vragen om aan elk bureau te stellen, inclusief over precies deze beslissing, staan in een Shopify bureau kiezen.