Headless CMS: därför bygger vi i Payload

Ett headless CMS brukar säljas in på hur snabb webbplatsen blir för besökaren. Den som ska uppdatera webbplatsen varje vecka märker mindre av det, och desto mer av ett adminverktyg som har byggts i efterhand, med de fält utvecklaren behövde snarare än de redaktören behöver. Det är där ett CMS visar vad det är värt.

Vi har byggt webbplatser i WordPress i många år och har parallellt arbetat med headless-tekniker som Next.js och headless WordPress. Under tiden har vi jämfört nya system med de traditionella – WordPress, Drupal och Optimizely – utifrån två frågor: hur snabb blir webbplatsen för besökaren, och hur är det att arbeta i den varje dag. Payload är det system som har svarat bäst på båda, och i dag bygger vi både pigment.se och kunders webbplatser i det.

Kort: vad är ett headless CMS?

Ett headless CMS är ett system för innehåll där redaktörens verktyg och webbplatsen som besökaren ser är skilda åt. Innehållet hämtas via ett API (ett gränssnitt där program hämtar data från varandra), och själva webbplatsen byggs med en teknik som Next.js. Eftersom webbplatsen inte behöver fråga databasen vid varje sidvisning kan den visa innehåll från cache och byta sida utan att ladda om allt, och det är därifrån snabbheten kommer.

Varför räcker det inte att webbplatsen är snabb?

Snabbheten har länge gått att bygga med nästan vilken headless-teknik som helst, med färdiga kodpaket att utgå från. Det svåra kommer efter lanseringen, när redaktörerna ska publicera nyheter, byta bilder och bygga nya landningssidor. Är adminverktyget byggt kring datamodellen snarare än kring deras arbete blir varje sådan ändring en beställning till byrån, och då har snabbheten för besökaren betalats med långsamhet i organisationen.

För oss väger därför tre saker i adminverktyget lika tungt som prestandan: att redaktören kan bygga sidor själv av färdiga block, förhandsgranska exakt det som kommer att publiceras och hantera bilder och språk utan att be om hjälp. Saknas någon av dem blir verktyget snabbt för alla utom den som använder det mest.

Vad gör Payload annorlunda?

Payload är ett CMS med öppen källkod, skrivet i TypeScript, som sedan version 3 installeras direkt i samma Next.js-applikation som webbplatsen. Admin och webbplats delar därför kod och datamodell, så en ändring i hur innehållet är uppbyggt slår igenom på båda ställena samtidigt. Det är också därför förhandsgranskningen blir rättvis: redaktören ser sidan med samma kod som besökaren kommer att se, medan hen skriver.

Datamodellen – vilka sidtyper, fält och block som finns – skrivs som konfiguration i kod i stället för att klickas ihop i ett gränssnitt. Den versionshanteras och granskas därmed som resten av projektet, och mycket av det som i äldre system kräver egen kod, som språkhantering, bildbeskärning och behörigheter, sköts med inställningar. Utvecklarens tid går då till det som är specifikt för kunden: integrationer, flöden och den logik som stödjer verksamheten.

För redaktören ser det bekant ut. Den som har arbetat i WordPress känner igen listan med sidor, formuläret för varje sida och blocken som läggs i ordning, men här är varje block och fält byggt för just den webbplatsen, så det finns inga inställningar som redaktören behöver lära sig att låta bli. Bilder beskärs utifrån en fokuspunkt som redaktören sätter, så att motivet hamnar rätt i alla format, och varje sparning blir en version som går att jämföra med och återställa.

Hur har det fungerat i praktiken?

Ett exempel är fuzed.com, en flerspråkig webbplats med mycket innehåll och höga krav på prestanda och mediehantering. Vi kunde sätta upp en första version tidigt, låta kunden ge synpunkter på något som faktiskt fungerade och sedan justera innehållsmodell och design i samma takt. Kunden bygger nya sidor med nya kombinationer av block direkt i admin, så att flytta en knapp eller lägga till ett avsnitt kräver ingen utvecklare.

Pigment.se är byggd i Payload på samma sätt. Där har vi också byggt ett eget tillägg som översätter en svensk text till engelska när den sparas, vilket visar en annan sida av systemet: det som saknas går att bygga in i admin, i stället för att läggas i ett separat verktyg bredvid.

När är Payload inte rätt val?

Payload förutsätter att någon utvecklare äger innehållsmodellen, eftersom nya blocktyper och fält skrivs i kod. Den som vill installera ett färdigt tema och lägga till funktioner med tillägg på egen hand har mer nytta av WordPress och dess stora utbud av tillägg. Samma sak gäller en liten webbplats med ett fåtal sidor, där vinsten i prestanda sällan väger upp kostnaden för att utveckla och drifta en skräddarsydd lösning.

Vad händer om företaget bakom försvinner?

Det är en rimlig fråga om ett system som är relativt nytt. Payload är öppen källkod under MIT-licens, som tillåter att koden används, ändras och vidareutvecklas fritt, så koden finns kvar oavsett vad som händer med företaget. Sedan juni 2025 ägs Payload av Figma. Det har gett projektet en ägare med resurser, men det gör det också värt att följa om Payload behåller samma prioritet som fristående CMS när kopplingen till Figma växer.

Själva systemet är gratis att installera och köra på egen server. Det som kostar är hosting och utveckling, på samma sätt som med WordPress.