Въведение в навигацията в NextJS

В този раздел от учебника ще говорим за работата на връзките в NextJS.

Като начало нека обсъдим какво е толкова специално при връзките. Ще ги разгледаме в различните подходи за създаване на уебсайт.

Сайт на React

Да приемем, че имате сайт на React. Както е известно, React представлява SPA - сайт, в който потребителят винаги остава на една страница. Можете да подключите React Router и потребителят ще си мисли, че навигира по различни страници, като въпреки това физически остава на един файл.

При това потребителят ще клика по връзки, ще му се струва, че попада на друга страница, но страницата на сайта в браузъра няма да се презарежда - React динамично ще формира това, което потребителят вижда на екрана.

При такава схема потребителят получава макета на сайта при първото навлизане в страницата, а след това части от сайта просто се променят чрез JavaScript. При това сайтът може да заявява данни от сървъра чрез AJAX.

Такъв подход намалява натоварването на хостинга (чиито ресурси струват нашите пари), както и натоварването на интернет канала на потребителя.

Но този подход има недостатък - проблем с SEO. Все едно сайтът има набор от връзки, и в адресния ред нещо се променя, и дори може да се изпрати връзка към конкретна страница на сайта чрез месенджър. Въпреки това, съдържанието на страницата се формира динамично на клиента и търсачките не са способни да го обработят. Затова такъв сайт няма да се позиционира добре.

Не всички сайтове обаче са предназначени за позициониране в търсачките. И ако вашият не е предназначен, то тази схема е напълно работеща за вас.

Сайт на бекенд

Да приемем, че вашият сайт е направен на един от езиците за бекенд. Например, на PHP.

В този случай, когато потребителят клика по връзки, страницата на сайта ще се зарежда нацяло всеки път.

Проблемът е, че съществена част от страницата вече е налична при потребителя. Ведь, както вече знаете, на страницата обикновено се променя само съдържанието и метаданните, а всичко останало остава непроменено.

Защо тогава да изтегляме останалото, ако се е променило само съдържанието? Това създава повишено натоварване на сървъра и интернет канала.

Има още един проблем. Да приемем, че на страницата, която получаваме, в съдържанието е разположен списък с продукти, както в онлайн магазин. Очевидно е, че всеки продукт има еднаква верстка. По-оптимално би било да се изтеглят само данните за продуктите и шаблона за извеждане на продукта. И след това на клиента да се изведе всеки продукт в този шаблон. Но ние изтегляме продуктите заедно с повторящата се верстка на продукта.

Обобщавайки, ако имаме сайт на чист бекенд, ние прехвърляме по мрежата много излишни данни.

Въпреки това, в този случай нямаме проблем с SEO. При заявен URL винаги се връща статично съдържание, разбираемо за търсачките.

Сайт на NextJS

NextJS комбинира и двата подхода. Когато потребителят въведе URL директно в адресния ред, то в отговор му се връща статично съдържание на страницата.

Когато обаче потребителят започне да клика по връзките на нашия сайт, то страницата на сайта не се обновява изцяло, а чрез AJAX се зареждат необходимите на потребителя данни.

Когато търсачката обикаля нашия сайт, тя вижда нужното й статично съдържание. А когато потребителят обикаля нашия сайт, нашият сайт започва да се държи като SPA.

И, най-важното, NextJS извършва всичко това автоматично! На нас не ни е нужно да се грижим за това - той ще направи всичко сам. Красота!

В следващите уроци ще разбираме как да накараме NextJS да работи по описания начин.