Įvadas į navigaciją NextJS

Šiame vadovėlio skyriuje kalbėsime apie nuorodų veikimą NextJS.

Pirmiausia aptarkime, kas yra taip ypatinga nuorodose. Pažvelkime į jas įvairiuose svetainės kūrimo požiūriuose.

Svetainė su React

Tarkime, kad turite svetainę su React. Kaip žinia, React yra SPA - vieno puslapio aplikacija, kurioje naudotojas visada lieka viename puslapyje. Galite prijungti React Router ir naudotojas manys, kad naršo skirtinguose puslapiuose, nors fiziškai liks viename faile.

Tuomet naudotojas spaus nuorodas, jam atrodys, kad pateko į kitą puslapį, bet svetainės puslapis naršyklėje neperkraus - React dinamiškai formuos tai, ką naudotojas mato ekrane.

Esant tokiai schemai, naudotojas gauna svetainės maketą pirmą kartą atsidaręs puslapį, o vėliau svetainės dalys tiesiog keičiasi per JavaScript. Tuo tarpu svetainė gali užklausti duomenis iš serverio per AJAX.

Toks požiūris sumažina apkrovą hostingui (kurio ištekliai kainuoja mūsų pinigus), taip pat apkrovą naudotojo interneto kanalui.

Bet šis požiūris turi trūkumą - SEO problemą. Atrodo, kad svetainė turi nuorodų rinkinį, ir adreso eilutėje kažkas keičiasi, ir net galima nusiųsti nuorodą į konkretų svetainės puslapį per mesendžerį. Tačiau, puslapio turinys formuojamas dinamiškai kliento pusėje ir paieškos sistemos negali to apdoroti. Todėl tokia svetainė nebus pristatyta.

Ne visos svetainės, vis dėlto, yra skirtos pristatymui paieškos sistemose. Ir jei jūsų nėra skirta, ši schema jums visiškai tinka.

Svetainė su backendu

Tarkime, jūsų svetainė padaryta viena iš backend kalbų. Pavyzdžiui, su PHP.

Šiuo atveju, kai naudotojas spaus nuorodas, svetainės puslapis bus visiškai perkraunamas kiekvieną kartą.

Problema ta, kad didžioji puslapio dalis jau yra pas naudotoją. Juk, kaip jau žinote, puslapyje dažniausiai keičiasi tik turinys ir metaduomenys, o visa kita lieka nepakitusi.

Kam mums siųstis likusią dalį, jei pasikeitė tik turinys? Tai sukuria padidėjusią apkrovą serveriui ir interneto kanalui.

Yra dar viena problema. Tarkime, puslapyje, kurį gauname, turinyje yra produktų sąrašas, kaip internetinėje parduotuvėje. Akivaizdu, kad kiekvienas produktas turi tą patį išdėstymą. Optimaliau būtų atsisiųsti tik produktų duomenis ir produkto išvedimo šabloną. Ir tuomet kliento pusėje išvesti kiekvieną produktą šiame šablone. Bet mes atsisiunčiame produktus kartu su pasikartojančiu produkto išdėstymu.

Apibendrinant, jei turime svetainę su grynu backendu, mes per tinklą siunčiame daug nereikalingų duomenų.

Tačiau, šiuo atveju mes neturime SEO problemos. Pagal užklaustą URL visada grąžinamas statinis turinys, suprantamas paieškos sistemoms.

Svetainė su NextJS

NextJS derina abu požiūrius. Kai naudotojas įveda URL tiesiai į adreso eilutę, jam atsakyme grąžinamas statinis puslapio turinys.

O kai naudotojas pradeda spausti nuorodas mūsų svetainėje, puslapis nesikrauna visiškai, o per AJAX užsikrauna reikiami naudotojui duomenys.

Kai paieškos sistema naršo mūsų svetainėje, ji mato jai reikalingą statinį turinį. O kai naudotojas naršo mūsų svetainėje, mūsų svetainė pradeda elgtis kaip SPA.

Ir, svarbiausia, NextJS atlieka visą tai automatiškai! Mums nereikia apie tai rūpintis - jis viską padarys pats. Puiku!

Kitiose pamokose nagrinėsime, kaip NextJS priversti veikti aprašytu būdu.