Uvod u navigaciju u NextJS-u

U ovom odeljku udžbenika ćemo govoriti o radu linkova u NextJS-u.

Za početak, hajde da razgovaramo o tome šta je tako posebno kod linkova. Pogledaćemo ih u različitim pristupima izrade veb sajta.

Sajt na React-u

Pretpostavimo da imate sajt na React-u. Kao što je poznato, React predstavlja SPA - sajt na kojem korisnik uvek ostaje na jednoj stranici. Možete da povežete React Router i korisnik će misliti da ide po različitim stranicama, dok fizički ostaje na jednom fajlu.

Pritom će korisnik klijenti po linkovima, izgledaće mu kao da dolazi na drugu stranicu, ali stranica sajta u pretraživaču se neće ponovo učitavati - React će dinamički formirati ono što korisnik vidi na ekranu.

U takvoj šemi korisnik dobija izgled sajta pri prvom ulasku na stranicu, a zatim se delovi sajta jednostavno menjaju preko JavaScript-a. Pritom sajt može da traži podatke sa servera preko AJAX-a.

Ovakav pristup smanjuje opterećenje na hosting (čiji resursi koštaju naš novac), kao i opterećenje na internet kanal korisnika.

Ali ovaj pristup ima nedostatak - problem sa SEO. Kao da sajt i ima skup linkova, i u adresnoj liniji se nešto menja, i čak možete da pošaljete link na određenu stranicu sajta preko messenger-a. Međutim, sadržaj stranice formira se dinamički na klijentu i pretraživači nisu u stanju da to obrade. Zbog toga se takav sajt neće promovisati.

Nisu svi sajtovi, međutim, namenjeni promovisanju u pretraživačima. I ako vaš nije namenjen, onda je ova šema sasvim radna za vas.

Sajt na beku

Pretpostavimo da je vaš sajt napravljen na jednom od jezika beka. Na primer, na PHP-u.

U ovom slučaju, kada korisnik bude klikao na linkove, stranica sajta će se svaki put učitavati u celosti.

Problem je u tome što značajan deo stranice već postoji kod korisnika. Jer, kao što već znate, na stranici se obično menja samo sadržaj i metapodaci, a sve ostalo ostaje neizmenjeno.

Zašto bismo mi preuzimali ostalo, ako se promenio samo sadržaj? Ovo stvara povećano opterećenje na server i internet kanal.

Postoji još jedan problem. Pretpostavimo da na stranici, koju dobijamo, u sadržaju se nalazi spisak proizvoda, kao u internet prodavnici. Očigledno je da svaki proizvod ima istu verstku. Bilo bi optimalnije preuzeti samo podatke proizvoda, i šablon za prikaz proizvoda. I zatim na klijentu prikazati svaki proizvod u tom šablonu. Ali mi preuzimamo proizvode zajedno sa ponavljajućom verstkom proizvoda.

Sumirajući, ako imamo sajt na čistom beku, mi šaljemo preko mreže mnogo suvišnih podataka.

Međutim, u ovom slučaju nemamo problema sa SEO. Za traženi URL se uvek vraća statički sadržaj, razumljiv pretraživačima.

Sajt na NextJS-u

NextJS kombinuje oba pristupa. Kada korisnik ukuca URL direktno u adresnu liniju, onda mu kao odgovor stiže statički sadržaj stranice.

Kada korisnik počne da klika na linkove na našem sajtu, onda se stranica sajta ne osvežava u celosti, već preko AJAX-a učitavaju potrebni korisniku podaci.

Kada pretraživač posećuje naš sajt, vidi njemu potreban statički sadržaj. A kada korisnik posećuje naš sajt, naš sajt počinje da se ponaša kao SPA.

I, što je najvažnije, NextJS sve ovo obavlja automatski! Nama ne treba brinuti o tome - on će sve to sam uraditi. Lepota!

U narednim lekcijama ćemo razmatrati, kako naterati NextJS da radi opisanim načinom.