React tək səhifəli tətbiqdir (single-page application). Veb saytlarda App Sheel Modeli istifadə edir. Əsasən veb səhifələri istifadəçi (klient) tərəfdə render edir.
Render etdikdə, server, gələn sorğuya HTTP cavabında bütün səhifənin kontentini göndərmir. HTML - də React JS kitabxanası olur. Buna görə də, siz səhifənin daxilində elementin kodunu yoxladıqda və source koda baxdıqda, iki fərqli HTML görmüş olursuz.
Səhifə sayı bir olduğundan veb sayt, hər dəfə sorğu zamanı səhifəni təkrar yükləmir. Bunun yerinə, səhifə eyni qalır, lakin, səhifə daxilində komponentin (səhifənin bir hissəsinin) vəziyyəti (state) dəyişir. Beləliklə, bütün prosseslər tək bir səhifə içində baş verir.
React js - in üstünlüyü nədir?
Sorğu zamanı bütün səhifə yerinə sadəcə bir komponentin vəziyyəti dəyişdiyindən və render klient tərəfdə olduğundan səhifə hər yeni əməliyyat zamanı çox qısa zamanda yüklənir. Bu isə sürətli vebsayt deməkdir.
React vebsaytların SEO ilə bağlı problemi nədir?
Ümumiyyətlə, React js istifadəçi cəhətcən SEO -ya uyğundur. Lakin, bəzi problemlər var.
Status kod xətaları
Server sorğuya cavab zamanı bütün səhifəni yükləmir. Bu istifadəçi tərəfdə yəni, brauzerdə baş verir. Bu halda bəzi xətalar çıxır:
- 4XX status kodu düzgün şəkildə konfiqurasiya olmur
- 3XX yönləndirmələrində problem yaşaya bilərsiz
Status kod xətalarının həlli yolları
- Google ümumilikdə, Javascript yönləndirmələri düzgün izləyə bilir, lakin digər axtarış sistemləri isə yox. Buna həll isə Next.js -dir. Bu barədə aşağıda bəhs olunacaq.
- 404 xətaları üçün React Router -dan müvafiq dəyişiliyi edə bilərsiniz. Həmin səhifələrə noindex təqi əlavə etməyi unutmayın.
Diyez işarəsi işlətməyin
Bəzən developerlər url-lərdə "#" işarəsi işlədir. Bu işarəni işlətməkdən qaçının, çünki, Google bu işarədən sonrakı hissəni oxumur.
Render problemi
Javascript ilə render o qədər də asan iş deyil. Səhifə klient tərəfdə render olduğundan və server bütün HTML -i yükləmədiyindən axtarış sistemləri saytı tək bir ağ səhifə olaraq görür. Bu isə SEO üçün böyük problemdir. Bir neçə həll var.
React vebsaytlarda SEO problemlərinin həlli yolları nədir?
Bu problemin iki əsas həlli var:
- Server tərəfdə render (server-side rendering)
- Öncədən render (pre-rendering)
Arada böyük fərq yoxdur. Əsas məsələ veb saytınızın səhifə sayının çoxluğundan və dinamikliyindən asılıdır.
Server tərəfdə render (Server-side rendering)
Bütün render real olaraq backend tərəfdə baş verir. İstifadəçi serverə sorğu göndərir, daha sonra server istifadəçiyə tamamilə render edilmiş HTML - i göndərir. Böyük vebsaytlar üçün ən optimal seçimdir. Lakin, bu üsul xərclər cəhətcən o qədər də məhsuldar deyil. Çünki, server bunun üçün hər sorğu zamanı resursunu işlədir. Bu isə əlavə vaxt itkisi və xərc deməkdir.
Öncədən render edilimiş statik kontent (Pre-rendered static content)
Server tərəfdə renderdən əvvəl, developerlər statik HTML fayllar hazırlayırdılar və onu serverlərdə yerləşdirirdilər. Server sorğunu alan kimi, statik HTML - i cavab kimi geri göndərirdi. Bu halda server heç nəyi render etmir, istifadəçi brauzeri isə kiçik bir datanı render edirdi. Öncədən render də belədir.
Developerlər öncədən render edərək Javascripti HTML-ə çevirirlər. Bunu deploy edərkən və ya adminlər saytda kontenti dəyişdikdən sonra edirlər. Developerlər bu halda nəticələri, botlar və real istifadəçilər üçün fərqləndirirlər.
Əgər real istifadəçi URL - ə sorğu göndərsə, server dərhal sorğuya kodu göndərir. Brauzer kodu parse edir və istifadəçi kontenti görür.
Lakin, əgər gələn məsələn, Googlebotdursa, bu halda server öncədən render edilmiş faylı göstərir. Dolayı yolla, problem həll olmuş olur.
Bu üsul böyük saytlar üçün səmərəli yol deyil.
Bəs ən yaxşı üsul nədir?
Daha yaxşı seçim Hibrid istifadədir
Yəni, saytın müəyyən səhifələrində öncədən render, digər səhifələrində isə server tərəfdə render istifadə edilir. Bu isə Next.js ilə asandır.
Next.js üstünlüyü
React ilə Server tərəfdə render etmək ReactDOMServer üzərindən mümkündür. Lakin, React frameworku olan Next.js həm öncədən render, həm də, server tərəfdə render üçün daha yaxşı seçimdir. Belə ki, Next.js Avtomatik Statik Optimizasiyanı dəstəkləyir. Yəni, məsələn, saytın dinamik hissələri server tərəfdə render edildiyi halda, bloq hissəsində öncədən render funksionallığı işlədilə bilər.
Next.js ilə digər SEO problemlərinin həlli
Next.js digər React əsaslı JavaScript frameworklərdən fərqli olaraq, sayt daxilində Head komponentinin kontentini yadda saxlayır. Bununla da, səhifələri lazım olan təqlərlə (title, description və digər metalarla) təmin edir.
Yekun olaraq, Next.js həm render məsələlərini, həm də, SEO üçün lazımlı olan təq problemlərini həll edir.