JAMstack: SEO-vennlige og lynraske nettsteder

For å oppnå bedre ytelse har utviklere måttet se på forskjellige måter og verktøy som sammen kunne øke hastigheten og samtidig opprettholde et høyt sikkerhetsnivå. Tradisjonelle og dynamiske CMS-baserte nettsteder har en ulempe med at data må hentes fra en database eller lignende for å levere ut innhold på nettsidene. Bruk av såkalt reverse-proxyer og cache ("hurtiglager"), slik som nginx og Varnish, har vært mulige måter å øke ytelsen på. Men nå finnes det en "new kid on the block", nemlig JAMstack-baserte nettsteder.

Hva er JAMstack?

Det offisielle JAMstack-nettstedet definerer begrepet som:

"En moderne arkitektur - Lag raske og sikre nettsteder og dynamiske apper med JavaScript, API-er og forhåndsdefinert Markup, servert uten webservere."

JAMstack, som arkitektur-konsept, ble skapt av Mathias Biilmann Christensen, medstifter av Netlify - et raskt voksende Cloud Computing-selskap som tilbyr hosting og serverløse backend-tjenester for statiske nettsteder. Det kan brukes til å bygge statiske nettsteder som er betydelig raskere og mer stabile enn dynamiske, men som likevel er dynamisk i den forstand at websidene oppdateres når det publiseres nytt innhold eller kildekoden endrer seg. JAMstack er altså ikke et spesifikt verktøy, men et økosystem som gjør det effektivt å opprette lynraske nettsteder.

Hva står JAMstack for?

JAM står for "Javascript", "APIs" og "Markup": 

• Javascript håndterer alle deler av nettstedet som skal være dynamisk når nettsidene først er lastet. Moderne front-end rammeverk som VueJS, React eller Angular passer godt til å bruke til dette.
• API'er kreves fordi en JAMstack app/nettsted ikke har server. Det betyr at det ikke nødvendigvis behøves noe egenutviklet "backend"-kode i denne arkitekturen. Utviklere kan i sin helhet fokusere på å implementere front-end logikk. Har man bruk for å lagre bruker-input, behandle bilder, autentisere brukere, søke på sidene, omforme bilder, håndtere betaling og lignende, håndteres dette med eksterne tjenester via API'er.
• Markup er HTML-koden som blir generert i bygge-steget. Denne koden kan være ren statisk HTML, men også dynamisk i den forstand at at data hentes fra API-er. Her benyttes gjerne såkalte headless CMS, slik som norske Sanity og lignende. I et slikt oppsett vil en bygging av markup ofte igangsettes når kildekoden sjekkes inn i versjonskontroll (som Github) eller av såkalte webhooks som trigges når CMSet får nytt innhold.

I illustrasjonen av JAMstack-arkitekturen nedenfor ser vi at kombinasjonen av maler og innhold kompileres til statiske HTML-sider/innhold som så distribueres til et innholdsnettverk (CDN). CDN medvirker til at sidene lastes så nær brukeren som mulig.

Hvorfor skal du bruke JAMstack?

JAMstack er en moderne og effektiv måte å utvikle nettsteder på. Sammenlignet med sentraliserte, database-avhengige nettsteder har JAMstack-baserte nettsteder følgende fordeler:

• Hastighet - sidene laster lynraskt
• Lavere kostnader - statiske nettsteder er mye rimeligere i forhold til dedikerte servere/databaser
• Skalerbarhet - innhold er statisk og lastes ikke fra en sentral server
• Vedlikehold - det er ikke behov for å overvåke noen servere
• Sikkerhet - det er ingen hemmeligheter på et statisk nettsted - det er kun tilgangen til API'er som må sikres

I et SEO-perspektiv er det få grunner til å bruke noe annet enn JAMstack. Google favoriserer nettsteder som laster hurtig og brukerne klikker ikke "tilbake-knappen" i samme grad. Sett fra utviklernes ståsted, vil JAMstack gi en bedre opplevelse, da de kan fokusere på å utvikle den beste brukeropplevelsen, benytte den nyeste teknologien og bekymre seg mindre om ytelse og skalerbarhet.

I Labs liker vi JAMstack og selv om vi benytter forskjellige teknologier avhengig av hva som skal lages, er "vår" stack for tiden:

• React - det mest brukte Javascript-biblioteket for å lage brukergrensesnitt
• Next.JS rammeverket - Det desidert mest populære rammeverket for å bygge statiske nettsteder med React
• Sanity (CMS) - et norskutviklet headless/API-basert CMS i verdensklasse

Du kan gjerne lese mer om JAMstack på deres nettsider. Her finner du mer informasjon og eksempler på verktøy som kan benyttes.

Ønsker du å vite mer om bruken av JAMstack hos oss i Labs? Ta gjerne kontakt for en uforpliktende prat!