Proqressiv render nədir?

Proqressiv rendering veb səhifəsinin yüklənmə və göstərilmə sürətini optimallaşdırma metodudur, burada məzmun mərhələli şəkildə yüklənir və göstərilir, tam olaraq deyil.

Əsas üstünlüklər:

İlk mənalı məzmunun daha sürətli göstərilməsi (First Meaningful Paint).
İstifadəçi tərəfindən yükləmə sürətinin yaxşılaşdırılması.
İnteraktivliyə qədər olan vaxtın azaldılması (Time to Interactive).

Proqressiv rendering texnikaları bunları əhatə edir:

Lazy Loading: Əhəmiyyətsiz resursların (məsələn, şəkil və ya videolar) istifadəçi ehtiyacı olmadan, səhifəni aşağıya sürüklədikcə yüklənməsi.
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Nümunə şəkil" loading="lazy">
```

Server-Side Rendering (SSR): HTML səhifəsinin serverdə yaradılması və artıq render olunmuş məzmunun brauzərə göndərilməsi.

// SSR üçün framework nümunəsi (məsələn, Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Serverdə məlumatların alınması
//   const data = await fetchData();
//   return {
//     props: { data }, // Komponentə məlumatların ötürülməsi
//   }
// }
//
// function MyPage({ data }) {
//   // Məlumatlarla komponentin render olunması
//   return <div>{/* ... */}</div>
// }

Client-Side Rendering (CSR) ilə hydratasiya: Brauzer minimal HTML və JavaScript alır. JavaScript məlumatları yükləyir və səhifəni tam şəkildə brauzerdə render edir. Hydratasiya, SSR məzmununa hadisə idarəedicilərinin əlavə olunması prosesidir.

Streaming HTML: HTML-in serverdə yaradıldıqca hissə-hissə göndərilməsi, brauzerin parse və render etməyə başlamasına imkan verir, sənəd tam yüklənmədən.

<!-- Nəzəri streaming nümunəsi -->
<html>
  <head>
    <title>Streaming səhifə</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- İlk göndərilən HTML hissəsi -->
    <h1>Başlıq</h1>
    <script src="script.js" async></script>
    <!-- Digər HTML daha sonra göndərilə bilər -->
  </body>
</html>

Kritik CSS / Inline Critical CSS: Görüntülənən hissənin CSS-stilinin inline yerləşdirilməsi, ilk renderi sürətləndirmək üçün. Digər stillər asinxron yüklənir.

Texnika	Təsviri	Üstünlüklər	Dezavantajlar
Lazy Loading	Görünən sahədən kənar resursların yüklənməsinin gecikdirilməsi	Görünən məzmunun daha sürətli yüklənməsi	JavaScript tələb edə bilər
SSR	Serverdə render və hazır HTML-in göndərilməsi	İlk məzmunun sürətli göstərilməsi, SEO-ya uyğundur	Server yükünü artırır
CSR ilə hydratasiya	İlk render müştəri tərəfində, sonra SSR məzmununun hydratasiyası	Dinamik tətbiqlər	Yükləmə uzun və SSR olmadan interaktivlik gecikir
Streaming HTML	HTML-in hissə-hissə göndərilməsi	Parsinqə sürətli başlanğıc	Server tərəfli implementasiyaya bağlı
Kritikal CSS	Görünən hissə üçün stilin inline yerləşdirilməsi	Görünən hissənin sürətli renderi	Kritikal CSS-in çıxarılması üçün alətlər tələb olunur

Proqressiv rendering bu texnikaların və digər metodların birləşməsidir və istifadəçi təcrübəsini yaxşılaşdırmaq üçün veb səhifənin render olunmasını sürətləndirməyə yönəlib.