Hidratsiya (Hydration)

Hidratsiya — bu serverda yaratilgan va klientga yuborilgan statik HTML’ga event listener’larni va boshqa JavaScript funksiyalarini biriktirish jarayonini ifodalovchi atama. Hidratsiyaning maqsadi, server tomonida render qilingan ilovaning brauzerda yuklangandan so’ng to’liq interaktiv holatga o’tishini ta’minlashdir, bu foydalanuvchilarga tez va silliq ishlash qulayligini taqdim etadi.

React ilovasida hidratsiya jarayoni

React ilovasida hidratsiya jarayoni klient serverdan render qilingan React ilovasini yuklagandan so’ng boshlanadi. Keyin quyidagi qadamlar sodir bo’ladi:

• Klient to’plam paketini yuklash: Brauzer statik HTML’ni render qilayotganda, u ilovaning kodini o’z ichiga olgan JavaScript to’plam paketini ham yuklaydi va tahlil qiladi. Ushbu paket React komponentlarini va ilovaning funksionalligi uchun zarur bo’lgan boshqa kodlarni o’z ichiga oladi.
• Event listener’larni biriktirish: JavaScript to’plam paketi yuklanganidan so’ng, React statik HTML’ni “hidratsiya” qiladi, DOM elementlariga event listener’larni va boshqa dinamik funksiyalarni biriktirish orqali. Bu odatda react-domdan hydrateRoot funktsiyasi yordamida amalga oshiriladi, bu esa ildiz React komponenti va DOM konteynerini argument sifatida oladi. Hidratsiya asosan statik HTML’ni to’liq interaktiv React ilovasiga aylantiradi.

Hidratsiya jarayonida muhim nuqta

Hidratsiya jarayoni tugagandan so’ng, ilova to’liq interaktiv holatga keladi va foydalanuvchining interaktivlik kiritishlariga javob bera oladi, ma’lumotlarni olib kelishi va kerak bo’lganda DOM’ni yangilashi mumkin.

Hidratsiya davomida React statik HTML’dagi DOM elementlarining strukturasini JSX orqali aniqlangan React komponentlarining strukturasi bilan moslashtiradi. React komponentlari tomonidan yaratilgan struktura, statik HTML strukturasi bilan mos kelishi juda muhimdir. Agar mos kelmasa, React event listener’larni to’g’ri biriktirish imkoniyatiga ega bo’lmaydi va qaysi React elementi qaysi DOM elementiga to’g’ri kelishini bilmaydi, bu esa ilovaning kutilganidek ishlamasligiga olib keladi.

Server tomonda renderlash va hidratsiyani birlashtirib, dasturchilar tez yuklanadigan va silliq, interaktiv foydalanuvchi bilan ishlash qulayligini taqdim etadigan veb-ilovalarni yaratishlari mumkin.

Hidratsiyaning salbiy jihatlari

Hidratsiya server tomonidan render qilingan HTML’ni interaktiv qilishning yaxshi usuli bo’lsa-da, ba’zilar hidratsiyani keraksiz darajada sekin deb tanqid qiladilar, ko’pincha davom ettiruvchanlik qobiliyati(resumability)ni ustun muqobil sifatida keltiradilar (rasmga qarang). Keling, bu masalani biroz o’rganamiz.

Hidratsiya jarayonida biz React ilovasini serverda render qilamiz va keyin render qilingan natijani klientga jo’natamiz. Biroq, bu vaqt davomida hech narsa interaktiv emas. Bu nuqtadan boshlab, brauzerimiz klient to’plam paketini yuklashi, event listener’larni biriktirishi va samarali ravishda klientni “qayta render” qilishi kerak. Bu ko’p ish va ba’zida foydalanuvchi uchun kontent paydo bo’lgan vaqti bilan foydalanuvchi saytdan foydalanish imkoniyati o’rtasida kechikish yuzaga kelishi mumkin.

Davom ettiruvchanlik qobiliyati (Resumability)

Boshqa tomondan, Davom ettiruvchanlik qobiliyati biroz boshqacha ishlaydi (rasmga qarang).

Davom ettiruvchanlik qobiliyati bilan, butun ilova serverda render qilinadi va brauzerga uzluksiz uzatishlik(stream) tarzida jo’natiladi. Dastlabki markup bilan birga, barcha interaktiv xatti-harakatlar ham seriyalangan holda klientga yuboriladi. Klient, shu tariqa, interaktiv bo’lish uchun zarur bo’lgan barcha ma’lumotlarga ega bo’ladi va shu bilan server qoldirgan joydan davom etishi mumkin. U hidratsiya qilishi (ya’ni, event listener’larni biriktirishi va sahifani klient tomonida render qilishi) shart emas, aksincha server bergan ma’lumotlarni deserializatsiya qilib, mos ravishda javob berishi mumkin. Hidratsiya bosqichini o’tkazib yuborish interaktivlik uchun sarflanadigan vaqtni (TTI) tezlashtirishi va foydalanuvchi bilan ishlash qulayligini yaxshilashi mumkin.

Davom ettiruvchanlik qobiliyatining o’lchovli afzalliklari bor, ammo muhandislik jamoasida “buni amalga oshirish murakkabligi foydasiga arziydimi yoki yo’qmi?” degan savol tug’ilishi mumkin. Haqiqatan ham, bu hidratsiyadan ko’ra murakkabroq yondashuvdir va afzalliklari xarajatlarni oqlaydimi yoki yo’qmi hali aniq emas: ha, interaktivlikka o’tish vaqti bir necha millisekundga tezlashadi, lekin “resumability” texnikasini amalga oshirish murakkabligiga arziydimi? Bu savol hali ham React jamoasida qizg’in muhokamada.