Hyrje në Navigimin në NextJS

Në këtë seksion të librit shkollor do të flasim për punën e lidhjeve në NextJS.

Për të filluar, le të diskutojmë se çfarë ka kaq të veçantë te lidhjet. Le t'i shikojmë ato në qasje të ndryshme për krijimin e një faqeje interneti.

Faqe interneti në React

Le të themi se keni një faqe interneti në React. Siç dihet, React përfaqëson një SPA - një faqe interneti, në të cilën përdoruesi gjithmonë mbetet në një faqe. Mund të lidhni React Router dhe përdoruesi do të mendojë se po lëviz nëpër faqe të ndryshme, ndërsa fizikisht mbetet në një skedar.

Ndërsa përdoruesi do të klikojë në lidhje, atij do t'i duket se po arrin në një faqe tjetër, por faqja e internetit në shfletues nuk do të rifreskohet - React do të formësojë në mënyrë dinamike atë që përdoruesi sheh në ekran.

Në një skemë të tillë, përdoruesi merr layout-in e faqes kur hyn për herë të parë në faqe, dhe pastaj pjesët e faqes thjesht ndryshohen përmes JavaScript. Gjatë kësaj, faqja mund të kërkojë të dhëna nga serveri përmes AJAX.

Një qasje e tillë ul ngarkesën në hosting (burimet e të cilit kushtojnë para tona), si dhe ngarkesën në kanalin e internetit të përdoruesit.

Por kjo qasje ka një disavantazh - problemi me SEO. Duket se faqja ka një grup lidhjesh, dhe në shiritin e adresave diçka ndryshon, dhe madje mund të dërgoni një lidhje për një faqe të caktuar të internetit përmes mesazherit. Megjithatë, përmbajtja e faqes formohet në mënyrë dinamike në klient dhe motorët e kërkimit nuk janë në gjendje ta përpunojnë atë. Prandaj, një faqe e tillë nuk do të promovohet.

Megjithatë, jo të gjitha faqet e internetit janë të destinuara për promovim në motorët e kërkimit. Dhe nëse e juaja nuk është e destinuar, atëherë kjo skemë është mjaft e punueshme për ju.

Faqe interneti në backend

Le të themi se faqja juaj e internetit është bërë në një nga gjuhët e backend-it. Për shembull, në PHP.

Në këtë rast, kur përdoruesi do të klikojë në lidhje, faqja e internetit do të ngarkohet plotësisht çdo herë.

Problemi është se një pjesë e konsiderueshme e faqes tashmë është te përdoruesi. Në fund të fundit, siç e dini tashmë, në faqe zakonisht ndryshon vetëm përmbajtja dhe metadata, ndërsa gjithçka tjetër mbetet e pandryshuar.

Pse duhet ta shkarkojmë pjesën tjetër, nëse ka ndryshuar vetëm përmbajtja? Kjo krijon një ngarkesë të shtuar në server dhe në kanalin e internetit.

Ka edhe një problem tjetër. Le të themi se në faqe, që ne marrim, në përmbajtje ndodhet një listë produktesh, si në një dyqan online. Është e qartë se çdo produkt ka të njëjtën layout. Do të ishte më optimale të shkarkohej vetëm të dhënat e produkteve, dhe template-in e shfaqjes së produktit. Dhe pastaj në klient, të shfaqet çdo produkt në këtë template. Por ne shkarkojmë produktet së bashku me layout-in e përsëritur të produktit.

Duke përmbledhur, nëse kemi një faqe interneti në backend të pastër, ne dërgojmë nëpër rrjet shumë të dhëna të panevojshme.

Megjithatë, në këtë rast nuk kemi probleme me SEO. Për URL-në e kërkuar gjithmonë kthehet një përmbajtje statike, e kuptueshme për motorët e kërkimit.

Faqe interneti në NextJS

NextJS kombinon të dy qasjet. Kur përdoruesi shkruan URL-në direkt në shiritin e adresave, atij i kthehet përmbajtja statike e faqes.

Kur përdoruesi fillon të klikojë në lidhjet në faqen tonë të internetit, atëherë faqja e internetit nuk përditësohet plotësisht, por përmes AJAX-it ngarkohen të dhënat e nevojshme për përdoruesin.

Kur një motor kërkimi viziton faqen tonë, ai sheh përmbajtjen statike që i nevojitet. Kur përdoruesi lëviz nëpër faqen tonë të internetit, faqja jonë fillon të sillet si një SPA.

Dhe, më e rëndësishmja, NextJS e bën të gjithë këtë automatikisht! Ne nuk kemi nevojë të kujdesemi për këtë - ai do të bëjë gjithçka vetë. Bukuri!

Në mësimet në vijim do të kuptojmë, si ta bëjmë NextJS të punojë në mënyrën e përshkruar.