Какво е прогресивно рендиране?

Прогресивното рендериране е методика за оптимизация на скоростта на зареждане и показване на уеб страница, при която съдържанието се зарежда и показва етапно, а не цялостно наведнъж.

Основните му предимства:

По-бързо рендериране на първото значимо съдържание (First Meaningful Paint).
Подобрено възприятие за скорост на зареждане от потребителя.
Намаляване на времето до интерактивност (Time to Interactive).

Основните техники на прогресивното рендериране включват:

Lazy Loading: Отлагане на зареждането на неосновни ресурси (като изображения или видеа) до момента, в който потребителят ги нуждае (докато не превърти страницата до тях).
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Пример изображение" loading="lazy">
```

Server-Side Rendering (SSR): Генериране на HTML страницата на сървъра и изпращане на вече рендерираното съдържание към браузъра.

// Пример за използване на framework за SSR (напр. Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Получаване на данни на сървъра
//   const data = await fetchData();
//   return {
//     props: { data }, // Предаване на данните към компонента
//   }
// }
//
// function MyPage({ data }) {
//   // Рендериране на компонента с данните
//   return <div>{/* ... */}</div>
// }

Client-Side Rendering (CSR) с хидратация: Браузърът получава минимален HTML и JavaScript. JavaScript след това зарежда данните и напълно рендерира страницата в браузъра. Хидратацията е процесът на прикачване на обработчици на събития към вече рендерираното SSR съдържание на клиента.

Streaming HTML: Изпращане на HTML части по мере на неговото генериране на сървъра, което позволява на браузъра да започне парсинг и рендериране още преди цялостното зареждане на документа.

<!-- Пример за хипотетично потоково предаване -->
<html>
  <head>
    <title>Потокова страница</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Част от HTML, която е изпратена първа -->
    <h1>Заглавие</h1>
    <script src="script.js" async></script>
    <!-- Останалият HTML може да бъде изпратен по-късно -->
  </body>
</html>

Критичен CSS / Inline Critical CSS: Вграждане на CSS стилове, необходими за показване на видимата част от страницата (Above the Fold), за да се ускори първоначалното рендериране. Останалите стилове се зареждат асинхронно.

Техника	Описание	Предимства	Недостатъци
Lazy Loading	Забавяне на зареждането на ресурси извън видимата област	По-бързо зареждане на видимото съдържание	Може да изисква JS за реализиране
SSR	Рендериране на сървъра, изпращане на готов HTML	Бързо показване на първото съдържание, SEO-дружелюбно	Увеличава натоварването на сървъра
CSR с хидратация	Начално рендериране на клиента с последваща хидратация на SSR съдържанието	Динамични приложения	Бавно зареждане и интерактивност без SSR
Streaming HTML	Изпращане на HTML части	Бърз старт на парсинга	Зависи от сървърната реализация
Критичен CSS	Inline вграждане на стилове за видимата част	Бързо рендериране на видимата част	Изисква инструменти за извличане на критичен CSS

Прогресивното рендериране е комбинация от тези и други техники, насочени към подобряване на потребителското изживяване чрез ускоряване на рендерирането на уеб страницата.