Introduktion til navigation i NextJS

I dette afsnit af vejledningen vil vi tale om, hvordan links fungerer i NextJS.

Lad os til at starte med diskutere, hvad der er så specielt ved links. Lad os se på dem i forskellige tilgange til at opbygge en hjemmeside.

Hjemmeside på React

Antag, at du har en hjemmeside bygget med React. Som bekendt er React et SPA - en hjemmeside, hvor brugeren altijd forbliver på én side. Du kan tilføje React Router og brugeren vil tro, at de navigerer mellem forskellige sider, mens de faktisk forbliver på den samme fil.

I denne proces vil brugeren klikke på links, og det vil virke som om, de kommer til en anden side, men hjemmesiden i browseren genindlæses ikke - React vil dynamisk generere det, som brugeren ser på skærmen.

I denne modeller modtager brugeren hjemmesidens layout ved første besøg på siden, og derefter skifter dele af hjemmesiden bare via JavaScript. Samtidig kan hjemmesiden anmode om data fra serveren via AJAX.

Denne tilgang reducerer belastningen på hosting (hvis ressourcer koster vores penge), samt belastningen på brugerens internetforbindelse.

Men denne tilgang har en ulempe - problemet med SEO. Selvom hjemmesiden har et sæt links, og adresse- linjen ændrer sig, og man endda kan sende et link til en bestemt side på hjemmesiden via en messenger. Imidlertid genereres sidens indhold dynamisk på klienten, og søgemaskiner er ikke i stand til at håndtere dette. Derfor vil sådan en hjemmeside ikke blive synlig i søgeresultater.

Ikke alle hjemmesider er dog beregnet til at fremmes i søgemaskiner. Og hvis din ikke er det, er denne model fuldt ud anvendelig for dig.

Hjemmeside med backend

Antag, at din hjemmeside er lavet med et af backend-sprogene. For eksempel, PHP.

I dette tilfælde, når brugeren klikker på links, vil hjemmesiden genindlæses fuldstændig hver gang.

Problemet er, at en væsentlig del af siden allerede er tilgængelig for brugeren. For, som du allerede ved, på en side ændres normalt kun indholdet og metadata, mens alt andet forbliver uændret.

Hvorfor skal vi så downloade resten, hvis kun indholdet er ændret? Dette skaber en forhøjet belastning på serveren og internetforbindelsen.

Der er også et andet problem. Antag, at på siden, som vi modtager, er der i indholdet placeret en liste over produkter, som i en webshop. Det er indlysende, at hvert produkt har den samme layout. Det ville være mere optimalt at downloade kun produktdataene og skabelonen for visning af produktet. Og derefter på klienten vise hvert produkt i denne skabelon. Men vi downloader produkterne sammen med den gentagne layout for hvert produkt.

For at opsummere, hvis vi har en hjemmeside med ren backend, sender vi mange unødvendige data over netværket.

Imidlertid har vi i dette tilfælde ikke problemet med SEO. På den anmodede URL leveres altid statisk indhold, som søgemaskinerne forstår.

Hjemmeside på NextJS

NextJS kombinerer begge tilgange. Når en bruger indtaster en URL direkte i adresselinjen, modtager de som svar det statiske indhold af siden.

Når brugeren derimod begynder at klikke på links på vores hjemmeside, genindlæses siden ikke fuldstændigt, men de nødvendige data for brugeren hentes via AJAX.

Når en søgemaskine crawler vores hjemmeside, ser den det statiske indhold, den har brug for. Og når en bruger navigerer på vores hjemmeside, begynder vores side at opføre sig som et SPA.

Og, vigtigst af alt, NextJS udfører alt dette automatisk! Vi behøver ikke at bekymre os om det - den gør det hele selv. Smukt!

I de næste lektioner vil vi finde ud af, hvordan man får NextJS til at arbejde på den beskrevne måde.