Progressiv rendering nima?

Progressiv rendering veb sahifani yuklash va ko‘rsatish tezligini optimallashtirish usulidir, bunda mazmun bosqichma-bosqich yuklanadi va ko‘rsatiladi, to‘liq bir vaqtning o‘zida emas.

Uning asosiy afzalliklari:

Birinchi ma’noli mazmunning (First Meaningful Paint) tezroq chizilishi.
Foydalanuvchi tomonidan yuklash tezligining yaxshiroq qabul qilinishi.
Interaktivlikka (Time to Interactive) erishish vaqtining qisqarishi.

Progressiv rendering texnikalariga quyidagilar kiradi:

Lazily yuklash (Lazy Loading): Foydalanuvchi uchun zarur bo‘lmagan resurslarni (masalan, rasm yoki videolar) ularni kerak bo‘lganda, ya’ni sahifa ularni ko‘rganida yuklash.
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Misol rasm" loading="lazy">
```

Server tomonida rendering (Server-Side Rendering - SSR): HTML sahifasini serverda yaratish va allaqachon render qilingan mazmunni brauzerga yuborish.

// SSR uchun frameworkdan foydalanish misoli (masalan, Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Ma’lumotlarni serverdan olish
//   const data = await fetchData();
//   return {
//     props: { data }, // Ma’lumotlarni komponentga uzatish
//   }
// }
//
// function MyPage({ data }) {
//   // Ma’lumotlar bilan komponentni render qilish
//   return <div>{/* ... */}</div>
// }

Mijoz tomonida rendering (Client-Side Rendering - CSR) va hydratatsiya: Brauzer minimal HTML va JavaScript oladi. JavaScript ma’lumotlarni yuklab, sahifani to‘liq render qiladi. Hydratatsiya — bu SSR bilan render qilingan mazmunga voqealarni qo‘shish jarayoni.

HTML streaming (Streaming HTML): HTMLni serverda ishlab chiqarilayotgan paytda bo‘laklarga yuborish, bu brauzerga sahifa to‘liq yuklanishidan oldin analiz qilish va render qilish imkonini beradi.

<!-- Hipotetik streaming HTML misoli -->
<html>
  <head>
    <title>Streaming sahifa</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Birinchi yuborilgan HTML qismi -->
    <h1>Sarlavha</h1>
    <script src="script.js" async></script>
    <!-- Qolgan HTML keyinchalik yuborilishi mumkin -->
  </body>
</html>

Kritik CSS / Inline CSS (Critical CSS / Inline Critical CSS): Sahifaning ko‘rinadigan qismi (Above the Fold) uchun zarur bo‘lgan CSS uslublarini inline qilish, dastlabki renderni tezlashtirish uchun. Boshqa uslublar asinxron yuklanadi.

Texnika	Tavsifi	Afzalliklar	Kamchiliklar
Lazy yuklash	Ko‘rinadigan maydon tashqarisidagi resurslarni kechiktirish	Ko‘rinadigan mazmunning tez yuklanishi	JavaScript talab qilishi mumkin
SSR	Serverda render qilish, tayyor HTML yuborish	Tez boshlang‘ich render, SEO uchun qulay	Serverga yukni oshiradi
CSR bilan hydratatsiya	Birinchi render mijozda, keyinchalik SSR mazmuniga hydratatsiya qilish	Dinamik ilovalar	Uzun yuklanish va SSRsiz interaktivlik cheklangan
Streaming HTML	HTMLni bo‘laklarga yuborish	Tez boshlash uchun parsing	Server implementatsiyasiga bog‘liq
Kritikal CSS	Ko‘rinadigan qism uchun uslublarni inline qilish	Tez ko‘rinadigan qism renderi	Kritikal CSS chiqarish uchun vositalar talab qilinadi

Progressiv rendering bu texnikalar va boshqa uslublarning kombinatsiyasidir, foydalanuvchi tajribasini yaxshilash uchun, veb sahifaning renderlash tezligini oshirishga qaratilgan.