Ievads navigācijā NextJS

Šajā mācību grāmatas sadaļā mēs runāsim par saišu darbību NextJS.

Vispirms apspriedīsim, kas ir tik īpašs šajās saitēs. Apskatīsim tās dažādās pieejās veidotnes izveidošanai.

Vietne uz React

Pieņemsim, ka jums ir vietne uz React. Kā zināms, React ir SPA - vietne, kurā lietotājs vienmēr paliek vienā lapā. Jūs varat pievienot React Router un lietotājs domās, ka pārvietojas pa dažādām lapām, bet fiziski paliekot uz viena faila.

Šajā gadījumā lietotājs klikšķinās pa saitēm, viņam šķitīs, ka viņš nonāk citā lapā, bet vietnes lapa pārlūkprogrammā netiks pārlādēta - React dinamiski veidos to, ko lietotājs redz ekrānā.

Šādā shēmā lietotājs saņem vietnes maketu pirmo reizi ienākot lapā, un pēc tam vietnes daļas vienkārši mainās caur JavaScript. Šajā gadījumā vietne var pieprasīt datus no servera caur AJAX.

Šī pieeja samazina slodzi uz hostinga (kura resursi maksā mūsu naudu), kā arī slodzi uz lietotāja interneta kanālu.

Bet šai pieejai ir trūkums - problēma ar SEO. It kā vietnei ir saišu kopums, un adreses joslā kaut kas mainās, un var pat nomest saiti uz noteiktu vietnes lapu caur ziņojumtirdzniecības līdzekli. Tomēr lapas saturs tiek veidots dinamiski klienta pusē, un meklētājprogrammas to nespēj apstrādāt. Tāpēc šāda vietne netiks popularizēta.

Tomēr ne visas vietnes ir paredzētas popularizēšanai meklētājprogrammās. Un, ja jūsējā nav paredzēta, tad šī shēma jums ir pilnīgi darba.

Vietne uz backend

Pieņemsim, ka jūsu vietne ir izveidota uz vienas no backend valodām. Piemēram, uz PHP.

Šajā gadījumā, kad lietotājs klikšķinās pa saitēm, vietnes lapa tiks katru reizi ielādēta pilnībā.

Problēma ir tā, ka būtiska lapas daļa jau ir lietotājam. Galu galā, kā jūs jau zināt, lapā parasti mainās tikai saturs un metadati, bet viss pārējais paliek nemainīgs.

Kāpēc mums lejupielādēt pārējo, ja mainījās tikai saturs? Tas rada paaugstinātu slodzi uz serveri un interneta kanālu.

Ir vēl viena problēma. Pieņemsim, ka lapā, ko mēs saņemam, saturā atrodas produktu saraksts, kā interneta veikalā. Acīmredzot, katram produktam ir identisks izmērķojums. Optimālāk būtu lejupielādēt tikai produktu datus un produkta izvades veidni. Un pēc tam klienta pusē izvadīt katru produktu šajā veidnē. Bet mēs lejupielādējam produktus kopā ar atkārtojošos produkta izmērķojumu.

Rezumējot, ja mums ir vietne uz tīra backend, mēs pārraidām pa tīklu daudz nevajadzīgu datu.

Tomēr šajā gadījumā mums nav problēmas ar SEO. Pēc pieprasītā URL vienmēr tiek atgriezts statisks saturs, kas ir saprotams meklētājprogrammām.

Vietne uz NextJS

NextJS apvieno abas pieejas. Kad lietotājs ieraksta URL tieši adreses joslā, tad viņam atbildē tiek atgriezts statisks lapas saturs.

Kad lietotājs sāk klikšķināt pa saitēm mūsu vietnē, tad lapas netiek pārlādēta pilnībā, bet caur AJAX tiek ielādēti nepieciešamie lietotājam dati.

Kad meklētājprogramma pārvietojas pa mūsu vietni, tā redz viņai nepieciešamo statisko saturu. Un, kad lietotājs pārvietojas pa mūsu vietni, mūsu vietne sāk uzvesties līdzīgi kā SPA.

Un, pats galvenais, NextJS to visu izdara automātiski! Mums par to nav jārūpējas - tas visu izdarīs pats. Skaistums!

Nākamajās nodarbībās mēs izpratīsim, kā NextJS liek darboties aprakstītajā veidā.