Úvod do navigácie v NextJS

V tejto časti učebnice budeme hovoriť o funkcii odkazov v NextJS.

Na začiatok poďme diskutovať o tom, čo je také špeciálne na odkazoch. Pozrieme sa na nich v rôznych prístupoch k tvorbe webstránok.

Webstránka v Reacte

Povedzme, že máte webstránku v Reacte. Ako viete, React predstavuje SPA - webstránku, v ktorej používateľ vždy ostáva na jednej stránke. Môžete pripojiť React Router a používateľ si bude myslieť, že prechádza po rôznych stránkach, pričom fyzicky ostáva na jednom súbore.

Zároveň bude používateľ klikať na odkazy, bude sa mu zdať, že sa dostáva na inú stránku, ale stránka webu v prehliadači sa nebude znovu načítavať - React bude dynamicky formovať to, čo používateľ vidí na obrazovke.

V takejto schéme používateľ dostane layout stránky pri prvom vstupe na stránku, a potom sa časti stránky jednoducho menia cez JavaScript. Zároveň môže webstránka žiadať dáta zo servera cez AJAX.

Tento prístup znižuje záťž na hosting (ktorých zdroje stoja naše peniaze), ako aj záťž na internetovom kanáli používateľa.

Ale tento prístup má nevýhodu - problém s SEO. Akoby web mal množstvo odkazov, a v adresnom riadku sa niečo mení, a dokonca môžete poslať odkaz na konkrétnu stránku webu cez messenger. Avšak obsah stránky sa formuje dynamicky na klientovi a vyhľadávače to nie sú schopné spracovať. Preto takýto web sa nebude dať propagovať.

Nie všetky weby sú však určené na propagáciu vo vyhľadávačoch. A ak váš nie je určený, tak táto schéma je pre vás celkom funkčná.

Webstránka na backende

Povedzme, že váš web je vytvorený v jednom z backendových jazykov. Napríklad v PHP.

V tomto prípade, keď používateľ klikne na odkazy, stránka webu sa bude zakaždým načítať celá.

Problém je v tom, že podstatná časť stránky užívateľ už má. Veď, ako už viete, na stránke sa zvyčajne mení iba obsah a metadáta, a všetko ostatné zostáva nezmenené.

Načo nám je sťahovať zvyšok, ak sa zmenil iba obsah? To vytvára zvýšené zaťaženie servera a internetového kanála.

Je tu ešte jeden problém. Povedzme, že na stránke, ktorú dostaneme, je v obsahu umiestnený zoznam produktov, ako v internetovom obchode. Je zrejmé, že každý produkt má rovnakú verziu. Bolo by optimálnejšie sťahovať iba údaje o produktoch a šablónu na výstup produktu. A potom na klientovi zobraziť každý produkt v tejto šablóne. Ale my sťahujeme produkty spolu s opakujúcou sa verziou produktu.

Ak zhrnieme, ak máme web na čistom backende, prenášame cez sieť veľa nadbytočných údajov.

Avšak, v tomto prípade nemáme problém s SEO. Pri požadovanom URL sa vždy vráti statický obsah, ktorý vyhľadávačom rozumejú.

Webstránka na NextJS

NextJS kombinuje oba prístupy. Keď používateľ zadá URL priamo do adresného riadka, v odpovedi dostane statický obsah stránky.

Keď však používateľ začne klikať na odkazy na našej webstránke, stránka webu sa neobnoví celá, ale cez AJAX sa načítajú potrebné údaje pre používateľa.

Keď vyhľadávač prechádza po našej webstránke, vidí pre neho potrebný statický obsah. A keď používateľ prechádza po našej webstránke, náš web sa začne správať ako SPA.

A, čo je najdôležitejšie, NextJS to všetko vykonáva automaticky! My sa o to nemusíme starať - on to všetko urobí sám. Krása!

V nasledujúcich lekciách budeme skúmať, ako donútiť NextJS pracovať opísaným spôsobom.