NAV: Hodeløs med Next.js

Arbeids- og velferdsforvaltningen – bedre kjent som NAV – er Norges offentlige velferdsetat. NAV har 19.000 ansatte, er ansvarlig for en tredjedel av det norske statsbudsjettet på 1.553 milliarder kroner og betjener 2,8 millioner brukere per år.

Utfordring

At NAV.no er et komplekst nettsted er en underdrivelse. Det betjenes av hundrevis av ulike grensesnitt og back-end-applikasjoner, i tillegg til å motta 190.000 unike daglige besøkende på tvers av 15.000 sider.

I tillegg er mer enn 100 innholdsredaktører involvert i å skape og vedlikeholde innhold på nettstedet, og videre har NAVs profesjonelle miljø et stort teknisk team, så vel som selvbetjeningsfunksjonalitet.

Selv om NAV hadde standardiserte React-komponenter for grensesnittet, ønsket de å øke bruken av landingssider for å veilede besøkende gjennom den sosiale velferdstrakten – som er en kritisk tjeneste i det norske samfunnet. Videre, for å strømlinjeforme prosesser og muliggjøre smidig skalering ønsket NAV å migrere fra et tradisjonelt publiseringssystem til en hodeløs arkitektur.

Totalt sett, som et ledd i en større og langsiktig prosess med digitalisering og modernisering av både NAV og offentlig sektor generelt, ønsket NAV å oppdatere sin hovedside og de underliggende teknologiene. De krevde en moderne, fleksibel og fremtidsrettet plattform for å støtte opp under deres høye krav i kraft av å være Norges største offentlige etat.

Løsning

Etter å ha vært Enonic-kunde i årevis, oppgraderte NAV til Enonic XP mot slutten av 2019. Etter å ha først benyttet Enonics rammeverk, ønsket NAV å bruke React i stedet, ettersom deres utviklere kjenner rammeverket godt og fordi NAVs designsystem spesifikt bygger komponenter til React. I tillegg, og kanskje viktigst av alt, med et separat presentasjonslag er det enklere å holde koden ryddig.

Den første fungerende prototypen til denne nye løsningen ble publisert i august 2020, med full produksjon i desember 2020. Men NAV stoppet ikke der, de gikk et steg videre med å integrere Enonic med Next.js.

Next.js er et rammeverk for produksjon, som lar utviklere bygge nettsider med React. Rammeverket inkluderer rendering med React på serversiden, mens React alene hovedsakelig brukes for å bygge énsidesapplikasjoner og rendering på klientsiden.

Next.js bidrar altså med et rammeverk som lar brukere benytte den samme teknologien for rendering på både server- og klientside over flere sider. Det handler ikke så mye som å finne opp hjulet på nytt, men som å faktisk sette bilen sammen.

Utviklere kan selvsagt bygge React-apper og gjøre alle de tunge løftene selv, som å forhåndslaste sider med next/link, optimalisere bilder med next/image, dynamisk ruting og så videre. Next.js, derimot, pakker mange av disse tingene sammen, noe som lar utviklere komme mye raskere i gang med sine prosjekter.

Når det gjelder innholdsredaktører i NAVs hodeløse Enonic/Next.js-løsning, kan de fremdeles arbeide i visuell redigeringsmodus, navigere i innholdstrestrukturer, tidsstyre publisering, håndtere brukere og tilganger, gjenbruke innhold på tvers av nettstedet, og dra fordeler fra en generelt høy ytelse.

Resultater

Med den tette integrasjonen mellom et hodeløst publiseringssystem (Enonic) og et grensesnittsrammeverk (React/Next.js), har NAV.no blitt hodeløst uten å ødelegge for redaktøropplevelsen. Dette er dermed en løsning som både utviklere og redaktører kan sette pris på.

Andre resultater inkluderer reduserte kostnader, raskere utvikling via NAVs designsystem og høyere ytelse – ved å være enklere å skalere og mer elastisk.

De spesifikke fordelene med Next.js for NAV er at de kan flytte koderendering utenfor Enonic-plattformen og at det virker svært godt sammen med JavaScript.

I tillegg har ytelse og responstid blitt forbedret med Next.js: NAV.no fungerer nå akkurat som en énsidesapplikasjon. Etter første innlasting responderer nettstedet raskt ved å laste NAVs forside og mellomlagre alt bak hver eneste lenke. Ifølge NAVs egne ord “får du appfølelsen.”

Når det gjelder de hodeløse fordelene har NAV flyttet til en moderne arkitektur, hvor komponentene er mer fleksible, og dermed mer fremtidsrettede og klare for å takle morgendagens utfordringer.

Teknisk oversikt

Enonic XP
Hodeløst CMS med «Guillotine
Next.js grensesnittapplikasjon
SSG og inkrementell statisk regenerering
Distribuert via NAVs Kubernetes-baserte applikasjonsplattform, NAIS (Google Cloud)