Navigeerimise tutvustus NextJS-is

Selles õpiku osas räägime linkide tööst NextJS-is.

Alustuseks arutleme, mis on linkides nii erilist. Vaatame neid erinevates veebilehtede loomise lähenemistes.

React-i veebileht

Oletame, et teil on veebileht React-is. Nagu teada, on React SPA - veebileht, kus kasutaja jääb alati ühele lehele. Võite ühendada React Router ja kasutaja arvab, et liigub erinevatele lehtedele, jäädes samal ajal füüsiliselt ühele failile.

Samal ajal klõpsab kasutaja linkidele, talle näib, et ta jõuab teisele lehele, kuid veebileht brauseris ei laadi uuesti - React moodustab dünaamiliselt selle, mida kasutaja ekraanil näeb.

Sellises skeemis saab kasutaja veebilehe maketi esimesel lehele sisenemisel, seejärel muutuvad veebilehe osad lihtsalt läbi JavaScript-i. Samal ajal võib veebileht taotleda andmeid serverilt läbi AJAX-i.

See lähenemine vähendab koormust hostimisel (mille ressursid maksavad meie raha), samuti koormust kasutaja internetikanalil.

Kuid sellel lähenemisel on puudus - SEO probleem. Justkui on veebilehtel linkide kogum ja aadressireal midagi muutub, ja isegi saab saata lingi konkreetsele veebilehe lehele läbi messengeri. Kuid lehe sisu moodustatakse dünaamiliselt kliendipoolselt ja otsingumootorid ei suuda seda töödelda. Seetõttu selline veebileht ei edene.

Kuid mitte kõik veebilehed pole mõeldud otsingumootorites edenemiseks. Ja kui teie oma pole selleks mõeldud, siis see skeem on teie jaoks täiesti töökorras.

Tagarakenduse veebileht

Oletame, et teie veebileht on tehtud ühel tagarakenduse keeltest. Näiteks PHP-l.

Sel juhul, kui kasutaja klõpsab linkidele, laadib veebileht iga kord täielikult uuesti.

Probleem on selles, et oluline osa lehest on kasutajal juba olemas. Sest, nagu te juba teate, lehel muutub tavaliselt ainult sisu ja metaanandmed, kuid kõik muu jääb mutumatuks.

Miks me peaksime ülejäänut alla laadima, kui muutus ainult sisu? See loob suurenenud koormuse serverile ja internetikanalile.

On veel üks probleem. Oletame, et lehel, mille me saame, asub sisus toodete nimekiri, nagu e-poes. Ilmselgelt on igal tootel sama veebilehe kujundus. Optimaalsem oleks alla laadida ainult toodete andmed ja toote väljund mall. Seejärel kliendipoolsel kuvada iga toode selles mallis. Kuid me laadime alla tooted koord toote kordusveebilehe kujundusega.

Kokkuvõttes, kui meil on puhas tagarakenduse veebileht, saadame me võrgu kaudu palju lisanduvaid andmeid.

Kuid sel juhul meil ei teki SEO probleemi. Taotletud URL-i peale antakse alati staatiline sisu, mis on otsingumootoritele arusaadav.

NextJS-i veebileht

NextJS ühendab mõlemad lähenemised. Kui kasutaja sisestab URL-i otse aadressiribale, siis vastuseks saab ta staatilise lehe sisu.

Kui aga kasutaja hakkab klõpsama meie veebilehe linkidel, siis leht ei uuene täielikult, vaid läbi AJAX-i laaditakse alla vajalikud kasutaja andmed.

Kui otsingumootor meie veebilehel liigub, näeb ta endale vajalikku staatilist sisu. Kui aga kasutaja meie veebilehel liigub, hakkab meie veebileht käituma nagu SPA.

Ja, mis kõige tähtsam, NextJS teeb kõik selle automaatselt! Meil ei pea selle eest muretsema - see teeb kõik ise. Ilu!

Järgmistes tundides hakkame selgitama, kuidas NextJS-i panna töötama kirjeldatud viisil.