Bevezetés a navigációba NextJS-ben
Az oktatóanyag ebben a részében a linkek működéséről fogunk beszélni a NextJS-ben.
Kezdetként beszéljük meg, mi olyan különleges a linkekben. Nézzük meg őket a weboldalkészítés különböző módszereiben.
Weboldal Reacten
Tegyük fel, van egy weboldalad Reacten. Mint ismeretes, a React egy SPA - egy olyan weboldal, ahol a felhasználó mindig egy oldalon marad. Csatlakoztathatsz React Routert és a felhasználó azt fogja hinni, hogy különböző oldalak között navigál, miközben fizikailag egy fájlon marad.
Eközben a felhasználó kattintani fog a linkekre, neki úgy tűnik, mintha egy másik oldalra kerülne, de a weboldal a böngészőben nem frissül újra - a React dinamikusan fogja összeállítani azt, amit a felhasználó a képernyőn lát.
Ebben a sémában a felhasználó a weboldal makettjét kapja meg az első oldalbetöltéskor, majd a weboldal részei egyszerűen megváltoznak JavaScript segítségével. Eközben a weboldal kérhet adatokat a szerverről AJAX-on keresztül.
Ez a megközelítés csökkenti a hosting terhelését (amelynek erőforrásai pénzünkbe kerülnek), valamint a felhasználó internetcsatornájának terhelését.
De ennek a megközelítésnek van egy hátránya - az SEO probléma. Mintha a weboldalnak lenne egy linkgyűjteménye, és a címsorban valami változik, és akár elküldheted a weboldal egy adott oldalára mutató linket egy messengerben. Azonban az oldal tartalma dinamikusan jön létre a kliens oldalon, és a keresők nem tudják ezt feldolgozni. Ezért egy ilyen weboldal nem fog jól szerepelni a keresőkben.
Nem minden weboldal azonban készül keresőmotorokban való előtérbe helyezésre. És ha a tiéd nem az, akkor ez a séma teljesen működőképes a számodra.
Weboldal backenden
Tegyük fel, hogy a weboldalad egy backend nyelvre épül. Például PHP-ra.
Ebben az esetben, amikor a felhasználó a linkekre kattint, a weboldal minden alkalommal teljesen újratöltődik.
A probléma az, hogy a felhasználónak már megvan az oldal jelentős része. Hiszen, mint már tudod, egy oldalon általában csak a tartalom és a metaadatok változnak, minden más változatlan marad.
Miért kellene akkor letöltenünk minden mást, ha csak a tartalom változott? Ez megnövelt terhelést jelent a szerverre és az internetcsatornára.
Van egy másik probléma is. Tegyük fel, hogy az oldalon, amit kapunk, a tartalomban található egy terméklista, mint egy webshopban. Nyilvánvaló, hogy minden termék ugyanazzal a HTML kóddal rendelkezik. Optimálisabb lenne letölteni csak a termékek adatait, és a termék megjelenítésének sablonját. Majd a kliens oldalon megjeleníteni az egyes termékeket ebben a sablonban. De mi a termékeket a ismétlődő HTML kóddal együtt töltjük le.
Összefoglalva, ha a weboldalunk tiszta backendre épül, sok felesleges adatot továbbítunk a hálózaton.
Ebben az esetben azonban nincs problémánk az SEO-val. A kért URL mindig statikus tartalmat szolgál ki, amelyet a keresők is értenek.
Weboldal NextJS-en
A NextJS kombinálja mindkét megközelítést. Amikor a felhasználó közvetlenül beírja az URL-t a címsorba, akkor válaszként statikus oldaltartalmat kap.
Amikor viszont a felhasználó a weboldalunkon lévő linkekre kezd kattintani, akkor az oldal nem töltődik be teljesen újra, hanem AJAX-on keresztül töltődik be a felhasználó számára szükséges adat.
Amikor a kereső járja a weboldalunkat, ő a számára szükséges statikus tartalmat látja. Amikor pedig a felhasználó járja a weboldalunkat, a weboldalunk úgy kezd viselkedni, mint egy SPA.
És, ami a legfontosabb, a NextJS mindezt automatikusan megteszi! Nekünk nem kell ezzel törődnünk - ő megcsinálja mindet. Csodás!
A következő leckékben azt fogjuk részletezni, hogyan kell a NextJS-t a leírt módon működésre bírni.
