Co je to progresivní vykreslování?

Progresivní vykreslování je metoda optimalizace rychlosti načítání a zobrazování webové stránky, při které se obsah načítá a zobrazuje etapovitě, nikoli najednou.

Jeho hlavní výhody:

Rychlejší vykreslení prvního smysluplného obsahu (First Meaningful Paint).
Zlepšené vnímání rychlosti načítání uživatelem.
Zkrácení doby do interaktivity (Time to Interactive).

Hlavní techniky progresivního vykreslování zahrnují:

Lazy Loading: Odložení načítání nedůležitých zdrojů (například obrázků nebo videí) do doby, než jsou potřeba uživatelem (dokud nesroluje stránku k nim).
```

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

Server-side rendering (SSR): Generování HTML stránky na serveru a odeslání již vykresleného obsahu do prohlížeče.

// Příklad použití frameworku pro SSR (například Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Získání dat na serveru
//   const data = await fetchData();
//   return {
//     props: { data }, // Předání dat komponentě
//   }
// }
//
// function MyPage({ data }) {
//   // Vykreslení komponenty s daty
//   return <div>{/* ... */}</div>
// }

Client-side rendering (CSR) s hydratací: Prohlížeč obdrží minimální HTML a JavaScript. JavaScript poté načte data a kompletně vykreslí stránku v prohlížeči. Hydratace je proces připojení obsluhovačů událostí ke již vykreslenému obsahu SSR na klientovi.

Streaming HTML: Odesílání HTML po částech podle toho, jak je generováno na serveru, což umožňuje prohlížeči začít parsovat a vykreslovat ještě před úplným načtením dokumentu.

<!-- Příklad hypotetického streamování -->
<html>
  <head>
    <title>Streaming stránka</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Část HTML, která je odeslána jako první -->
    <h1>Nadpis</h1>
    <script src="script.js" async></script>
    <!-- Zbytek HTML může být odeslán později -->
  </body>
</html>

Kritické CSS / Inline Critical CSS: Inline vložení stylů CSS, které jsou nezbytné pro zobrazení viditelné části stránky (Above the Fold), čímž se urychlí počáteční vykreslení. Ostatní styly jsou načítány asynchronně.

Technika	Popis	Výhody	Nevýhody
Lazy Loading	Odložení načítání zdrojů mimo viditelnou oblast	Rychlejší načítání viditelného obsahu	Může vyžadovat JavaScript pro implementaci
SSR	Vykreslování na serveru, odeslání hotového HTML	Rychlé vykreslení prvního obsahu, přátelské k SEO	Zvýšení zátěže serveru
CSR s hydratací	Počáteční vykreslení na klientovi s následnou hydratací SSR obsahu	Dynamické aplikace	Pomalé načítání a interaktivita bez SSR
Streaming HTML	Odesílání HTML po částech	Rychlý začátek parsování	Závisí na implementaci serveru
Kritické CSS	Inline vložení stylů pro viditelnou část	Rychlé vykreslení viditelné části	Vyžaduje nástroje pro extrakci kritického CSS

Progresivní vykreslování je kombinací těchto a dalších technik, zaměřených na zlepšení uživatelského zážitku tím, že urychluje vykreslování webové stránky.