NextJS да навигациясига кириш

Ущбу ўкув қўлланманинг булимида биз NextJS да ссылкаларнинг иши ҳақида гапирамиз.

Бошлаш учун, ссылкаларда нима аложида эканини муҳокама қилайлик. Уларни вебсаёт яратишнинг турли ёндашувларида кўриб чиқайлик.

React даги вебсаёт

Сизда React даги вебсаёт бор деб фараз қилайлик. Маълумки, React SPA ни тақдим этади - фойдаланувчи ҳар доим битта саҳифада қоладиган вебсаёт. Сиз React Router ни уласангиз ва фойдаланувчи турли саҳифаларда юришини ўйлайди, шу билан бирга физик жиҳатдан битта файлда қолади.

Шу билан бирга фойдаланувчи ссылкалар босишни давом эттиради, у бошқа саҳифага ўтганини ҳис қилади, лекин браузердаги вебсаёт саҳифаси қайта юкланмайди - React фойдаланувчи экранда кўрадиган нарсани динамик равишда шакллантиради.

Бундай схемада фойдаланувчи саҳифага биринчи марта кирганда вебсаёт макетини олади, сўнгра вебсаётнинг қисмлари жойи ўзгариб туради JavaScript орқали. Шу билан бирга вебсаёт сервердан маълумотларни AJAX орқали сўраши мумкин.

Бундай ёндашув хостингга бўлган юкни камайтиради (қандайдир ресурслар пулимиз туради), шунга ўхшаш фойдаланувчининг интернет-каналига бўлган юк.

Лекин бундай ёндашувнинг камчилиги бор - SEO билан муаммо. Гуёки вебсаётда ссылкалар тўплами бор, ва манзил сатрида бирор нарса ўзгаради, ва хаттоки месседжер орқали вебсаётнинг маълум саҳифасига ссылкани ташлаш мумкин. Бирок, саҳифанинг муҳтасими клиент томонида динамик равишда шакллантирилади ва изловчилар буни қайта ишлашга қодир эмас. Шу сабабдан бундай вебсаёт ишламайди.

Бирок, ҳамма вебсаётлар изловчиларда ишлаш учун маяқланган эмас. Ва агар сизники маяқланмаган бўлса, бу схема сиз учун ишлайди.

Бекенд даги вебсаёт

Сизнинг вебсаётингиз бекенд тилларининг бирида яратилган деб фараз қилайлик. Масалан, PHP да.

Бунда холда, фойдаланувчи ссылкаларни босганда, вебсаёт саҳифаси ҳар сафар тўлиқ юкланadi.

Муаммо шундаки, саҳифанинг муҳим қисми аллақачон фойдаланувчида бор. Чунки, сиз allaqachon bilasiz, саҳифада оддатда фақат контент ва метамаълумотлар ўзгаради, ва қолган ҳамма нарса ўзгармас қолади.

Нега биз қолган нарсани юклаймиз, агар ўзгарган бошқа контент? Бу серверга ва интернет-каналга бўлган юкни оширади.

Яна бир муаммо бор. Саҳифада, биз оладиган, контентда интернет дўконндаги каби махсулотлар рўйхати жойлашган деб фараз қилайлик. Аниқки, ҳар бир махсулот бир хил версткага эга. Яна оптималроқ бу махсулотларнинг фақат маълумотларини, ва махсулотни чиқариш учун шаблонни юклаш буларди. Сўнгра клиентда ҳар бир махсулотни ушбу шаблонда чиқариш. Лекин биз махсулотларни такрорланувчи махсулот версткаси билан бирга юклаймиз.

Хулоса, агар бизда тоза бекенддаги вебсаёт бўлса, биз тармокда кўп ортиқча маълумотларни юборамиз.

Бирок, бунда холда бизда SEO билан муаммо бўлмайди. Сўралган URL учун ҳар доим статик муҳтасим қайтарилади, изловчиларга тушунарли.

NextJS даги вебсаёт

NextJS иккала ёндашувни ҳам бирлаштиради. Фойдаланувчи манзил сатрига URL ни тўғридан-тўғри киритганда, унга жавобан саҳифанинг статик муҳтасими келади.

Фойдаланувчи бизнинг вебсаётимиздаги ссылкаларни босishni бошлаганда, вебсаёт саҳифаси тўлиқ янгиланмайди, балки AJAX орқали керакли фойдаланувчи маълумотлари юкланadi.

Изловчи бизнинг вебсаётимиз бўйлаб юрганда, у ўзи учун керакли статик муҳтасимни кўради. Фойдаланувчи бизнинг вебсаётимиз бўйлаб юрганда, бизнинг вебсаётимиз SPA га ўхшаш хат-харакат қила бошлайди.

Ва, энг муҳими, NextJS буни автоматик равишда бажаради! Биз бу ҳақда қайғурмашимиз керак эмас - у ҳаммасини ўзи бажаради. Чиройли!

Кейинги дарсларда биз NextJS ни тавсифланган усулда ишлатишни ўрганамиз.