NextJS'те навигацияга киришүү

Бул окуу куралынын бөлүгүндө биз NextJS'теги шилтемелердин иштеши жөнүндө сүйлөшөбүз.

Башында, шилтемелерде эмне айрыкча болуп турганын талкуулайлы. Аларды сайт түзүүнүн ар кандай ыкмаларында карап көрөлү.

React'теги сайт

Сизде React'те сайт бар деп коёлу. Билгендей, React SPA - бир баракчада колдонуучу ар дайым кала берген сайтты түзөт. Сиз React Router туташтырып, колдонуучу ар кандай баракчаларды кыдырып жаткан сыяктуу сезип, физикалык жактан бир файлда кала берсе болот.

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

Мына ушундай схемада колдонуучу сайттын макетин биринчи жолу баракчага киргенде алат, анан сайттын бөлүктөрү JavaScript аркылуу өзгөрөт. Бул учурда сайт AJAX аркылуу серверден берилмелерди сураса болот.

Бул ыкма хостингге болгон жүктөөнү азайтат (анын ресурстары биздин акчабыздын баасында), ошондой эле колдонуучунун интернет-каналына болгон жүктөөнү да.

Бирок бул ыкманын кемчилиги бар - SEO менен маселе. Сайтта шилтемелердин топтому бар сыяктуу, дарек сабында бир нерсе өзгөрөт, жана мессенжер аркылуу белгилүү бир сайт баракчасына шилтеме таштаса болот. Бирок, баракчанын мазмуну клиентте динамикалык түрдө түзүлөт жана издөө системдери аны иштете албайт. Ошондуктан мындай сайт жайылбайт.

Бирок, бардык сайттар издөө системдеринде жайылтуу үчүн эмес. Эгер сиздики мындай эмес болсо, анда бул схема сиз үчүн иштөөчү.

Бэк-энддеги сайт

Сиздин сайтыңыз бэк-энддин бир тилинде жасалсын деп коёлу. Мисалы, PHP'де.

Бул учурда, колдонуучу шилтемелерди чыкылдаганда, сайт баракчасы ар жолу толугу менен жүктөлөт.

Маселе мында, баракчанын көлөмдүү бөлүгү колдонуучуда мурунтан эле бар экендигинде. Анткени, сиз буга чейин билгендей, аракчада адатта мазмун гана өзгөрөт жана метаберилмелер, ал эми калган баары өзгөрбөй калат.

Анда мазмун гана өзгөргөндө, бизге эмне үчүн калганын жүктөп алуу керек? Бул серверге жана интернет-каналга көбөйтүлгөн жүктөмө түзөт.

Дагы бир маселе бар. Биз ала турган баракчада, мазмунда интернет-дүкөндөгүдөй продукттардын тизмеси жайгаштырылган болсун. Ачык-айдан, ар бир продукт бирдей версткага ээ. Андан да оптималдуу болмок продукттардын берилмелерин гана, жана продуктту чыгаруунун үлгүсүн жүктөп алуу. Анан клиентте ар бир продуктту ушул үлгүдө чыгаруу. Бирок биз продукттарды продукттун кайталанма версткасы менен чогуу жүктөп алабыз.

Кыскасы, эгер бизде таза бэк-энддеги сайт болсо, биз тармак аркылуу көп ашыкча берилмелерди жөнөтөбүз.

Бирок, бул учурда бизде SEO менен маселе болбойт. Суралган URL'ге ар дайым издөө системдери үчүн түшүнүктүү статикалык мазмун берилет.

NextJS'теги сайт

NextJS экөөнүн ыкмасын айкалыштырат. Колдонуучу дарек сабына URL'ди түз эле жазганда, анын жообунда баракчанын статикалык мазмуну келет.

Ал эми колдонуучу биздин сайттагы шилтемелерди чыкылдатып баштанда, сайттын баракчасы толугу менен жаңырбайт, тескерисинче AJAX аркылуу колдонуучуга керектуү берилмелер жүктөлөт.

Издөө системи биздин сайтты кыдырганда, ага керектуү статикалык мазмунду көрөт. Ал эми колдонуучу биздин сайтты кыдырганда, биздин сайт SPA'га окшош иштей баштайт.

Жана, эң башкысы, NextJS мунун баарын автоматтык түрдө жасайт! Бизге бул жөнүндө кабатыр болуштун кереги жок - ал баарын өзү жасайт. Сулуу!

Кийинки сабактарда биз NextJS'ти сүрөттөлгөн образда иштетүүнү кантип чыңдоо керектигин талкалайбыз.