What is progressive rendering?

Progressive rendering is a technique for optimizing the speed of loading and displaying a web page, where content loads and displays gradually rather than all at once.

Its main advantages:

Faster rendering of the first meaningful content (First Meaningful Paint).
Improved perception of loading speed by the user.
Reduced time to interactivity (Time to Interactive).

Main techniques of progressive rendering include:

Lazy Loading: Delaying the loading of non-essential resources (such as images or videos) until they are needed by the user (until they scroll to them).
```

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

Server-Side Rendering (SSR): Generating the HTML page on the server and sending the already rendered content to the browser.

// Example of using a framework for SSR (e.g., Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Fetch data on the server
//   const data = await fetchData();
//   return {
//     props: { data }, // Passing data to the component
//   }
// }
//
// function MyPage({ data }) {
//   // Rendering component with data
//   return <div>{/* ... */}</div>
// }

Client-Side Rendering (CSR) with hydration: The browser receives minimal HTML and JavaScript. JavaScript then loads data and fully renders the page in the browser. Hydration is the process of attaching event handlers to the already rendered SSR content on the client.

Streaming HTML: Sending HTML in parts as it is generated on the server, allowing the browser to start parsing and rendering before the entire document is fully loaded.

<!-- Example of hypothetical streaming -->
<html>
  <head>
    <title>Streaming Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Part of HTML sent first -->
    <h1>Header</h1>
    <script src="script.js" async></script>
    <!-- Rest of HTML can be sent later -->
  </body>
</html>

Critical CSS / Inline Critical CSS: Inline embedding of CSS styles necessary for displaying the visible part of the page (Above the Fold) to speed up initial rendering. Other styles are loaded asynchronously.

Technique	Description	Advantages	Disadvantages
Lazy Loading	Deferred loading of resources outside the visible area	Fast loading of visible content	May require JS for implementation
SSR	Server-side rendering, sending ready HTML	Fast rendering of the first content, SEO-friendly	Increased server load
CSR with hydration	Initial rendering on the client with subsequent hydration of SSR content	Dynamic applications	Long loading and interactivity without SSR
Streaming HTML	Sending HTML in parts	Fast parsing start	Depends on server implementation
Critical CSS	Inline embedding of styles for the visible part	Fast rendering of the visible part	Requires tools to extract critical CSS

Progressive rendering is a combination of these and other techniques aimed at improving user experience by speeding up web page rendering.