Introduktion till navigering i NextJS

I denna del av handledningen kommer vi att prata om hur länkar fungerar i NextJS.

Låt oss först diskutera vad som är så speciellt med länkar. Vi tittar på dem i olika tillvägagångssätt för att skapa en webbplats.

Webbplats på React

Antag att du har en webbplats byggd med React. Som bekant är React ett SPA - en webbplats där användaren alltid förblir på en sida. Du kan ansluta React Router och användaren kommer att tro att de navigerar mellan olika sidor, samtidigt som de fysiskt förblir på en fil.

Användaren kommer att klicka på länkar, det kommer att verka som om de hamnar på en annan sida, men webbplatsens sida i webbläsaren kommer inte att laddas om - React kommer dynamiskt att forma det som användaren ser på skärmen.

I ett sådant schema får användaren webbplatsens layout vid första besöket på sidan, och sedan byts delar av webbplatsen bara ut via JavaScript. Samtidigt kan webbplatsen hämta data från servern via AJAX.

Detta tillvägagångssätt minskar belastningen på webbhotellet (vars resurser kostar våra pengar), samt belastningen på användarens internetkanal.

Men detta tillvägagångssätt har en nackdel - problem med SEO. Webbplatsen har visserligen en uppsättning länkar, och i adressfältet förändras något, och man kan till och med skicka en länk till en specifik sida på webbplatsen via ett meddelandeprogram. Men innehållet på sidan skapas dynamiskt på klientsidan och sökmotorer kan inte bearbeta detta. Därför kommer en sådan webbplats inte att synas i sökresultat.

Alla webbplatser är dock inte avsedda för att synas i sökmotorer. Och om din webbplats inte är det, så är detta schema fullt fungerande för dig.

Webbplats på backend

Antag att din webbplats är gjord med ett av backend-språken. Till exempel, PHP.

I det här fallet, när användaren klickar på länkar, kommer webbplatsens sida att laddas om helt varje gång.

Problemet är att en betydande del av sidan redan finns hos användaren. För, som du redan vet, på sidan ändras vanligtvis bara innehållet och metadata, medan allt annat förblir oförändrat.

Varför ska vi ladda ner resten, om bara innehållet har ändrats? Detta skapar en ökad belastning på servern och internetkanalen.

Det finns ytterligare ett problem. Antag att på sidan, som vi får, i innehållet finns det en lista med produkter, som i en webbshop. Uppenbarligen har varje produkt samma layout. Det vore mer optimalt att ladda ner endast produktdata och mallen för att visa produkten. Och sedan på klientsidan visa varje produkt i denna mall. Men vi laddar ner produkter tillsammans med den upprepade layouten för produkten.

Sammanfattningsvis, om vi har en webbplats på ren backend, skickar vi mycket överflödig data över nätverket.

Däremot har vi i detta fall inga problem med SEO. För den efterfrågade URL:en returneras alltid statiskt innehåll, som sökmotorer förstår.

Webbplats på NextJS

NextJS kombinerar båda tillvägagångssätten. När användaren skriver in en URL direkt i adressfältet, får de tillbaka det statiska innehållet på sidan som svar.

När användaren sedan börjar klicka på länkar på vår webbplats, laddas inte sidan om helt, utan via AJAX laddas de data användaren behöver.

När en sökmotor navigerar på vår webbplats, ser den det statiska innehåll den behöver. Och när en användare navigerar på vår webbplats, börjar vår webbplats att bete sig som ett SPA.

Och, viktigast av allt, NextJS genomför allt detta automatiskt! Vi behöver inte oroa oss för det - den gör allt själv. Underbart!

I kommande lektioner kommer vi att ta reda på hur man får NextJS att fungera på det beskrivna sättet.