Šta je progresivno renderovanje?

Progresivno renderovanje je metodika za optimizaciju brzine učitavanja i prikaza veb stranice, pri čemu se sadržaj učitava i prikazuje etapno, a ne odmah sve.

Njegove glavne prednosti:

Brže prikazivanje prvog značajnog sadržaja (First Meaningful Paint).
Poboljšano percipiranje brzine učitavanja od strane korisnika.
Smanjenje vremena do interaktivnosti (Time to Interactive).

Glavne tehnike progresivnog renderovanja uključuju:

Lazy Loading: Odlaganje učitavanja neesencijalnih resursa (kao što su slike ili video zapisi) dok ih korisnik ne zatreba (dok ne skroluje do njih).
```

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

Server-side rendering (SSR): Generisanje HTML stranice na serveru i slanje već renderovanog sadržaja pretraživaču.

// Primer korišćenja frameworka za SSR (npr. Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Dobavljanje podataka na serveru
//   const data = await fetchData();
//   return {
//     props: { data }, // Prenos podataka komponenti
//   }
// }
//
// function MyPage({ data }) {
//   // Renderovanje komponente sa podacima
//   return <div>{/* ... */}</div>
// }

Client-side rendering (CSR) sa hidratacijom: Pregledač prima minimalni HTML i JavaScript. JavaScript zatim učitava podatke i potpuno renderuje stranicu u pretraživaču. Hidratacija je proces povezivanja događajnih rukovaoca sa već renderovanim SSR sadržajem na klijentu.

Streaming HTML: Slanje HTML-a u delovima kako se generiše na serveru, što omogućava pretraživaču da počne sa parsiranjem i renderovanjem pre potpunog učitavanja dokumenta.

<!-- Hipotetički primer streaminga -->
<html>
  <head>
    <title>Streaming stranica</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Deo HTML-a koji je poslat prvi -->
    <h1>Naslov</h1>
    <script src="script.js" async></script>
    <!-- Ostali HTML može biti poslat kasnije -->
  </body>
</html>

Kritični CSS / Inline Critical CSS: Inline ugrađivanje CSS stilova koji su neophodni za prikaz vidljivog dela stranice (Above the Fold), čime se ubrzava inicijalno renderovanje. Ostali stilovi se učitavaju asinhrono.

Tehnika	Opis	Prednosti	Nedostaci
Lazy Loading	Odlaganje učitavanja resursa van vidljivog područja	Brže učitavanje vidljivog sadržaja	Može zahtevati JS za implementaciju
SSR	Renderovanje na serveru, slanje gotovog HTML-u	Brzo prikazivanje prvog sadržaja, SEO-prijateljsko	Povećava opterećenje servera
CSR sa hidratacijom	Početno renderovanje na klijentu sa naknadnom hidratacijom SSR sadržaja	Dinamičke aplikacije	Sporo učitavanje i interaktivnost bez SSR-a
Streaming HTML	Slanje HTML-a u delovima	Brz početak parsiranja	Zavisi od server implementacije
Kritični CSS	Inline ugrađivanje stilova za vidljivi deo	Brzo renderovanje vidljivog dela	Zahteva alate za ekstrakciju kritičnog CSS-a

Progresivno renderovanje je kombinacija ovih i drugih tehnika, usmerena na poboljšanje korisničkog iskustva ubrzavanjem renderovanja veb stranice.