Nå snakker alle om Payload CMS. Andor tror han vet hvorfor

I løpet av kort tid har Payload seilet opp som en stor utfordrer til etablerte headless CMS-er som Sanity og Contentful. Utvikler Andor Davoti er ikke overrasket.

Payload CMS har i løpet av kort tid økt kraftig i popularitet. Andor Davoti synes ikke det er det minste rart. 📸: payloadcms.com / Privat
Payload CMS har i løpet av kort tid økt kraftig i popularitet. Andor Davoti synes ikke det er det minste rart. 📸: payloadcms.com / Privat Vis mer

I løpet av bare to år har Payload CMS fått mer enn 23.000 stjerner på GitHub, og det "hodeløse" CMS-et blir stadig oftere trukket frem som et seriøst alternativ til langt mer etablerte headless CMS-er som Sanity og Contentful.

Payload ble lansert i første versjon i 2021, men populariteten begynte virkelig å skyte fart da det ble åpen kildekode året etter. Det betyr at det er mulig å bruke det helt gratis hvis du hoster det selv, eventuelt betale for en hostet versjon.

Payload CMS kaller seg "det raskest voksende open source headless-CMS-et". På to år har prosjektet fått mer enn 23.000 stjerner på GitHub. 📸: Star-history.com
Payload CMS kaller seg "det raskest voksende open source headless-CMS-et". På to år har prosjektet fått mer enn 23.000 stjerner på GitHub. 📸: Star-history.com Vis mer

Nå kommer også versjon 3.0, som skal gjøre det enkelt å installere Payload CMS i en hvilken som helst Next.js-app – side om side med frontenden. Litt som du allerede kan gjøre med Sanity Studio.

Andor Davoti har jobbet som utvikler siden 2018, og driver som selvstendig konsulent. Selv oppdaget han Payload i forbindelse med at han skulle lage appen Fast Rhymes – som kode24 tidligere har skrevet om. Payload er nemlig det underliggende CMS-et for appen.

Vi ba Andor om å hjelpe oss med å finne ut hva all hypen rundt Payload CMS egentlig handler om:

Andor, hvordan skiller Payload seg fra andre headless CMS-er?

Payload skiller seg ut i det at det er mye mer fleksibelt enn konkurrentene. Du kan utvide Payload til å gjøre det du trenger, istedenfor å bygge "hacky" løsninger med CMS-er som ikke er bygget til å kunne utvides til å løse behovet ditt.

Payload er også helt open-source, så kan du hoste det selv hvis du vil, helt gratis.

Med dette er du da ikke bundet til leverandøren i lik grad som du er med for eksempel Sanity. Med Sanity er du bundet til deres closed-source Content Lake, men med Payload kan du velge å bruke MongoDB eller PostgreSQL.

«Payload er også helt open-source, så kan du hoste det selv hvis du vil, helt gratis.»

Hva egner Payload seg best til?

Den egner seg til alt man hadde brukt Sanity eller lignende headless CMS-er til og mye mer. Dette inkluderer innhold til en landingsside, blog, produkter for en nettbutikk, og så videre.

Som sagt så er Payload laget for å kunne utvides, så du kan bygge hva enn du føler for som gir mening. Dette kan for eksempel være interne adminverktøy som sender pushvarsler til brukerne dine, slik at du har historikk og oversikt. Eller en feedback-tjeneste som gjør det enkelt for teamet å få oversikt over brukerfeedback på ett sted, med alt annet admin man styrer med for applikasjonen.

Et annet eksempel er å integrere analytics-data i Payload-dashboardet slik at du har ett dashboard for alt du trenger.

For Wordpress-veteraner som ikke er altfor tekniske så vil nok Payload være et steg utenfor komfortsonen. Payload-teamet har som mål at de skal kunne være et enkelt alternativ til Wordpress i fremtiden, og de har allerede noen videoer på YouTube om hvordan man kan gå frem. Men dette er nok mer “coming soon”.

Versjon 3.0 er rett rundt hjørnet – hva er nytt?

I versjon 3.0 så er Payload generelt mer "streamlined". Det er enklere å utvide UI-et til å få det som du vil med at de har bygget et komponentbibliotek rundt UI-komponentene til Payload.

Det store er at det nå blir tett integrert med Next.js. Payload vil kjøre som en vanlig Next.js-app eller som del av en annen Next.js-app.

Har du en Next.js app fra før så kan du med en npx-kommando installere Payload så den kjører som en del av samme app.

Her kan du se hvordan det gjøres:

I versjon 2 kjørte Payload på en express-server og med en separat React-frontend. Dette gjorde det vanskeligere å hoste selv, siden det måtte være på en dedikert server. Nå kan det enkelt deployes til for eksempel Vercel.

Hva har du selv brukt Payload til?

Selv har jeg brukt Payload til å administrere innhold til låtskriverappen min Fast Rhymes. Her kan jeg enkelt legge til nye produsenter, laste opp nye beats og annet innhold appen trenger.

I dag kjører Payload på en VPS i Koyeb, endepunktene frontes med Next.js API routes som kjører på edge og cacher response fra Payload.

Slik ser Andors eget Payload-dashbord ut for Fast Rhymes-appen.
Slik ser Andors eget Payload-dashbord ut for Fast Rhymes-appen. Vis mer

Jeg har valgt MongoDB som database, som kjører på MongoDB Atlas helt gratis siden trafikken er avlastet med edge cache. Alle filer hostes på BunnyCDN som er tett integrert med Payload. Cachen invalideres automatisk med en hook fra Payload når data oppdateres der. Dette resulterer i en responstid på under 100 ms for appen, uavhengig av fysisk lokasjon, noe som er viktig mtp at brukerne er spredt rundt i hele verden.

Dette oppsettet blir nok veldig forenklet når jeg får oppgradert til Payload 3.0 om ikke lenge. Da slipper jeg å hoste Payload på Koyeb VPS-en da det blir kjørt inn i den eksisterende Next.js-appen som hostes på Vercel. Det sparer meg for både kompleksitet og kostnader.

Du har selv erfaring med andre løsninger som Sanity. Hva er Payloads styrker?

Jeg er mye større fan av hvordan man strukturer skjemaene i Payload, sammenlignet med Sanity.

Ting er enklere å sette opp og krever mindre spesifikk forståelse og knoting enn Sanity. Du slipper å lære deg Groq, da alt er Rest, GraphQL eller Payload sitt lokale API i Next.js-appen. Du kan også velge mellom å bruke to etablerte databaser, MongoDB og PostgreSQL, mens hos Sanity er du låst til deres egen Content Lake som er closed source og ikke kan self hostes.

Payload er også helt open-source, som gjør at du kan bruke det helt gratis om du hoster det selv. Sanity sin prising har gjort det til et lite gunstig alternativt for mange use caser.

Hvordan kommer jeg i gang med Payload?

De har en fantastisk bra YouTube kanal med mye bra innhold. Der har de gode videoer på hvordan du for eksempel kan migrere fra andre CMSer som Contenful og Wordpress. Men du kommer veldig langt ved å bare lese dokumentasjonen.

Jeg hadde nok heller sjekka ut 3.0-betaen enn 2.0 akkurat nå, da det er mye enklere å få opp, spesielt hvis man har noe erfaring med Next.js.

Payload 3.0 skal være ute av beta i slutten av september.

Er det andre ting leserne bør vite om Payload?

Jeg nevnte tidligere at jeg benytter meg av edge cache i Next.js for lynrask responstid og avlastning av trafikk for databasen. Dette er per i dag gjort manuelt, med at jeg benytter meg av cache tags i Next.js som invalideres av Payload hooks når dataen for spesifikke collections oppdateres.

Det jobbes med et cache API innebygd i Payload som automatisk og granulert invaliderer sider og data dersom du bygger Payload og et Next-prosjekt sammen. Dette arbeidet ble satt i gang av Sanna Jammeh, en tidligere kollega og god kompis, som introduserte meg til Payload.

Det lander trolig etter 3.0, og blir et stort "selling point" for Payload!