Kas ir progresīva renderēšana?

Progresīvais renderings — tas ir metode, kas optimizē lapas ielādes un attēlošanas ātrumu, kur saturs tiek ielādēts un parādīts pa posmiem, nevis pilnībā uzreiz.

Tās galvenās priekšrocības:

Ātrāka pirmā nozīmīgā satura (First Meaningful Paint) attēlošana.
Uzlabota lietotāja uztvere par ielādes ātrumu.
Laika līdz interaktivitātei (Time to Interactive) samazināšana.

Galvenās tehnikas:

Lazy Loading (Vēlaina ielāde): Ne tik svarīgu resursu (piemēram, attēlu vai video) atlikšana līdz brīdim, kad tie ir nepieciešami lietotājam.
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Piemēra attēls" loading="lazy">
```

Servera puses renderēšana (Server-Side Rendering - SSR): HTML lapas veidošana serverī un jau attēlotā satura nosūtīšana pārlūkprogrammai.

// Piemērs ar SSR frameworku (piemēram, Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Datu iegūšana serverī
//   const data = await fetchData();
//   return {
//     props: { data },
//   }
// }
//
// function MyPage({ data }) {
//   // Komponenta ar datiem
//   return <div>{/* ... */}</div>
// }

Klienta puses renderēšana (Client-Side Rendering - CSR) un hidrācija: Pārlūkprogramma saņem minimālo HTML un JavaScript. JavaScript ielādē datus un pilnībā renderē lapu pārlūkprogrammā. Hidrācija — tas ir process, kad pievieno notikumu apstrādātājus jau renderētajam SSR saturam.

Streamēšana HTML (Streaming HTML): HTML tiek sūtīts pa daļām, kad tas tiek ģenerēts serverī, ļaujot pārlūkprogrammai sākt analīzi un renderēšanu vēl pirms pilnīgas dokumenta ielādes.

<!-- Hipotētisks strumēšanas piemērs -->
<html>
  <head>
    <title>Streamēšanas lapa</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Pirmā HTML daļa, kas jau ir nosūtīta -->
    <h1>Virsraksts</h1>
    <script src="script.js" async></script>
    <!-- Pārējais HTML var tikt nosūtīts vēlāk -->
  </body>
</html>

Kritiskais CSS / CSS iekšā (Critical CSS / Inline Critical CSS): CSS stilu iekšējā iekļaušana, kas nepieciešama redzamas lapas daļas (Above the Fold) ātrai attēlošanai, lai paātrinātu sākotnējo renderēšanu. Citi stili tiek ielādēti asenhroni.

Tehnika	Apraksts	Priekšrocības	Trūkumi
Lazy Loading	Resursu atlikšana ārpus redzamas zonas	Ātra redzama satura ielāde	Var prasīt JS realizācijai
SSR	Servera puses renderēšana, gatavs HTML nosūtīšana	Ātra pirmā satura attēlošana, SEO draudzīgums	Palielināta servera slodze
CSR ar hidrāciju	Sākotnējais renderējums klienta pusē ar turpmāku SSR satura hidrāciju	Dzinamiskas lietojumprogrammas	Ilgs ielādes laiks un interaktivitāte bez SSR
Streamēšana HTML	HTML sūtīšana pa daļām, kad tas tiek ģenerēts serverī, ļaujot sākt analīzi	Ātra analīzes sākšana	Atkarīgs no servera realizācijas
Kritiskais CSS	CSS stilu iekšējā iekļaušana — redzamas daļas ātrai attēlošanai	Ātra redzamas daļas renderēšana	Prasības rīki kritiskā CSS atdalīšanai

Progresīvais renderings — tas ir šo un citu tehniku kombinācija, kas vērsta uz lietotāja pieredzes uzlabošanu, paātrinot tīmekļa lapas attēlošanu.