NextJS-də Naviqasiyaya Giriş

Bu dərsliyin bölməsində biz NextJS-də keçidlərin işi haqqında danışacıq.

Əvvəlcə gəlin keçidlərin nəyi xüsusi etdiyini müzakirə edək. Onlara veb-sayt yaratmağın müxtəlif yanaşmalarında baxaq.

React-də Sayt

Tutaq ki, sizin React-də bir saytınız var. Məlum olduğu kimi, React SPA - istifadəçinin həmişə bir səhifədə qaldığı bir saytı təmsil edir. Siz React Router qoşa bilərsiniz və istifadəçi fərqli səhifələr arasında gəzindiyini düşünəcək, fiziki olaraq bir faylda qalmağına baxmayaraq.

Bu zaman istifadəçi keçidlərə klikləyəcək, ona elə gələcək ki, başqa bir səhifəyə düşür, amma brauzerdəki sayt səhifəsi yenidən yüklənməyəcək - React dinamik şəkildə istifadəçinin ekranda gördüyünü formalaşdıracaq.

Belə bir sxemdə istifadəçi saytın maketini səhifəyə ilk daxil olduqda alır, sonra isə saytın hissələri sadəcə JavaScript vasitəsilə dəyişir. Bu zaman sayt serverdən məlumatları AJAX ilə sorğulaya bilər.

Belə bir yanaşma hostingdəki yükü azaldır (onun resursları bizim pulumuza başa gəlir), həmçinin istifadəçinin internet kanalındakı yükü.

Amma belə bir yanaşmanın mənfi cəhəti var - SEO problemi. Elə bil ki, saytın bir sıra keçidləri var, və ünvan sətirində nəsə dəyişir, və hətta mesencer vasitəsilə saytın müəyyən səhifəsinə keçid atmaq olar. Lakin, səhifənin məzmunu dinamik şəkildə klientdə formalaşır və axtarış sistemləri bunu emal edə bilmir. Buna görə də belə bir sayt təşviq olunmayacaq.

Lakin, bütün saytlar axtarış sistemlərində təşviq olunmaq üçün nəzərdə tutulmayıb. Əgər sizinki nəzərdə tutulmayıbsa, onda bu sxem sizin üçün olduqca işləkdir.

Backend-də Sayt

Tutaq ki, sizin saytınız bir backend dilində hazırlanıb. Məsələn, PHP-də.

Bu halda, istifadəçi keçidlərə klikləyəndə, sayt səhifəsi hər dəfə tamamilə yüklənəcək.

Problem ondadır ki, səhifənin əhəmiyyətli hissəsi artıq istifadəçidə var. Çünki, artıq bildiyiniz kimi, səhifədə adətən yalnız məzmun və meta məlumatlar dəyişir, qalan hər şey isə dəyişməz qalır.

Bəs niyə biz qalan hissəni yükləyək, əgər dəyişən yalnız məzmundursa? Bu, serverdə və internet kanalında artan yük yaradır.

Başqa bir problem də var. Tutaq ki, əldə etdiyimiz səhifədə, məzmunun içərisində internet mağazasındakı kimi məhsulların siyahısı yerləşib. Aydındır ki, hər bir məhsul eyni verstkaya malikdir. Daha optimal olardı ki, yalnız məhsulların məlumatlarını və məhsulun çıxarılma şablonunu yükləyək. Və sonra klientdə hər bir məhsulu bu şablonda çıxaraq. Amma biz məhsulları təkrarlanan məhsul verstkası ilə birlikdə yükləyirik.

Xülasə, əgər bizim saf backend-də saytımız varsa, biz şəbəkə ilə çox lazımsız məlumat daşımış oluruq.

Lakin, bu halda bizim SEO problemi olmur. Sorğu edilən URL-ə həmişə statik məzmun qaytarılır, axtarış sistemləri üçün anlaşılandır.

NextJS-də Sayt

NextJS hər iki yanaşmanı birləşdirir. İstifadəçi URL-ı birbaşa ünvan sətirinə yazanda, ona cavab olaraq səhifənin statik məzmunu qaytarılır.

İstifadəçi saytımızdakı keçidlərə klikləməyə başlayanda isə, sayt səhifəsi tamamilə yenilənmir, əvəzində AJAX vasitəsilə istifadəçiyə lazım olan məlumatlar yüklənir.

Axtarış sistemi saytımızda gəzəndə, o, özü üçün lazım olan statik məzmunu görür. İstifadəçi saytımızda gəzəndə isə, saytımız SPA kimi davranmağa başlayır.

Və, ən əsası, NextJS bütün bunları avtomatik olaraq edir! Bizim bu barədə narahat olmağımıza ehtiyac yoxdur - o, hər şeyi özü edəcək. Gözəllik!

Növbəti dərslərdə biz NextJS-i izah edilən şəkildə işləməyə necə məcbur etməyi müzakirə edəcəyik.