NextJS-те навигацияға кіріспе

Бұл оқулық бөлімінде біз NextJS-тегі сілтемелердің жұмысы туралы сөйлесеміз.

Алдымен, сілтемелердің ерекшелігі неде соны талқылайық. Оларға әртүрлі сайт жасау тәсілдерінде қарайық.

React-тегі сайт

Сізде React-те жасалған сайт бар делік. Белгілі болғандай, React SPA болып табылады - пайдаланушы әрқашан бір бетте қалатын сайт. Сіз React Router қоса аласыз және пайдаланушы әртүрлі беттерге өтіп жүргендей сезінеді, бірақ физикалық түрде бір файлда қалады.

Бұл ретте пайдаланушы сілтемелерді басады, ол басқа бетке өткендей сезінеді, бірақ сайт беті шолғышта толығымен жаңармайды - React пайдаланушының экранда көргенін динамикалық түрде құрастырады.

Мұндай схемада пайдаланушы сайттың макетін бетке бірінші рет кіргенде алады, содан кейін сайттың бөліктері жай ғана JavaScript арқылы өзгереді. Сонымен бірге сайт серверден деректерді AJAX арқылы сұрай алады.

Мұндай тәсіл хостингке түсетін жүктемені азайтады (біздің ақшамыз тұратын ресурстар), сонымен қатар пайдаланушының интернет-каналына түсетін жүктемені.

Бірақ мұндай тәсілдің кемшілігі бар - SEO мәселесі. Сайтта сілтемелер жиынтығы бар сияқты, және мекенжай жолында бірнәрсе өзгереді, және тіпті мессенджер арқылы сайттың белгілі бір бетіне сілтемені жібере аласыз. Алайда, беттің мазмұны клиентте динамикалық түрде құрастырылады және іздеу жүйелері мұны өңдей алмайды. Сондықтан мұндай сайт ілгерлемейді.

Алайда, барлық сайттар іздеу жүйелерінде ілгерлеу үшін жасалмайды. Егер сіздікі үшін арналмаса, онда бұл схема сізге толығымен жарамды.

Бэкендтегі сайт

Сіздің сайтыңыз бэкендтің бір тілінде жасалған делік. Мысалы, PHP-де.

Бұл жағдайда, пайдаланушы сілтемелерді басқан сайын, сайт беті әр жолы толығымен жүктеледі.

Мәселе мынада, беттің айтарлықтай бөлігі пайдаланушыда қазірдің өзінде бар. Өйткені, сіз білетіндей, бетте әдетте тек контент және метадеректер өзгереді, ал қалғанының бәрі өзгеріссіз қалады.

Тек контент өзгергенде, қалғанын неге жүктеп алуымыз керек? Бұл серверге және интернет-каналға артық жүктемені тудырады.

Тағы бір мәселе бар. Біз алатын бетте контентте интернет-дүкендегідей өнімдер тізімі орналасқан делік. Әлбетте, әрбір өнім бірдей версткаға ие. Өнімдердің тек деректерін, және шығару үшін қаланғысын жүктеп алу оңтайлырақ болар еді. Содан кейін клиентте әрбір өнімді осы қаланғыда көрсету. Бірақ біз өнімдерді өнім версткасын қайталап жүктейміз.

Қорытындылай келе, егер бізде таза бэкендтегі сайт болса, біз желі арқылы көп артық деректерді жібереміз.

Алайда, бұл жағдайда бізде SEO мәселесі болмайды. Сұраныс бойынша URL әрқашан іздеу жүйелеріне түсінікті статикалық мазмұнды қайтарады.

NextJS-тегі сайт

NextJS екі тәсілді де біріктіреді. Пайдаланушы мекенжай жолына URL-ді тікелей енгізгенде, оған беттің статикалық мазмұны жауап ретінде келеді.

Ал пайдаланушы біздің сайттағы сілтемелерді бастаған кезде, сайт беті толығымен жаңармайды, бірақ AJAX арқылы пайдаланушыға қажетті деректер жүктеледі.

Іздеу жүйесі біздің сайт бойынша жүрген кезде, ол өзіне қажетті статикалық мазмұнды көреді. Ал пайдаланушы біздің сайт бойынша жүрген кезде, біздің сайт SPA сияқты әрекет ете бастайды.

Және, ең бастысы, NextJS мұның бәрін автоматты түрде орындайды! Бізге бұл туралы аланданудың қажеті жоқ - ол бәрін өзі жасайды. Тамаша!

Келесі сабақтарда біз NextJS-ті жоғарыда сипатталған тәсілмен жұмыс істеуге қалай мәжбүрлейтінімізді үйренеміз.