Progressif renderleme nedir?

İlerleyici renderleme, web sayfasının yüklenme ve görüntüleme hızını optimize etmek için kullanılan bir yöntemdir. Bu yöntemde içerik, tamamen yüklenip gösterilmek yerine aşamalı olarak yüklenir ve gösterilir.

Ana avantajları şunlardır:

İlk anlamlı içeriğin (First Meaningful Paint) daha hızlı çizimi.
Kullanıcı tarafından yükleme hızının daha iyi algılanması.
Etkileşimli hale gelme süresinin (Time to Interactive) azaltılması.

İlerleyici renderleme teknikleri şunları içerir:

Tembel Yükleme (Lazy Loading): Kullanıcıya ihtiyaç duyulana kadar (sayfayı kaydırdıkça) önemli olmayan kaynakların (resimler veya videolar gibi) yüklenmesini ertelemek.
```

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

Sunucu Tarafı Renderleme (Server-Side Rendering - SSR): HTML sayfasını sunucuda oluşturmak ve önceden render edilmiş içeriği tarayıcıya göndermek.

// Next.js gibi bir framework kullanımı örneği
// functions/api.js
// export async function getServerSideProps(context) {
//   // Sunucudan veri alma
//   const data = await fetchData();
//   return {
//     props: { data }, // Veriyi bileşene iletme
//   }
// }
//
// function MyPage({ data }) {
//   // Verilerle bileşeni render etme
//   return <div>{/* ... */}</div>
// }

İstemci Tarafı Renderleme (Client-Side Rendering - CSR) ve hidrasyon: Tarayıcı, minimal HTML ve JavaScript alır. Daha sonra JavaScript, verileri yükler ve sayfayı tamamen tarayıcıda render eder. Hidrasyon, olay işleyicilerini zaten render edilmiş SSR içeriğine bağlama işlemidir.

Akışkan HTML iletimi (Streaming HTML): HTML, sunucuda üretilirken parça parça gönderilir, böylece tarayıcı, belgenin tamamı yüklenmeden önce analiz edip render etmeye başlayabilir.

<!-- Hipotetik akışkan iletim örneği -->
<html>
  <head>
    <title>Akışkan Sayfa</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- İlk gönderilen HTML kısmı -->
    <h1>Başlık</h1>
    <script src="script.js" async></script>
    <!-- Diğer HTML daha sonra gönderilebilir -->
  </body>
</html>

Kritik CSS / Inline CSS (Critical CSS / Inline Critical CSS): Sayfanın görünür kısmını (Above the Fold) göstermek için gerekli CSS stillerinin inline olarak gömülmesi, ilk render hızını artırmak içindir. Diğer stiller asenkron olarak yüklenir.

Teknik	Açıklama	Avantajlar	Dezavantajlar
Tembel Yükleme	Görünür alan dışındaki kaynakların gecikmeli yüklenmesi	Görünen içeriğin hızlı yüklenmesi	Uygulama için JavaScript gerekebilir
SSR	Sunucu tarafında render, hazır HTML gönderimi	Hızlı ilk içerik renderi, SEO dostu	Sunucu yükünü artırır
CSR ile hidrasyon	İlk render istemci tarafında, sonra SSR içeriğine hidrasyon yapılması	Dinamik uygulamalar	Uzun yükleme ve SSR olmadan etkileşim sınırlı olur
Streaming HTML	HTML'in parça parça gönderilmesi	Hızlı analiz başlangıcı	Sunucu uygulamasına bağlıdır
Kritik CSS	Görünen alan için stillerin inline gömülmesi	Hızlı görünür alan renderi	Kritik CSS çıkarmak için araçlar gerekebilir

İlerleyici renderleme, bu tekniklerin ve diğerlerinin bir kombinasyonudur ve kullanıcı deneyimini geliştirmeyi, web sayfasının render hızını artırmayı amaçlar.