Увод у навигацију у NextJS

У овом делу приручника ћемо разговарати о раду линкова у NextJS.

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

Сajт на React-у

Претпоставимо да имате сајт направљен у React-у. Како је познато, React представља SPA - сајт на којем корисник увек остаје на једној страници. Можете да укључите React Router и корисник ће мислити да прелази са странице на страницу, иако физички остаје на једном фајлу.

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

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

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

Али такав приступ има недостатак - проблем са SEO-ом. Иако сајт има скуп линкова, и у адресној линији се нешто мења, и чак можете да пошаљете линк на одређену страницу сајта преко месенџера. Међутим, садржај странице се формира динамички на клијенту и претраживачи нису способни да то обраде. Због тога такав сајт се неће промовисати.

Није сваки сајт, међутим, намењен за промоцију у претраживачима. И ако ваш није намењен, онда је ова шема сасвим радна за вас.

Сajт на бекенду

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

У том случају, када корисник буде кликао на линкове, страница сајта ће се сваки пут у целости учитати.

Проблем је у томе што корисник већ има значајан део странице. Јер, као што већ знате, на страници се обично мења само садржај и мета подаци, а све остало остаје непромењено.

Зашто онда да преузимамо остало, ако се променио само садржај? То ствара повећано оптерећење на сервер и интернет канал.

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

Да резимирамо, ако имамо сајт на чистom бекенду, ми шаљемо преко мреже много непотребних података.

Међутим, у овом случају немамо проблем са SEO-ом. На захтевани URL увек се враћа статички садржај, разумљив претраживачима.

Сajт на NextJS-у

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

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

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

И, што је најважније, NextJS изводи све ово аутоматски! Нама није потребно да се бринемо о томе - он ће све то учинити сам. Дивно!

У следећим лекцијама ћемо се бавити тиме како натерати NextJS да ради на описани начин.