Qisman namlash holati (Next va Preact bilan)

Bahorda biz bosh kompaniyamiz Axel Springer uchun turli xil ommaviy axborot vositalarining veb-saytlarini saqlab turish uchun javobgarmiz. Bizning so'nggi relizlarimizdan biri, welt.de, Germaniyadagi eng tezkor axborot vositalari veb-sayti; Bizning eng muhim maqsadlarimizdan biri bu doimo eng yaxshi ko'rsatkichga erishishdir va buning sababi oddiy: yaxshiroq ishlash odatda yaxshiroq foydalanuvchi tajribasini va shuning uchun foydalanuvchilarning yuqori darajada saqlanishini anglatadi.

tl; dr

Qisqa ma'lumot uchun infografikani olish uchun "Recap" -ga o'ting. Qisqacha aytganda, buning asosiy jihatlari:
  • Internet uchun ishlash juda muhimdir
  • yuqori ko'rsatkichlarga erishish uchun mijozga iloji boricha kamroq narsani yuborishni xohlaymiz
  • biz buni mijozga yuboradigan va nemlendirmoqchi bo'lgan tarkibiy qismlarni tanlash orqali amalga oshirishimiz mumkin
  • biz sahifaning qolgan qismini turg'un holda qoldiramiz va bir nechta render ildizlariga egamiz
  • Bularning barchasi bitta kod bazasi bilan ishlaydi
  • Quyida yuqorida aytib o'tilgan bosqichlarni qanday amalga oshirganimiz haqida uzun maqola. Shuningdek, ushbu amalga oshirishning BIM repo-ssilkasini topishingiz mumkin:
  • https://github.com/spring-media/next-super-performance

Internetda ishlash

Agar siz Addy Osmani-ga ergashsangiz, siz ushbu mashqni allaqachon bilasiz, u Internetda ishlashning sabablari va oqibatlari haqida ko'p yozadi. Ishni boshlash uchun men Addyning "2018 yilda JavaScript-ning narxi" maqolasini tavsiya etaman. Ushbu maqoladan o'rganishingiz mumkin bo'lgan ikkita muhim narsa:

  • JavaScript-ning narxi nafaqat sizning to'plamingizni yuklashga sarflanadigan vaqt
  • JavaScript-ni tahlil qilish va bajarish vaqti juda muhim

Albatta, bundan tashqari ishlash uchun ko'proq narsa bor, jumladan yuklash strategiyalari, ishlov berishning kritik yo'li, ishlash byudjetlari va boshqalar. Bularning barchasi sizning mijozingizga yuborganingizdan so'ng, qanday qilib optimallashtirish haqida aylanadi. Qisman hidratsiyaga e'tibor qaratmoqchi bo'lgan narsa bu sizning yuborganingizni qanday qilib optimallashtirish emas, balki umuman yuborgan narsangizdir.

Buning asosiy jihati server tomonidan ko'rsatish (SSR) bo'ladi, chunki serverda biz qila oladigan juda ko'p narsa bor, bu mijozda bajarilishi shart emas. Aslida, bu maqolaning ahamiyati; Serverda nima qilinsa, hammasi serverda bajarilishi kerak, ammo mijozga bajarilishi kerak bo'lgan narsa faqat mijozga yuborilishi kerak. Bunga qo'shimcha ravishda, siz veb ishlashi haqida bilganingizni hali ham qo'llashingiz mumkin, ammo boshqarish uchun kamroq omillar mavjud, bu maqolaning oxirida batafsil tushuntiriladi.

SSR va gidratatsiya

Ijrochining veb-saytini yaratish vazifamizni bajarish uchun biz Nextning o'zgartirilgan versiyasidan foydalanamiz. Keyingi, ko'p sonli samaradorlikni oshirish funktsiyalari bilan birlashtirilgan, eng muhimi, Keyingi server tomoni (SSR) ni qutidan tashqariga chiqaradi. Bu shundan dalolat beradiki, Keyingi React-da yozilgan sizning ilovangizni oladi:

  1. Uni HTML satr sifatida serverga yuboring
  2. Ko'rsatilgan HTML satrini manba kodi sifatida foydalanuvchilaringizga yuboring
  3. O'zingizning reaktsiya kodini JavaScript sifatida foydalanuvchilaringizga yuboring
  4. Va keyin React kodingiz yordamida HTML-ni "nemlendirin"

Bu holda "namlash" degani, keyingi HTML sizning reaktiv kodingizni to'kib tashlaydi va keyin shunga o'xshash narsaga reaktsiyani aytadi:

Hey React, mana bu HTML sizga mos keladigan DOM tugunida ko'rsatishni aytsam, nima qilish kerakligiga to'liq mos keladi, iltimos, hamma narsani qayta namoyish qilmang, buning o'rniga HTML-ni xuddi siz taqdim etgan kabi ishlating va davom eting sizning kuningiz

Reaktsiya javob beradi

Ok, men hozirgina HTMLga qaradim va u men ko'rsatgan narsaga to'g'ri keldi. Zo'r. Men shunchaki DOM-ga ba'zi voqealar bilan ishlov beruvchilarni biriktiraman va sizning sahifangiz endi bitta sahifa ilovasi sifatida ishlaydi, chunki men avval hammasini o'zim qilganman.

Shu tarzda veb-saytni yuklashning foydalari juda oddiy: Sizning foydalanuvchilaringiz veb-saytingizni (bo'sh sahifaning o'rniga) yuklaganlarida allaqachon to'liq namoyish qilingan sahifani ko'rishadi va keyin u interaktiv bo'ladi. Shuningdek, veb-saytingiz ishlashning yaxshilanishidan foyda ko'radi, chunki brauzer hech qanday bo'yashni amalga oshirishi shart emas (sahifangizni React bilan qayta ko'rsatish).

Haddan tashqari ortiqcha xarajatlar

Veb-dasturlarni yaratmoqchi bo'lganingizda yoki boshqacha qilib aytganda, JavaScript tomonidan to'liq nazorat qilinishi kerak bo'lgan veb-saytlarni yaratmoqchi bo'lsangiz, ushbu yondashuv juda xayoliydir va veb-saytlarni bosganingizda ham interaktivdir. Facebook, Twitter kabi veb-saytlar va elektron pochta mijozlari kabi veb-saytlarni ishlab chiqarishda bunday yondashuvga misollar mavjud.

Ammo ko'pchilik veb-saytlar bu kabi emas, aksariyat veb-saytlar turlicha va ba'zi interfaol elementlarga ega.

Endi siz o'zingizning sahifangizning har bir sarlavhasi yoki matn paragrafiga reaktsiya komponentlarini, shu jumladan foydalanuvchilarga to'liq dastur kodini yuborasiz. Natijada yuklash, tahlil qilish va ijro etish kerak bo'lgan juda katta to'plam. Bu natijalar subptimal natijaga olib keladi, ayniqsa sizning mobil foydalanuvchilaringiz uchun sizning sahifangiz sekin (er) bo'ladi!

Va bu yutadi.

Xo'sh, biz nima qila olamiz? Xo'sh, u erda juda ko'p strategiya va mahsulotlar mavjud. Eng ko'zga ko'ringanlaridan biri bu Gatsby, statik sayt yaratuvchisi (aminman, siz bu haqda hozirgacha eshitgansiz), u ishlashni optimallashtirishga katta e'tibor beradi. Gatsby bilan bog'liq muammo shundaki, u sizning barcha sahifalaringizni va sahifalaringizni kompilyatsiya vaqtida yaratishi kerak, bu har kuni yangilanadigan va millionlab maqolalarni o'z ichiga oladigan CMS bilan bog'langan saytlarga ega bo'lganda ishlamaydi. yangiliklar OAV saytlari. Shuning uchun biz Keyingi-ni, shuningdek uni ehtiyojlarimizga mos ravishda o'zgartirmoqdamiz.

Qisman hidratsiyaga kiring

Yuqorida aytib o'tilgan muammolarni hal qilish uchun biz qisman gidratatsiya deb atashni xohlagan narsani o'ylab topdik.

Agar siz ushbu mavzuni ko'rib chiqsangiz, ehtimol ilg'or gidratatsiya yoki dangasa hidratatsiya kabi atamalarga duch kelishingiz mumkin. Ularning barchasi bir xil narsani anglatmaydi, lekin ularning barchasi o'zaro bog'liq va bir sohaga tegishli.

Qisman namlash versiyamizning asosiy g'oyasi quyidagilardan iborat: SSR-ni amalga oshirish va keyin sizning butun dasturingizni mijozingizga yuborish o'rniga, sizning JavaScript-ning faqat bir qismi sizning veb-saytingizning hidratsiyasi uchun mijozga yuboriladi, bu esa JavaScript ishlashini talab qiladi. . Agar siz ushbu usul yordamida veb-sayt yaratmoqchi bo'lsangiz, sizning statik veb-saytingizda bir nechta render ildizlariga ega bo'lgan bir nechta mayda reaktsiyalar 'ilovalar' ga ega bo'lishingiz mumkin.

Shunday yo'l tutish veb-saytingizni ishlash unumdorligini oshirishi kerak, chunki etkazib berishni yakunlaganingiz aniq HTML, CSS va sahifangiz uchun eng kam JavaScript-ni talab qiladi. Shuni ta'kidlash kerakki, ishlashni o'lchashda siz nafaqat yuklash vaqtini, balki ularni tahlil qilish va bajarish vaqtini ham hisobga olishingiz kerak.

Bundan tashqari, kodni ajratish, TCP-ning sekin ishga tushirilishi va tanqidiy ko'rsatish yo'lini boshqarish kabi strategiyalarni to'g'ri bajarishni tanlashingiz mumkin.

Bizning amalga oshirishimiz

Bizning amalga oshirishimiz ikkita paketdan iborat:

  • Basseyn-xizmatchi-preakt deb nomlangan qisman nemlendirish uchun Preact kutubxonasi
  • Next.js plagin keyingi-super-ishlash deb nomlangan

Ikkinchi kutubxona shunchaki Next.js uchun plagin bo'lib, u Бассейн-attestant-preact-ni ishlatadi, shuning uchun Бассейн-xizmat ko'rsatuvchi-preaktga e'tiboringizni qarataylik. Men kelajakda qandaydir bir bosqichda keyingi super-ijroga keyingi xabar yozsam bo'ladi.

hovuz-xizmatchi-preakt

Sarlavha, tanasi, yon paneli va 2 ta reaktiv element bilan sxemasi

Ushbu tuzilishni tasavvur qiling va kulrang qutilar mutlaqo statik bo'lishi mumkin bo'lgan elementlarga aylantiring va binafsha rang ranglar interaktiv bo'lishini xohlaysiz. Masalan, Twitter kanalidan kattaroq va uncha katta bo'lmagan ovoz berish vositasi bo'lishi mumkin. Shunday qilib, biz ushbu elementlarga interaktiv bo'lish uchun JavaScript-ni qo'llashimiz kerak va qolgan qismini statik element sifatida qoldirmoqchimiz.

Basseyn-xodimi-preaktidan foydalangan holda bunga misolning bajarilishi quyidagicha ko'rinishi mumkin:

3–8 qatorlar biz ko'rsatishni istagan barcha tarkibiy qismlar, bu tarkibiy qismlar serverda namoyish qilinadi va keyin HTML va CSS sifatida hech qanday JavaScript-larsiz mijozga yuboriladi.

10 va 11-qatorlar TwitterFeed va Poll tarkibiy qismlarini hidratsiya uchun belgilaymiz va evaziga yangi tarkibiy qismni olamiz. 18 va 19-qatorlar biz foydalanadigan joy.

22-qator juda katta ahamiyatga ega. Bu sahifaga hidratatsiya ma'lumotlarini (rekvizitlar va komponentlarning nomlari) kiritadigan komponent.

Ammo tushuntirib beray. Reaktsiya bilan oddiy nemlendirish qilsak, sizning kodingiz quyidagicha ko'rinadi:

Qisman gidratatsiya qilganda bu erda hal qilinishi kerak bo'lgan ikkita muammo mavjud

  1. ReactDOM.hydrate DOM-dagi ildiz tugunida ishlaydi, u hidratsiyaning boshlang'ich nuqtasi sifatida foydalanadi. Ildiz tugunida ilovangizning tarkibiy qismlari va holatiga mos keladigan server tomonidan yaratilgan DOM daraxti bo'lishi kerak. Tutish: Ildiz tuguni sifatida harakat qilish uchun aniq DOM tugunini nomlashingiz kerak. Ushbu misolda bu juda oddiy, siz tugunni idga berib, document.getElementbyId-dan foydalanishingiz va keyin tugunni ReactDOM.hydrate-ga tashlashingiz mumkin va siz tugallandingiz!
    Qisman hidratsiya sizning statik sahifangizda siz namlashingiz kerak bo'lgan bir nechta DOM elementiga ega bo'lishingizni anglatadi. Siz ularni ishlab chiquvchi uchun zerikarli ishlaydigan narsalarning barchasini aniq nomlashni xohlamaysiz.
  2. Agar HydrateTwitterFeed yoki HydratedPoll ularga o'tishi kerak bo'lgan rekvizitlarga ehtiyoj sezsa nima bo'ladi? Ayting, . Agar biz ReactDOM.hydrate (, rootElementOnThePage) ni ishga tushirmoqchi bo'lsak, luke_schmuke-ni qayerdan olamiz? Qanday qilib turg'un sahifa bu haqda bilishi mumkin? Biz qandaydir tarzda saqlashimiz va mijozga yuborishimiz kerak.

Qaror

Ushbu muammoni hal qilish usulini Hydration bilan amalga oshirish orqali tushunish mumkin:

Buni diqqat bilan ko'rib chiqaylik: gidratatsiya yuqori buyurtma komponentlar texnikasidan foydalangan holda ishlaydi, yuqori buyurtma komponenti asl tarkibiy qismni asl o'zgartirilmagan rekvizitlari bilan birga qaytaradi, lekin uni hidratsiya-marker deb nomlangan