Uvod v navigacijo v NextJS

V tem razdelku učbenika bomo govorili o delovanju povezav v NextJS.

Za začetek razpravljajmo, kaj je tako posebnega pri povezavah. Oglejmo si jih v različnih pristopih k ustvarjanju spletnega mesta.

Spletno mesto na React

Recimo, da imate spletno mesto na React. Kot je znano, je React SPA - spletno mesto, kjer uporabnik vedno ostane na eni strani. Lahko namestite React Router in uporabnik bo mislil, da hodi po različnih straneh, medtem ko fizično ostaja na eni datoteki.

Medtem ko bo uporabnik klikal na povezave, se mu bo zdelo, da pride na drugo stran, vendar se stran spletnega mesta v brskalniku ne bo ponovno naložila - React bo dinamično oblikoval to, kar uporabnik vidi na zaslonu.

V taki shemi uporabnik prejme postavitev spletnega mesta ob prvem obisku strani, nato pa se deli spletnega mesta samo zamenjajo prek JavaScript. Medtem ko lahko spletno mesto zahteva podatke s strežnika prek AJAX.

Takšen pristop zmanjša obremenitev gostovanja (katerih viri stanejo naš denar), pa tudi obremenitev uporabnikovega internetnega kanala.

Vendar ima tak pristop slabost - težavo s SEO. Kot da ima spletno mesto nabor povezav, in v naslovni vrstici se nekaj spremeni, in lahko celo delite povezavo na določeno stran spletnega mesta prek mesedžerja. Vsebina strani pa se oblikuje dinamično na odjemalcu in iskalniki tega ne morejo obdelati. Zato se takšno spletno mesto ne bo promovalo.

Vsa spletna mesta pa niso namenjena promociji v iskalnikih. In če vaše ni namenjeno, potem je ta shema povsem delujoča za vas.

Spletno mesto na backendu

Recimo, da je vaše spletno mesto narejeno na enem od backend jezikov. Na primer, na PHP.

V tem primeru, ko bo uporabnik klikal na povezave, se bo stran spletnega mesta vsakič v celoti naložila.

Težava je v tem, da ima uporabnik že precejšen del strani. Kajti, kot že veste, na strani se običajno spremeni samo vsebina in metapodatki, vse ostalo pa ostane nespremenjeno.

Zakaj bi prenašali ostalo, če se je spremenila samo vsebina? To ustvarja povečano obremenitev strežnika in internetnega kanala.

Obstaja še ena težava. Recimo, da je na strani, ki jo prejmemo, v vsebini nameščen seznam izdelkov, kot v spletni trgovini. Očitno ima vsak izdelek enako postavitev. Bolj optimalno bi bilo prenesti samo podatke o izdelkih in predlogo za prikaz izdelka. In nato na odjemalcu prikazati vsak izdelek v tej predlogi. Mi pa prenašamo izdelke skupaj s ponavljajočo se postavitvijo izdelka.

Če povzamemo, če imamo spletno mesto na čistem backendu, po omrežju pošiljamo veliko odvečnih podatkov.

Vendar v tem primeru nimamo težav s SEO. Za zahtevani URL se vedno vrne statična vsebina, razumljiva iskalnikom.

Spletno mesto na NextJS

NextJS združuje oba pristopa. Ko uporabnik vnese URL neposredno v naslovno vrstico, se mu v odgovoru vrne statična vsebina strani.

Ko pa uporabnik začne klikati na povezave na našem spletnem mestu, se stran spletnega mesta ne osveži v celoti, temveč prek AJAX-a potrebni podatki zanje.

Ko iskalnik obišče naše spletno mesto, vidi statično vsebino, ki jo potrebuje. Ko pa uporabnik obišče naše spletno mesto, se naše spletno mesto začne obnašati kot SPA.

In, kar je najpomembneje, NextJS vse to naredi samodejno! Nam ni treba skrbeti za to - vse bo naredil sam. Lepota!

V naslednjih lekcijah bomo razvozlavali, kako NextJS deluje na opisan način.