Wat is progressieve rendering?

Progressieve rendering is een optimalisatietechniek voor de snelheid van het laden en weergeven van een webpagina, waarbij de inhoud stapsgewijs wordt geladen en weergegeven, in plaats van alles tegelijk.

De belangrijkste voordelen:

Snellere weergave van de eerste betekenisvolle inhoud (First Meaningful Paint).
Verbeterde perceptie van laadsnelheid door de gebruiker.
Vermindering van de tijd tot interactie (Time to Interactive).

De belangrijkste technieken van progressieve rendering omvatten:

Lazy Loading: Het uitstellen van het laden van niet-essentiële bronnen (zoals afbeeldingen of video's) totdat ze door de gebruiker nodig zijn (totdat ze de pagina ernaartoe scrollen).
```

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

Server-side rendering (SSR): Het genereren van de HTML-pagina op de server en het verzenden van de reeds gerenderde inhoud naar de browser.

// Voorbeeld van gebruik van een framework voor SSR (bijvoorbeeld Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Data ophalen op de server
//   const data = await fetchData();
//   return {
//     props: { data }, // Data doorgeven aan component
//   }
// }
//
// function MyPage({ data }) {
//   // Rendering van component met data
//   return <div>{/* ... */}</div>
// }

Client-side rendering (CSR) met hydratatie: De browser ontvangt minimale HTML en JavaScript. JavaScript laadt vervolgens de data en rendert de pagina volledig in de browser. Hydratatie is het proces waarbij event handlers worden gekoppeld aan de reeds gerenderde SSR-inhoud op de client.

Streaming HTML: Het verzenden van HTML in delen naarmate het wordt gegenereerd op de server, waardoor de browser kan beginnen met parseren en renderen nog voordat het volledige document is geladen.

<!-- Voorbeeld van hypothetische streaming -->
<html>
  <head>
    <title>Streaming pagina</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Deel van HTML dat als eerste wordt verzonden -->
    <h1>Titel</h1>
    <script src="script.js" async></script>
    <!-- De rest van HTML kan later worden verzonden -->
  </body>
</html>

Critical CSS / Inline Critical CSS: Inline CSS-stijlen die nodig zijn voor het weergeven van het zichtbare deel van de pagina (Above the Fold), om de initiële rendering te versnellen. De overige stijlen worden asynchroon geladen.

Techniek	Beschrijving	Voordelen	Nadelen
Lazy Loading	Uitgestelde loading van bronnen buiten het zichtbare gebied	Snellere weergave van zichtbare inhoud	Kan JavaScript vereisen voor implementatie
SSR	Server-side rendering, verzenden van kant-en-klare HTML	Snellere eerste inhoud, SEO-vriendelijk	Verhoogde belasting op de server
CSR met hydratatie	Initiële rendering op de client met daaropvolgende hydratatie van SSR-inhoud	Dynamische applicaties	Langzaam laden en zonder SSR interactief zijn
Streaming HTML	HTML in delen verzenden	Snelle start van parseren	Afhankelijk van serverimplementatie
Critical CSS	Inline CSS voor het zichtbare deel	Snelle weergave van het zichtbare deel	Hulpmiddelen nodig voor het extraheren van kritische CSS

Progressieve rendering is een combinatie van deze en andere technieken, gericht op het verbeteren van de gebruikerservaring door het versnellen van de weergave van de webpagina.