Introduksjon til navigasjon i NextJS

I denne delen av læreboka skal vi snakke om hvordan lenker fungerer i NextJS.

La oss først diskutere hva som er så spesielt med lenker. La oss se på dem i ulike tilnærminger til nettstedoppbygging.

Nettsted på React

Anta at du har et nettsted bygget med React. Som kjent er React et SPA - et nettsted der brukeren alltid forblir på én side. Du kan koble til React Router og brukeren vil tro at han/hun navigerer mellom forskjellige sider, mens han/hun fysisk forblir på én fil.

Samtidig vil brukeren klikke på lenker, det vil virke som om han/hun kommer til en annen side, men netsiden i nettleseren vil ikke lastes på nytt - React vil dynamisk generere det som brukeren ser på skjermen.

I et slikt oppsett mottar brukeren nettstedets layout ved første besøk på siden, og deretter byttes deler av nettstedet ut via JavaScript. Samtidig kan nettstedet be om data fra serveren via AJAX.

Denne tilnærmingen reduserer belastningen på hosting (som koster våre penger), samt belastningen på brukerens internettforbindelse.

Men denne tilnærmingen har en ulempe - SEO-problemet. Selv om nettstedet har et sett med lenker, og adresselinjen endrer seg, og du til og med kan sende en lenke til en bestemt side på nettstedet via en meldingstjeneste. Imidlertid genereres innholdet på siden dynamisk på klientsiden, og søkemotorer er ikke i stand til å behandle dette. Derfor vil ikke et slikt nettsted kunne bli rangert.

Men ikke alle nettsteder er beregnet for rangering i søkemotorer. Og hvis ditt ikke er det, er dette oppsettet helt egnet for deg.

Nettsted med backend

Anta at nettstedet ditt er laget med et av backend-språkene. For eksempel, PHP.

I dette tilfellet, når brukeren klikker på lenker, vil netsiden lastes på nytt i sin helhet hver gang.

Problemet er at en vesentlig del av siden allerede er hos brukeren. For, som du allerede vet, på en side endres vanligvis bare innholdet og metadata, mens alt annet forblir uendret.

Hvorfor skal vi laste ned resten, hvis bare innholdet har endret seg? Dette skaper en økt belastning på serveren og internettforbindelsen.

Det er også et annet problem. Anta at på siden vi mottar, er det i innholdet en liste over produkter, som i en nettbutikk. Det er åpenbart at hvert produkt har identisk layout. Det ville være mer optimalt å laste ned kun produktdataene og malen for visning av produktet. Og deretter på klienten vise hvert produkt i denne malen. Men vi laster ned produktene sammen med den repeterende layouten for hvert produkt.

For å oppsummere: Hvis vi har et nettsted med ren backend, sender vi mye overflødig data over nettverket.

Imidlertid har vi ikke noe SEO-problem i dette tilfellet. For den forespurte URL-en returneres alltid statisk innhold, som søkemotorer forstår.

Nettsted på NextJS

NextJS kombinerer begge tilnærminger. Når en bruker skriver inn en URL direkte i adresselinjen, mottar han/hun statisk innhold fra siden som svar.

Men når brukeren begynner å klikke på lenker på nettstedet vårt, lastes ikke siden på nytt i sin helhet, men de nødvendige dataene for brukeren lastes ned via AJAX.

Når en søkemotor går gjennom nettstedet vårt, ser den det statiske innholdet den trenger. Og når en bruker navigerer på nettstedet vårt, begynner nettstedet vårt å oppføre seg som en SPA.

Og, viktigst av alt, NextJS gjør alt dette automatisk! Vi trenger ikke å bekymre oss for dette – den gjør alt selv. Fantastisk!

I de neste leksjonene skal vi finne ut av hvordan vi får NextJS til å fungere på den beskrevene måten.