Ce este redarea progresivă?

Redarea progresivă este o metodă de optimizare a vitezei de încărcare și afișare a paginii web, în care conținutul este încărcat și afișat etapizat, nu complet deodată.

Principalele avantaje:

O randare mai rapidă a primului conținut semnificativ (First Meaningful Paint).
Percepție îmbunătățită a vitezei de încărcare de către utilizator.
Reducerea timpului până la interactivitate (Time to Interactive).

Tehnicile principale ale randării progresive includ:

Lazy Loading: Amânarea încărcării resurselor neesențiale (cum ar fi imagini sau videoclipuri) până când sunt necesare de către utilizator (până când derulează pagina până la ele).
```

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

Server-Side Rendering (SSR): Generarea paginii HTML pe server și trimiterea conținutului deja randat către browser.

// Exemplu de utilizare a unui framework pentru SSR (de exemplu, Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Obținerea datelor pe server
//   const data = await fetchData();
//   return {
//     props: { data }, // Transmiterea datelor către componentă
//   }
// }
//
// function MyPage({ data }) {
//   // Randarea componentei cu datele
//   return <div>{/* ... */}</div>
// }

Client-Side Rendering (CSR) cu hidratare: Browserul primește HTML-ul minim și JavaScript-ul. JavaScript-ul apoi încarcă datele și randază pagina complet în browser. Hidratarea este procesul de atașare a handler-urilor de evenimente la conținutul SSR deja randat pe client.

Streaming HTML: Trimiterea HTML-ului în părți pe măsură ce este generat pe server, permițând browserului să înceapă parsarea și randarea chiar înainte de încărcarea completă a documentului.

<!-- Exemplu de streaming ipotetic -->
<html>
  <head>
    <title>Pagina streaming</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Partea HTML trimisă prima -->
    <h1>Titlu</h1>
    <script src="script.js" async></script>
    <!-- Restul HTML-ului poate fi trimis mai târziu -->
  </body>
</html>

CSS critic / Inline CSS critic: Încorporarea inline a stilurilor CSS necesare pentru afișarea părții vizibile a paginii (deasupra plisei), pentru a accelera randarea inițială. Restul stilurilor sunt încărcate asincron.

Tehnică	Descriere	Avantaje	Dezavantaje
Lazy Loading	Întârzierea încărcării resurselor în afara zonei vizibile	Încărcare mai rapidă a conținutului vizibil	Poate necesita JavaScript pentru implementare
SSR	Randare pe server, trimiterea HTML-ului gata făcut	Randare rapidă a primului conținut, prietenos cu SEO	Crește încărcarea pe server
CSR cu hidratare	Randare inițială pe client cu hidratarea ulterioară a conținutului SSR	Aplicații dinamice	Încărcare lentă și fără SSR, interactivitate întârziată
Streaming HTML	Trimiterea HTML-ului în părți	Start rapid de parsare	Depinde de implementarea serverului
CSS critic	Încorporarea inline a stilurilor pentru partea vizibilă	Randare rapidă a părții vizibile	Necesită instrumente pentru extragerea CSS critic

Randarea progresivă este o combinație a acestor tehnici și a altora, menită să îmbunătățească experiența utilizatorului prin accelerarea randării paginii web.