Nå som Nuxt 3 og Craft CMS 5 er ute, tenkte jeg det var et godt tidspunkt å gå gjennom Jamstacken vår.
Hva er Jamstack?
Kort forklart er det nettsider som bygges med JavaScript, API-er og Markup uten en dedikert server. Med en typisk PHP-nettside så behandles all data på serveren før det sendes til brukeren. På en Jamstack-side er alt innholdet og logikken på forhånd pakket sammen i JavaScript og HTML (også kjent som en bundle), så man trenger ingen server (med unntak).
Fordelen er at man kutter et kritisk ledd som gjør at siden laster raskere og er mer stabil. Hastigheten kommer delvis av at man ikke er avhengig av å prosessere data for hver sidevisning, men også fordi bunt-en kan distribueres med en CDN, som gir:
- Redundans
- Lastbalansering
- Redusert lastetid
- Skalerbarhet
Driftsmessig er også CDN-er helt utmerket, da man slipper å konfigurere og vedlikeholde enda et system. Kontrasten mellom å laste opp et par MB og drifte et Kubernetes-cluster er mildt sagt stor.
Nuxt
Nuxt er et Vue rammeverk som kommer med mye snacks ut av boksen og støtter statisk sidegenerering (SSG). Måten det fungerer på er at vi bygger malene og komponentene, for deretter å mate dem med innholdet når siden genereres. Da bakes alt inn i bunt-en og siden krever ingen server for å fungere.
Innholdet leveres av Craft CMS med det innebygde GraphQL-API-et.
Craft CMS
Craft er et typisk PHP CMS der man kan logge seg inn i et kontrollpanel, gjøre endringer, redigere innhold, håndtere bilder osv. Vi bruker det for å styre innholdet. Selv om Craft er et veldig typisk PHP CMS, så har det en del funksjoner som gjør det utmerket for vårt bruk:
Headless mode
Med en innstilling i Craft kan man slå av frontenden og bruke det som et «Headless CMS» som er beregnet for bruk i Jamstack.
GraphQL
For de som ikke har vært borti GraphQL før, så er det et alternativ til REST. I stedet for å lage egne endepunkter og bygge et API, så ber man heller om spesifikke data fra de egendefinerte datamodellene i Craft:
entry(section: "pages", slug: "/om-oss"){
title
content
uri
}
Det fine med Craft sin GraphQL-implementasjon er at siden Craft allerede har dataene strukturert, så genereres hele API-et og dokumentasjonen automatisk!
Søk
Craft kommer med en egen søkemotor som er tilgjengelig gjennom GraphQL-API-et. For å sette den opp velger man bare hvilke felt som skal indekseres, også fikser Craft resten. Indeksen oppdateres automatisk ved innholdsendringer.
API integrasjoner
Innhenting av data fra eksterne kilder støttes gjennom first-party-pluginet «Feed me». Det fungerer ved at man definerer en eller flere feeds med endepunkter, regler, paginering og kartlegging av felt opp mot datastrukturer i Craft. Vi bruker det blant annet som en proxy for åpningstider fra Google Places og systematisering av data fra API-er, slik at det kan bakes inn i innholdet av redaktørene.