Вовед во навигација во NextJS

Во овој дел од учебникот ќе зборуваме за работата на врските во NextJS.

За почеток, да разговараме што е толку посебно кај врските. Ќе ги погледнеме нив во различни пристапи за создавање на веб-сајт.

Веб-сајт на React

Да претпоставиме дека имате веб-сајт на React. Како што е познато, React претставува SPA - веб-сајт во кој корисникот секогаш останува на една страница. Можете да го поврзете React Router и корисникот ќе мисли дека се движи по различни страници, додека физички останува на една датотека.

При тоа, корисникот ќе кликнува на врски, ќе му се чини дека стигнува на друга страница, но страницата на веб-сајтот во прелистувачот нема да се вчитува повторно - React динамички ќе го формира тоа што корисникот го гледа на екранот.

Во таквата шема, корисникот ја добива структурата на веб-сајтот при првото влегување на страницата, а потоа деловите од веб-сајтот едноставно се менуваат преку JavaScript. Притоа, веб-сајтот може да бара податоци од серверот преку AJAX.

Таквиот пристап ја намалува оптовареноста на хостингот (чиишто ресурси чинат наши пари), како и оптовареноста на интернет-каналот на корисникот.

Но, овој пристап има недостаток - проблем со SEO. Иако веб-сајтот има збир на врски, и во адресната линија нешто се менува, и дури може да се испрати врска до одредена страница на веб-сајтот преку месеџер. Сепак, содржината на страницата се формира динамички на клиентот и пребарувачите не се способни да ја обработат таквата. Затоа, таков веб-сајт нема да се промовира.

Не сите веб-сајтови, сепак, се наменети за промоција во пребарувачи. И ако вашиот не е наменет, тогаш оваа шема е сосема работна за вас.

Веб-сајт на бекенд

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

Во овој случај, кога корисникот ќе кликнува на врски, страницата на веб-сајтот ќе се вчитува целосно секој пат.

Проблемот е во тоа што значителен дел од страницата веќе го има кај корисникот. Бидејќи, како што веќе знаете, на страницата обично се менува само содржината и метаподатоците, а сè останато останува непроменето.

Зошто тогаш да го преземаме остатокот, ако се променил само содржината? Ова создава зголемена оптовареност на серверот и интернет-каналот.

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

Да сумираме, ако имаме веб-сајт на чист бекенд, ние пренесуваме преку мрежата многу непотребни податоци.

Сепак, во овој случај немаме проблем со SEO. За секој побарано URL секогаш се враќа статична содржина, разбирлива за пребарувачите.

Веб-сајт на NextJS

NextJS ги комбинира двата пристапа. Кога корисникот директно го внесува URL во адресната линија, тогаш како одговор му се враќа статична содржина на страницата.

Кога корисникот почнува да кликнува на врските на нашиот веб-сајт, тогаш страницата на веб-сајтот не се вчитува целосно, туку преку AJAX се вчитуваат потребните податоци за корисникот.

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

И, најважно од сè, NextJS ја изведува сета оваа работа автоматски! Нам не ни треба да се грижиме за ова - тој сè ќе го направи сам. Убавина!

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