Ի՞նչ է պրոգրեսիվ ռենդերինգը։

Ավելացվող ռենդերինգը՝ դա օպտիմալացման մեթոդ է, որը նպաստում է վեբ էջի բեռնման արագությանը և ցուցադրմանը, որտեղ բովանդակությունը բեռնվում և ցուցադրվում է փուլերով, ոչ ամբողջությամբ միանգամից:

Նրա հիմնական առավելությունները՝

Առաջին նշանակալի բովանդակության արագ ցուցադրում (First Meaningful Paint):
Օգտագործողի կողմից բեռնման արագության բարելավում:
Ժամանակի կրճատում մինչև ինտերակտիվություն (Time to Interactive):

Հիմնական տեխնիկաները՝

Քաշել բեռնումը (Lazy Loading): Անհրաժեշտ չհամարվող ռեսուրսների (օրինակ՝ պատկերների կամ տեսանյութերի) բեռնումը հետաձգել մինչև այն պահը, երբ դրանք անհրաժեշտ լինեն օգտագործողին (երբ նա անցնում է էջի վրա):
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Նմուշ պատկեր" loading="lazy">
```

Սերվերի կողմի ռենդերինգ (Server-Side Rendering - SSR): HTML էջի ձևավորում սերվերում և արդեն ձևավորված բովանդակության ուղարկում բրաուզերին:

// Օրինակ՝ SSR-ի համար ֆրեյմվորկի օգտագործում (օրինակ՝ Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Դատարկ տվյալների ստացում սերվերից
//   const data = await fetchData();
//   return {
//     props: { data }, // Դատարկ տվյալների փոխանցում կոմպոնենտին
//   }
// }
//
// function MyPage({ data }) {
//   // Կոմպոնենտի ռենդերինգ տվյալներով
//   return <div>{/* ... */}</div>
// }

Կլիենտային կողմի ռենդերինգ (Client-Side Rendering - CSR) և հիդրատացիա: Բրաուզերը ստանում է նվազագույն HTML և JavaScript: JavaScript-ը բեռնում է տվյալները և ամբողջությամբ ռենդեր է անում էջը բրաուզերում: Հիդրատացիան՝ դա է գործընթացը, երբ ավելացվում են իրադարձությունների հենակետերը արդեն ռենդերացված SSR բովանդակությանը:

Ստրիմինգ HTML (Streaming HTML): HTML-ի մասերով ուղարկում՝ ըստ դրա սերվերի կողմից գեներացման, ինչը թույլ է տալիս բրաուզերին սկսել վերլուծել և ռենդեր անել նախքան ամբողջ փաստաթղթի բեռնումը:

<!-- Հիպոթետիկ ստրիմինգի օրինակ -->
<html>
  <head>
    <title>Ստրիմինգ էջ</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Առաջին ուղարկված HTML հատվածը -->
    <h1>Վերնագիր</h1>
    <script src="script.js" async></script>
    <!-- Մնացած HTML-ը կարող է ուղարկվել ավելի ուշ -->
  </body>
</html>

Կրիտիկական CSS / CSS-inlinin (Critical CSS / Inline Critical CSS): CSS ոճերի ինլայն ներդնում, որոնք անհրաժեշտ են տեսանելի մասի ցուցադրման համար (Above the Fold), որպեսզի արագացվի սկզբնական ռենդերինգը: Մնացած ոճերը բեռնվում են ասինխրոն:

Տեխնիկա	Նկարագրություն	Առավելություններ	Թերություններ
Քաշել բեռնում	Բեռնում ռեսուրսների հետաձգում՝ դուրս տեսանելի տարածքից	Արագ բեռնում տեսանելի բովանդակություն	Կարող է պահանջել JS իրականացման համար
SSR	Սերվերի կողմից ռենդերինգ, պատրաստ HTML ուղարկում	Արագ առաջին բովանդակության ցուցադրում, SEO-բարեկամություն	Սերվերի բեռի ավելացում
CSR հիդրատացիայով	Սկզբնական ռենդերինգ՝ հաճախորդի կողմից, հետագա հիդրատացիայով SSR բովանդակության	Դինամիկ հավելվածներ	Երկար բեռնում և ինտերակտիվություն առանց SSR
Ստրիմինգ HTML	HTML-ի մասերով ուղարկում՝ ըստ դրա սերվերի գեներացման, արագ սկսում է վերլուծել	Արագ սկիզբ վերլուծության	Զависում է սերվերի իրականացմանից
Կրիտիկական CSS	CSS ոճերի ինլայն ներդնում՝ տեսանելի մասի համար	Արագ տեսանելի մասի ռենդերինգը	Պահանջում է գործիքներ՝ կրիտիկական CSS առանձնացնելու համար

Ավելացվող ռենդերինգը՝ դա այս և այլ տեխնիկաների համակցություն է, որը նպատակ ունի բարելավել օգտագործողի փորձը՝ արագացնելով վեբ էջի ռենդերինգը։