Introducere în navigația în NextJS

În această secțiune a manualului vom vorbi despre funcționarea linkurilor în NextJS.

Pentru început, să discutăm ce este atât de special la linkuri. Să le analizăm în diferite abordări de creare a site-urilor web.

Site pe React

Să presupunem că ai un site pe React. După cum se știe, React reprezintă un SPA - un site în care utilizatorul rămâne întotdeauna pe o singură pagină. Poți conecta React Router și utilizatorul va crede că navighează pe pagini diferite, în timp ce rămâne fizic pe un singur fișier.

În acest caz, utilizatorul va face clic pe linkuri, iar lui i se va părea că ajunge pe o altă pagină, dar pagina site-ului în browser nu se va reîmprospăta - React va forma dinamic ceea ce utilizatorul vede pe ecran.

În această schemă, utilizatorul primește layout-ul site-ului la prima accesare a paginii, iar apoi părțile site-ului se schimbă pur și simplu prin JavaScript. În acest timp, site-ul poate solicita date de la server prin AJAX.

Această abordare reduce încărcarea pe hosting (a cărui resurse ne costă bani), precum și încărcarea pe canalul de internet al utilizatorului.

Dar această abordare are un minus - problema cu SEO. Se pare că site-ul are un set de linkuri, iar în bara de adrese se schimbă ceva, și poți chiar să trimiți un link către o anumită pagină a site-ului prin messenger. Cu toate acestea, conținutul paginii este format dinamic pe client și motoarele de căutare nu sunt capabile să îl proceseze. De aceea, un astfel de site nu se va promova.

Nu toate site-urile, însă, sunt destinate promovării în motoarele de căutare. Și dacă al tău nu este destinat, atunci această schemă este destul de funcțională pentru tine.

Site pe backend

Să presupunem că site-ul tău este făcut pe unul dintre limbajele de backend. De exemplu, pe PHP.

În acest caz, când utilizatorul va face clic pe linkuri, pagina site-ului se va reîmprospăta de fiecare dată în întregime.

Problema este că o parte substanțială a paginii este deja la utilizator. La urma urmei, după cum știi deja, pe pagină se schimbă de obicei doar conținutul și metadatele, iar restul rămâne neschimbat.

De ce să încărcăm restul, dacă s-a schimbat doar conținutul? Acest lucru creează o încărcare crescută pe server și pe canalul de internet.

Mai există o problemă. Să presupunem că pe pagina, pe care o primim, în conținut este plasată o listă de produse, ca într-un magazin online. Evident, fiecare produs are același layout. Ar fi mai optim să descărcăm doar datele produselor și șablonul de afișare a produsului. Și apoi pe client să afișăm fiecare produs în acest șablon. Dar noi descărcăm produsele împreună cu layout-ul repetat al produsului.

Rezumând, dacă avem un site pe backend pur, transmitem prin rețea multe date inutile.

Cu toate acestea, în acest caz nu avem probleme cu SEO. La URL-ul solicitat întotdeauna este returnat un conținut static, ușor de înțeles pentru motoarele de căutare.

Site pe NextJS

NextJS combină ambele abordări. Când utilizatorul introduce URL-ul direct în bara de adrese, atunci ca răspuns primește conținutul static al paginii.

Când însă utilizatorul începe să facă clic pe linkurile de pe site-ul nostru, atunci pagina site-ului nu se reîmprospătează în întregime, ci prin AJAX se încarcă datele necesare utilizatorului.

Când motorul de căutare navighează pe site-ul nostru, el vede conținutul static de care are nevoie. Iar când utilizatorul navighează pe site-ul nostru, site-ul nostru începe să se comporte ca un SPA.

Și, cel mai important, NextJS realizează toate acestea automat! Nu trebuie să ne îngrijorăm de asta - el va face totul singur. Frumusețe!

În lecțiile următoare vom analiza cum să facem ca NextJS să funcționeze în modul descris.