Увядзенне ў навігацыю ў NextJS

У даным раздзеле падручніка мы пагаворым аб працы спасылак у NextJS.

Для пачатку давайце абмеркуем, што такога асаблівага ў спасылках. Паглядзім на іх у розных падыходах да стварэння сайта.

Сайт на React

Няхай у вас ёсць сайт на React. Як вядома, React уяўляе сабой SPA - сайт, у якім карыстальнік заўсёды застаецца на адной старонцы. Вы можаце падключыць React Router і карыстальнік будзе думаць, што ходзіць па розных старонках, пры гэтым фізічна застаючыся на адным файле.

Пры гэтым карыстальнік будзе клікаць па спасылках, яму будзе здавацца, што ён трапляе на другую старонку, але старонка сайта ў браўзэры не будзе перазагружацца - React дынамічна будзе фармаваць тое, што карыстальнік бачыць на экране.

У такой схеме карыстальнік атрымлівае макет сайта пры першым заходзе на старонку, а затым часткі сайта проста мяняюцца праз JavaScript. Пры гэтым сайт можа запаўняць даныя з сервера праз AJAX.

Такі падыход зніжае нагрузку на хастынг (рэсурсы якога стаяць нашых грошай), а таксама нагрузку на інтэрнэт-канал юзера.

Але ў такога падыходу ёсць мінус - праблема з SEO. Нібыта ў сайта і ёсць набор спасылак, і ў адрасным радку што-то мяняецца, і можна нават скінуць спасылку на пэўную старонку сайта праз мэсэнджар. Аднак, змесціва старонкі фармуецца дынамічна на кліенце і пошукавікі не здольныя такое апрацаваць. Таму такі сайт прасоўвацца не будзе.

Не ўсе сайты, аднак, прызначаны для прасоўвання ў пошукавіках. І калі ваш не прызначаны, то даная схема цалкам працоўная для вас.

Сайт на бэку

Няхай ваш сайт зроблены на адным з моваў бэку. Напрыклад, на PHP.

У гэтым выпадку, калі карыстальнік будзе клікаць па спасылках, старонка сайта будзе кожны раз загружацца цалкам.

Праблема ў тым, што істотная частка старонкі ужо ёсць у юзера. Бо, як вы ўжо ведаеце, на старонцы звычайна мяняецца толькі кантэнт і метаданыя, а ўсё астатняе застаецца нязменным.

Нашто ж нам спампоўваць астатняе, калі памяняўся толькі кантэнт? Гэта стварае павышаную нагрузку на сервер і інтэрнэт-канал.

Ёсць яшчэ праблема. Няхай на старонцы, якую мы атрымліваем, у кантэнце размешчаны спіс прадуктаў, як у інтэрнэт магазіне. Відавоўчна, што кожны прадукт мае аднолькавую вёрстку. Больш аптымальна было б спампаваць толькі даныя прадуктаў, і шаблон вываду прадукта. І затым на кліенце вывесці кожны прадукт у гэтым шаблоне. Але мы спампоўваем прадукты разам з якая паўтараецца вёрсткай прадукта.

Рэзюмуючы, калі ў нас сайт на чыстым бэку, мы гоняем па сетцы шмат лішніх даных.

Аднак, у гэтым выпадку мы не маем праblemы з SEO. Па запытаным URL заўсёды аддаецца статычнае змесціва, зразумелае пошукавікам.

Сайт на NextJS

NextJS камбінуе абодва падыходу. Калі карыстальнік убівае URL прама ў адрасны радок, то яму ў адказ прыходзіць статычнае змесціва старонкі.

Калі ж карыстальнік пачынае клікаць па спасылках на нашым сайце, то старонка сайта не абнаўляецца цалкам, а праз AJAX падгружаецца патрэбныя юзеру даныя.

Калі пошукавік ходзіць па нашым сайце, ён бачыць патрэбнае яму статычнае змесціва. А калі юзер ходзіць па нашым сайце, наш сайт пачынае весці сябе падобна да SPA.

І, самае галоўнае, NextJS прадзяляе ўсё гэта аўтаматычна! Нам не трэба клапаціцца пра гэта - ён усё зробіць сам. Прыгажосць!

У наступных уроках мы будзем разбірацца, як NextJS прымусіць працаваць апісаным чынам.