Rendering

React.js'ni o'rganishni boshlaganlar barchasi rendering haqida mavzuga duch keladi. Sababi, rendering'ga aloqador mavzulardan birinchi bo'lib Virtual DOM haqida bilishlari kerak, chunki React.js DOM'ga o'zgarishlarni tezroq va optimal usulda render qilish uchun Virtual DOM'dan foydalanadi.

**Virtual DOM - bu asl DOM (Document Object Model)'ning virtual ko'rinishi. U React ilovasidagi ma'lumotlar o'zgarganda yangilanishlarni ko'rsatish samaradorligini oshirish uchun ishlatiladi. Qisqacha ishlashi quyidagicha: React componenti birinchi marta render qilinganda, u DOM'ning virtual ko'rinishini yaratib oladi va biror ma'lumot o'zgarganda (foydalanuvchining ta'siri tufayli yoki boshqa event'lar sababli) asl DOM'ni o'zgartirmasdan oldin Virtual DOM'ni o'zgartiradi. So'ng Haqiqiy DOM bilan Virtual DOM'ni solishtirib ("Reconciliation" or "diffing"), faqatgina o'zgargan komponentalarni yangilaydi.

Core Web Vitals (CWV) degan tushuncha bor. CWV ko'rsatkichlari foydalanuvchi tajribasiga mos kelishi kerak bo'lgan parametrlarni o'lchaydi. Ya'ni bizda turli xil rendering pattern'la bor va ularni qaysi birini ishlatishni case'ga qarab tanlaymiz. Har biri qaysidir muammoni hal qiladi. Lekin bu patternlar qanchalik optimal, yaxshi ekanliklarini mana shu metrics bilan o'lchaymiz. CWV'ni optimallashtirish yaxshi User Experience va SEO'ni ta'minlab beradi. Bular UX ni yaxshilash uchun.
DX (developer experience)ni yaxshilash uchun build time'ni tezlashtirish, oson rollback va kengayishga oson qilish kabi bir nechta narsalarni ham ta'minlashimiz kerak. Bular haqida ham yana yozamiz. Shunday qilib qaysi rendering pattern'dan foydalanish "use case"'ga bog'liq bo'ladi va proyekt boshlanishidan avval proyekt turiga qarab bittasi tanlanadi.

Rendering types:
• Client-Side Rendering (CSR)
• Server-Side Rendering (SSR)
• Static Rendering yoki Static Site Generation (SSG)
• Incremental Static Regeneration (ISR)
• Deferred Site Generation (DSG)

@nurulloh_ubaydullayev