Čo je progresívne vykresľovanie?

Progresívne vykresľovanie je metóda optimalizácie rýchlosti načítania a zobrazovania webovej stránky, pri ktorej sa obsah načítava a zobrazuje etapovo, nie naraz úplne.

Jeho hlavné výhody:

Rýchlejšie vykreslenie prvého významného obsahu (First Meaningful Paint).
Zlepšené vnímanie rýchlosti načítania používateľom.
Zníženie času do interaktivity (Time to Interactive).

Hlavné techniky progresívneho vykresľovania zahŕňajú:

Línie načítania (Lazy Loading): Odkladanie načítania nedôležitých zdrojov (napríklad obrázkov alebo videí) do doby, kým ich používateľ nebude potrebovať (kým neprelistuje stránku k nim).
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Príklad obrázka" loading="lazy">
```

Vykresľovanie na strane servera (Server-Side Rendering - SSR): Vytváranie HTML stránky na serveri a odoslanie už vykresleného obsahu prehliadaču.

// Príklad použitia frameworku pre SSR (napríklad Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Získanie dát na serveri
//   const data = await fetchData();
//   return {
//     props: { data }, // Prenos dát do komponentu
//   }
// }
//
// function MyPage({ data }) {
//   // Vykreslenie komponentu s dátami
//   return <div>{/* ... */}</div>
// }

Vykresľovanie na strane klienta (Client-Side Rendering - CSR) s hydratáciou: Prehliadač dostáva minimálny HTML a JavaScript. JavaScript následne načíta dáta a úplne vykreslí stránku v prehliadači. Hydratácia je proces pripnutia obsluhovačov udalostí ku už vykreslenému SSR obsahu na klientovi.

Streamovanie HTML (Streaming HTML): Odosielanie HTML časťami počas jeho generovania na serveri, čo umožňuje prehliadaču začať parsovanie a vykresľovanie ešte pred úplným načítaním celého dokumentu.

<!-- Príklad hypotetického streamovania -->
<html>
  <head>
    <title>Streamovaná stránka</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Časť HTML, ktorá bola odoslaná prvá -->
    <h1>Nadpis</h1>
    <script src="script.js" async></script>
    <!-- Zvyšok HTML môže byť odoslaný neskôr -->
  </body>
</html>

Kritické CSS / CSS-inlinovanie (Critical CSS / Inline Critical CSS): Inlinové vloženie CSS štýlov, ktoré sú potrebné na zobrazenie viditeľnej časti stránky (Above the Fold), aby sa urýchlilo počiatočné vykreslenie. Ostatné štýly sa načítavajú asynchrónne.

Technika	Popis	Výhody	Nevýhody
Línie načítania	Odložené načítanie zdrojov mimo viditeľnej oblasti	Rýchle načítanie viditeľného obsahu	Môže vyžadovať JS na implementáciu
SSR	Vykresľovanie na serveri, odoslanie hotového HTML	Rýchle vykreslenie prvého obsahu, SEO-priateľské	Zvýšenie záťaže na serveri
CSR s hydratáciou	Počiatočné vykreslenie na klientovi s následnou hydratáciou SSR obsahu	Dynamické aplikácie	Dlhé načítanie a interaktivita bez SSR
Streamovanie HTML	Odosielanie HTML časťami	Rýchly štart parsovania	Závisí od serverovej implementácie
Kritické CSS	Inlinové vloženie štýlov pre viditeľnú časť	Rýchle vykreslenie viditeľnej časti	Vyžaduje nástroje na vyčlenenie kritického CSS

Progresívne vykresľovanie je kombináciou týchto a ďalších techník, zameraných na zlepšenie používateľského zážitku prostredníctvom zrýchlenia vykreslenia webovej stránky.