JAMstack: SEO-vennlige og lynraske nettsteder

av Knut Martin Tornes - Leder for teknologi og utvikling | minutter å lese

Har du hørt om JAMstack? Med mindre du er front-end utvikler og er veldig opptatt av å bruke de "hotteste" verktøyene, så har du mest sannsynlig ikke det. Vi gir deg en innføring!

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.

jamstack-architecture

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!

Search
Se alle blogginnleggene våre