Suksess for Fjordland.no med Next.js og Enonic

TINE har hatt et langvarig samarbeid med Enonic som sin innholdsplattform. Selskapets digitale portefølje inkluderer store nettsteder som TINE.no, som først ble lansert i 2005.

Nylig gjennomførte teamet bak Fjordland.no – delvis eid av TINE (51 %) og helt forvaltet av deres infrastruktur – en fullstendig ombygging av Fjordlands nettside.

Tidligere hadde Fjordlands nettsted flere utfordringer: utdatert design, lang lastetid, begrenset responsivitet på mobil og fragmentert innhold spredt over flere undermerkevarer og separate plattformer.

Det nye målet var å forene disse merkevarene til ett sammenhengende nettsted, forbedre ytelsen, skape en mer intuitiv innholdredigeringsflyt og integrere et nyutviklet designsystem kjent som KREM.

Nylig holdt TINE en presentasjon hos Enonic. De viste hvordan integreringen av Enonic XP, Next.js og KREM-designsystemet støttet disse målene og samtidig skapte et bemerkelsesverdig raskt og redaktørvennlig nettsted.

Se presentasjonen her:

Overgang fra tradisjonelt CMS til en headless-tilnærming

Før ombyggingen brukte Fjordland.no en mer tradisjonell CMS-tilnærming, der frontend og backend var tett koblet. Denne oppsetningen, som støttet seg til malverk som Thymeleaf og Freemarker, gjorde det vanskelig å innlemme moderne React-baserte designsystemer.

Utviklingsteamet satte seg flere viktige prioriteringer for det nye nettstedet:

• Moderne utvikleropplevelse: Muligheten til å bruke et moderne frontend-rammeverk og designsystem.
• Sømløs designintegrasjon: Enkel integrering av det React-baserte KREM-designsystemet.
• Redaktørvennlighet: En forenklet innholdforvaltningsprosess.
• Høy ytelse: Rask lastetid og muligheten til å håndtere store trafikkøkninger.

Etter å ha vurdert alternativene, ble den valgte løsningen en headless arkitektur ved hjelp av Enonic XP som backend-innholdskilde, Guillotine som et GraphQL-API-lag og Next.js for frontend-rendering.

Den valgte teknologistabelen: Enonic XP, Guillotine og Next.js

Den endelige arkitekturen så slik ut:

• Enonic XP: Forvalter innhold og redigeringsgrensesnitt, og gir et fleksibelt, headless-CMS-miljø.
• Guillotine (GraphQL-API): Fungerer som et datalag, slik at frontenden bare kan spørre om nødvendig informasjon og tilpasse svar.
• Next.js (Frontend): Leverer presentasjonslaget, støtter statisk nettstedgenerering (SSG) og integreres naturlig med React-baserte komponenter fra KREM-designsystemet.

Hvorfor velge Next.js?

Next.js tilbyr flere rendering-strategier – klientside-rendering (CSR), serverside-rendering (SSR) og statisk nettstedgenerering (SSG). For Fjordland-prosjektet ble SSG valgt for å sikre rask lastetid.

Under byggeprosessen genererer Next.js statiske HTML-filer for alle forespurte sider. Når brukere besøker nettstedet, blir innhold servert øyeblikkelig fra disse forhåndsbygde sidene, noe som minimerer lastetider og forbedrer brukeropplevelsen.

I tillegg, som et React-rammeverk, forenkler Next.js integreringen med KREM, designsystemet bygget på React-komponenter. Denne oppsetningen reduserer kompleksiteten, sikrer vedlikeholdbar kode og gir et moderne utviklingsmiljø.

Se også: Bygg et raskt og moderne nettsted med Next.js og Headless CMS »

Dynamisk innhold med statisk generering

Alt innhold hentes via en GraphQL-spørring mot Guillotine. Next.js itererer over innholdshierarkiet ved buildtime og forhåndsrendrer statiske stier for hvert innholdselement. Ved den første brukerforespørselen hydrerer siden med nødvendig JavaScript, og påfølgende besøkende mottar øyeblikkelige, bufrede svar.

En blokkbasert tilnærming håndterer nettstedets dynamiske innhold. Hvert innholdselement – som et hovedbilde, en tekstblokk eller en produktliste – kartlegges til en spesifikk React-komponent. En serialiseringsfunksjon velger riktig komponenttype og komponerer den endelige siden dynamisk.

For bildebehandling brukes Next.js <Image>-komponenten. I forhåndsvisningsmodus, når interne Next.js-bilde-URL-er ikke er tilgjengelige for redigeringsgrensesnittet, faller systemet tilbake til standard HTML-bilder, slik at redigeringens forhåndsvisning forblir representativ.

Ytelsesgevinster

Disse kombinerte tiltakene førte til betydelige ytelsesforbedringer. Det gamle Fjordland-nettstedet slet med ytelsesmålinger; den nye implementeringen oppnår nå toppscore i Lighthouse-vurderinger.

Store bilder lastes inn på omtrent et kvart sekund, og layoutforskyvninger er eliminert. Tilgjengelighet, SEO og beste praksis viser alle markerte forbedringer, noe som gir en jevnere og mer pålitelig brukeropplevelse.

Les også Fjordland-kundehistorien »

Forbedring av redaktøropplevelsen

Redaktørprosessen ble bevisst strømlinjeformet. I stedet for å belaste redaktørene med komplekse layoutkontroller og konfigurasjoner, overfører systemet layoutlogikken til frontenden. Redaktørene velger ganske enkelt innholdsblokker og skriver inn relevant informasjon.

Forhåndsvisningsfunksjonen i Enonic XP, integrert med Next.js, gir en dynamisk forhåndsvisningsmodus av nettstedet. Dette lar redaktørene se endringer slik de vil vises for sluttbrukere, uten manuell nydistribusjon.

Når endringer publiseres, utløser trinnvis statisk regenerering en cache-rensing og innholdsgjenkjenning på Next.js-siden. Resultatet er nesten øyeblikkelige oppdateringer til det publiserte nettstedet uten behov for tidkrevende ombygginger.

Utfordringer og viktige lærdommer

Flere innsikter dukket opp under utviklingen:

1. Build-tider: Innledende fullstendige builds tok nesten 25 minutter. Etter optimalisering falt tiden til rundt 12 minutter. Installasjon av Node-moduler, pakking og innholdshenting forblir ikke-trivielle oppgaver.

2. Kompleks logging og feilsøking: Å kjøre både XP- og Next.js-servere kan komplisere sporing av problemer. Logger må undersøkes på tvers av flere systemer.

3. Hosting-hensyn: Hosting av Next.js i Azure Cloud introduserte ekstra kompleksitet sammenlignet med mer konvensjonelle oppsett.

4. Uventede trafikkpigger: Under en Snapchat «takeover»-annonsekampanje som dirigerte massiv trafikk til Fjordland.no, steg forespørselsratene til 80.000 per minutt. Opprinnelig håndterte en enkelttrådet Node.js-prosess forespørsler. Rask iverksettelse av en prosessbehandler og horisontal skalering sikret stabil ytelse selv under uventede belastningsøkninger.

Fremover

Den nåværende Next.js- og Enonic XP-integreringen demonstrerer imponerende stabilitet og ytelse. Løpende utvikling av Enonic-teamet lover ytterligere forbedringer – som nyere React- og Next.js-versjoner med integrert bildebehandling – som kan forenkle prosessen ytterligere.

Se også: Hvorfor velge Enonics headless-CMS når du bygger et Next.js-nettsted »

Konklusjon

Ombyggingen av Fjordland.no viser hvordan en headless-tilnærming, kombinert med et moderne frontend-rammeverk og et dedikert designsystem, kan gi betydelige gevinster i ytelse, vedlikehold og brukervennlighet for redaktører.

Det resulterende nettstedet oppnår rask lastetid, dynamisk innholdsbehandling og en friksjonsfri redigeringsprosess. For organisasjoner som vurderer en lignende overgang, fremhever denne kundehistorien fordelene og lærdommene når man tar i bruk Next.js, Enonic XP og en headless, komponentdrevet arkitektur.