Úvod do navigace v NextJS

V této části učebnice si povíme o práci odkazů v NextJS.

Nejprve si pojďme vysvětlit, co je tak zvláštního na odkazech. Podíváme se na ně v různých přístupech k tvorbě webu.

Web na Reactu

Předpokládejme, že máte web na Reactu. Jak známo, React představuje SPA - web, ve kterém uživatel vždy zůstává na jedné stránce. Můžete připojit React Router a uživatel bude mít dojem, že přechází na různé stránky, přičemž fyzicky zůstává na jednom souboru.

Při tom bude uživatel klikat na odkazy, bude se mu zdát, že se dostává na jinou stránku, ale stránka webu v prohlížeči se nebude znovu načítat - React bude dynamicky formovat to, co uživatel vidí na obrazovce.

V tomto schématu uživatel obdrží vzhled webu při prvním vstupu na stránku, a poté se části webu jednoduše mění pomocí JavaScriptu. Přitom web může žádat data ze serveru přes AJAX.

Tento přístup snižuje zátěž na hosting (jehož zdroje stojí naše peníze), a také zátěž na internetové připojení uživatele.

Ale tento přístup má mínus - problém s SEO. Jako by web měl sadu odkazů, a v adresním řádku se něco mění, a lze dokonce poslat odkaz na konkrétní stránku webu přes messenger. Avšak obsah stránky se formuje dynamicky na klientovi a vyhledávače to nejsou schopny zpracovat. Proto takový web nebude možné propagovat.

Ne všechny weby jsou však určeny pro propagaci ve vyhledávačích. A pokud váš není určen, tak toto schéma je pro vás zcela funkční.

Web na backendu

Předpokládejme, že váš web je vytvořen na jednom z backendových jazyků. Například na PHP.

V tomto případě, když uživatel klikne na odkazy, stránka webu bude pokaždé načtena celá.

Problém je v tom, že podstatná část stránky už je u uživatele. Vždyť, jak již víte, na stránce se obvykle mění pouze obsah a metadata, a vše ostatní zůstává nezměněno.

Proč bychom měli stahovat vše ostatní, pokud se změnil pouze obsah? To vytváří zvýšenou zátěž na server a internetové připojení.

Je tu ještě problém. Předpokládejme, že na stránce, kterou obdržíme, je v obsahu umístěn seznam produktů, jako v internetovém obchodě. Je zřejmé, že každý produkt má stejnou verštku. Bylo by optimalnější stáhnout pouze data produktů a šablonu pro zobrazení produktu. A poté na klientovi zobrazit každý produkt v této šabloně. Ale my stahujeme produkty spolu s opakující se verštkou produktu.

Shrnutím, pokud máme web na čistém backendu, přenášíme po síti mnoho nadbytečných dat.

Avšak v tomto případě nemáme problém s SEO. Na požadovaný URL je vždy vrácen statický obsah, srozumitelný pro vyhledávače.

Web na NextJS

NextJS kombinuje oba přístupy. Když uživatel zadá URL přímo do adresního řádku, je mu v odpovědi vrácen statický obsah stránky.

Když však uživatel začne klikat na odkazy na našem webu, stránka webu se neobnovuje celá, ale přes AJAX se načtou potřebná data uživatele.

Když vyhledávač prochází náš web, vidí pro něj potřebný statický obsah. A když uživatel prochází náš web, náš web se začne chovat podobně jako SPA.

A, co je nejdůležitější, NextJS toto vše provádí automaticky! My se o to nemusíme starat - on vše udělá sám. Krása!

V následujících lekcích budeme zkoumat, jak donutit NextJS pracovat popsaným způsobem.