NextJS-da Navigatsiyaga Kirish
Ushbu darslik bo‘limida biz NextJS-da havolalar bilan ishlash haqida gapiramiz.
Boshlanishiga, havolalarning nima ahamiyati borligini muhokama qilaylik. Ularni vebsayt yaratishning turli yondashuvlarida ko‘rib chiqamiz.
React-da Sayt
Faraz qilaylik, sizda React-da yaratilgan sayt bor. Ma'lumki, React SPA - foydalanuvchi har doim bitta sahifada qoladigan saytni ifodalaydi. Siz React Router ni ulashingiz mumkin va foydalanuvchi turli sahifalarda yuryapti deb o‘ylaydi, aslida jismonan bitta faylda qolgan holda.
Bunda foydalanuvchi havolalarni bosadi, u boshqa sahifaga o‘tayotgandek his qiladi, lekin brauzerdagi sayt sahifasi qayta yuklanmaydi - React foydalanuvchi ekranda ko‘radigan narsani dinamik ravishda shakllantiradi.
Bunday sxemada foydalanuvchi sayt maketini sahifaga birinchi marta kirishida oladi, so‘ngra saytning qismlari oddiygina JavaScript orqali o‘zgaradi. Bunda sayt AJAX orqali serverdan ma'lumotlarni so‘rashi mumkin.
Bunday yondashuv hostingdagi yukni kamaytiradi (uning resurslari bizning pulimizga tushadi), shuningdek foydalanuvchi internet kanalidagi yukni ham kamaytiradi.
Ammo bunday yondashuvning kamchiligi bor - SEO muammosi. Garchi saytda havolalar to‘plami bo‘lsa ham, va manzil qatorida biror narsa o‘zgarsa, va hatto messenger orqali saytning ma'lum bir sahifasiga havola ham yuborish mumkin. Biroq, sahifa mazmuni klientda dinamik ravishda shakllantiriladi va qidiruv tizimlari buni qayta ishlay olmaydi. Shuning uchun bunday sayt targ‘ib qilinmaydi.
Biroq, barcha saytlar qidiruv tizimlarida targ‘ib qilish uchun mo‘ljallanmagan. Agar sizniki mo‘ljallanmagan bo‘lsa, ushbu sxema siz uchun butunlay ishlaydi.
Backend-da Sayt
Faraz qilaylik, sizning saytingiz biron bir backend tilida yaratilgan. Misol uchun, PHP da.
Bunda, foydalanuvchi havolalarni bosganda, sayt sahifasi har safar butunlay yuklanadi.
Muammo shundaki, sahifaning muhim qismi allaqachon foydalanuvchida bor. Chunki, siz allaqachon bilasiz, sahifada odatda faqat kontent va meta ma'lumotlar o‘zgaradi, qolgan hamma narsa o‘zgarishsiz qoladi.
Nima uchun biz qolgan qismini yuklab olamiz, agar o‘zgargan bo‘lsa faqat kontent? Bu server va internet kanalidagi yukni oshiradi.
Yana bir muammo bor. Faraz qilaylik, biz oladigan sahifada kontent ichida internet do‘konidagi kabi mahsulotlar ro‘yxati joylashgan. Ma'lumki, har bir mahsulot bir xil verstkaga ega. Yaqshiroq variant mahsulotlarning faqat ma'lumotlarini, va mahsulot chiqarish shablonini yuklab olish bo‘lardi. So‘ngra klientda har bir mahsulotni ushbu shablonda chiqarish. Ammo biz mahsulotlarni mahsulotning takrorlanuvchi verstkasi bilan birga yuklaymiz.
Xulosa qilib aytganda, agar bizda sof backend-da sayt bo‘lsa, biz tarmoq orqali ko‘p keraksiz ma'lumotlarni uzatamiz.
Biroq, bu holda bizda SEO muammosi bo‘lmaydi. So‘ralgan URL uchun har doim qidiruv tizimlari uchun tushunarli bo‘lgan statik mazmun qaytariladi.
NextJS-da Sayt
NextJS ikkala yondashuvni birlashtiradi. Foydalanuvchi manzil qatoriga URL ni to‘g‘ridan-to‘g‘ri kiritganda, unga javoban sahifaning statik mazmuni keladi.
Foydalanuvchi bizning saytimizdagi havolalarni bosishni boshlaganda esa, sayt sahifasi butunlay yangilanmaydi, balki AJAX orqali foydalanuvchi uchun kerakli ma'lumotlar yuklanadi.
Qidiruv tizimi bizning saytimiz bo‘ylab yurganda, u o‘zi uchun kerakli statik mazmunni ko‘radi. Foydalanuvchi bizning saytimiz bo‘ylab yurganda esa, bizning saytimiz SPA ga o‘xshash ishlay boshlaydi.
Va, eng muhimi, NextJS bularning hammasini avtomatik ravishda bajaradi! Biz bunga g‘amxo‘rlik qilishimiz shart emas - u hammasini o‘zi bajaradi. Chiroyli!
Keyingi darslarda biz NextJS ni tavsiflangan tarzda ishlashiga qanday erishishni tahlil qilamiz.
