Kas yra progresyvus atvaizdavimas?

Progresyvusis renderavimas — tai metodas, optimizuojantis tinklalapio įkėlimo ir rodymo greitį, kai turinys įkeliama ir rodomas etapais, o ne iš karto visiškai.

Jo pagrindiniai privalumai:

Greitesnis pirmojo reikšmingo turinio (First Meaningful Paint) atvaizdavimas.
Pagerintas vartotojo suvokimas apie įkėlimo greitį.
Laiko iki interaktyvumo (Time to Interactive) sumažinimas.

Pagrindinės technikos:

Lazy Loading (Vėlyvas įkėlimas): Nereikšmingų išteklių (pvz., vaizdų ar vaizdo įrašų) vėlinis įkėlimas iki tol, kol jie bus reikalingi vartotojui.
```

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

Serverio pusės renderavimas (Server-Side Rendering - SSR): HTML puslapio sudarymas serveryje ir jau atvaizduoto turinio siuntimas naršyklei.

// Pavyzdys naudojant SSR framework'ą (pvz., Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Duomenų gavimas serveryje
//   const data = await fetchData();
//   return {
//     props: { data },
//   }
// }
//
// function MyPage({ data }) {
//   // Komponento atvaizdavimas su duomenimis
//   return <div>{/* ... */}</div>
// }

Kliento pusės renderavimas (Client-Side Rendering - CSR) ir hidracija: Naršyklė gauna minimalų HTML ir JavaScript. JavaScript įkelia duomenis ir visiškai atvaizduoja puslapį naršyklėje. Hidracija — tai procesas, kai prie jau atvaizduoto SSR turinio pridedami įvykio tvarkyklės.

HTML srautas (Streaming HTML): HTML siunčiamas dalimis, kai jis generuojamas serveryje, leidžiant naršyklei pradėti analizuoti ir atvaizduoti dar prieš pilną dokumento įkėlimą.

<!-- Hipotetinis srautinio perdavimo pavyzdys -->
<html>
  <head>
    <title>Srautinė puslapis</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Pirmoji HTML dalis, kuri jau išsiųsta -->
    <h1>Antraštė</h1>
    <script src="script.js" async></script>
    <!-- Likęs HTML gali būti išsiųstas vėliau -->
  </body>
</html>

Kritinis CSS / Inline CSS (Critical CSS / Inline Critical CSS): CSS stilių įterpimas į HTML, reikalingas matomai puslapio daliai (Above the Fold), siekiant pagreitinti pirmąjį atvaizdavimą. Kiti stiliai įkeliami asinchroniškai.

Technika	Aprašymas	Privalumai	Trūkumai
Lazy Loading	Išteklių vėlyvas įkėlimas, išorėje matomoje srityje	Greitas matomo turinio įkėlimas	Gali reikėti JS įgyvendinimui
SSR	Serverio pusės renderavimas, paruošto HTML siuntimas	Greitas pirmojo turinio atvaizdavimas, SEO draugiškumas	Padidėjusi serverio apkrova
CSR su hidracija	Pradinis renderavimas kliento pusėje su vėlesne SSR turinio hidracija	Dinamiškos programėlės	Ilgas įkėlimas ir interaktyvumas be SSR
HTML srautas	HTML dalimis siuntimas, kai jis generuojamas serveryje, leidžiant pradėti analizę	Greitas analizės pradžia	Priklauso nuo serverio įgyvendinimo
Kritinis CSS	CSS stilių įterpimas į HTML, reikalingas matomai puslapio daliai	Greitas matomos dalies atvaizdavimas	Reikia įrankių kritinio CSS išskyrimui

Progresyvusis renderavimas — tai šių ir kitų technikų derinys, skirtas pagerinti naudotojo patirtį, pagreitinant tinklalapio atvaizdavimą.