HTML artık sırasız akabiliyor: JavaScript'siz parça güncelleme

Sorun: En yavaş parça herkesi bekletiyor

Sunucu bir HTML sayfasını yukarıdan aşağıya gönderir. Tarayıcı da geleni hemen çizmeye başlar. Buraya kadar güzel. Ama sayfanın ortasında yavaş bir parça varsa, mesela veritabanından gelen yorumlar, ondan sonraki her şey de bekler. Kullanıcı yarım bir sayfaya bakar.

Bunun bilinen bir çözümü var: Önce sayfanın iskeletini gönder, yavaş kısmın yerine “Yükleniyor…” koy, içerik hazır olunca onu akışın sonuna ekle ve doğru yere taşı. Facebook bunu 2009’da BigPipe adıyla yaptı. Bugün React’in Suspense’i ve Next.js de aynı fikri kullanıyor. Tek sorun, her framework bunu kendi küçük JavaScript koduyla yapıyor.

Tarayıcıya gelen çözüm: <template for>

Syntax’ın 1014. bölümünde Wes Bos ve Scott Tolinski, Chrome’un bu işi HTML’in kendisine taşıyan önerisini konuştu. Adı Declarative Partial Updates. İki parçası var: bir yer tutucu ve onu dolduran bir şablon.

<main>
  <h1>Ürün sayfası</h1>
  <?start name="yorumlar">
    <p>Yorumlar yükleniyor…</p>
  <?end>
</main>

<!-- ...akışın sonunda, sunucu hazır olunca: -->
<template for="yorumlar">
  <ul><li>Harika ürün!</li></ul>
</template>

<?start> ve <?end> birer processing instruction. HTML bunları eskiden yorum gibi görüp atlıyordu, şimdi okuyor. Tarayıcı for="yorumlar" olan şablonu görünce, aradaki “Yükleniyor…” yazısını siler ve şablonun içeriğini oraya koyar. Tek bir ekleme noktası istiyorsan <?marker name="..."> yeterli. Şablonun içine yeni bir marker koyarsan aynı yere tekrar tekrar ekleme yapabilirsin. Bu da liste ya da sohbet akışı gibi şeyler için kullanışlı.

Neden yeni bir eleman değil de processing instruction? Çünkü bunlar sayfanın yapısını bozmuyor. <head> içinde başlığı güncellemek ya da bir <table> içine satır eklemek gibi, normal bir elemanın duramayacağı yerlerde de çalışıyor.

Güvenlik sınırı

Bir şablon, sayfanın her yerini değiştiremiyor. Sadece kendi üst elemanının içindeki yer tutuculara ulaşabiliyor. Tek istisna, doğrudan <body> altına konan şablonlar: Onlar tüm sayfaya erişebiliyor. Amaç, sayfaya sızan güvenilmeyen bir HTML parçasının, mesela bir giriş formunu ele geçirmesini zorlaştırmak.

JavaScript tarafı

Önerinin ikinci parçası, JavaScript’e daha düzenli HTML ekleme metotları getiriyor: setHTML, appendHTML, beforeHTML gibi. Her birinin bir de akış (streaming) versiyonu var. Mesela streamHTMLUnsafe() bir yazılabilir akış döndürüyor. Bir fetch cevabını doğrudan bir elemana “boru” ile bağlayabiliyorsun, HTML geldikçe sayfaya ekleniyor. “Unsafe” ekli olanlar içeriği temizlemiyor (sanitize etmiyor), yani sadece güvendiğin kaynaklar için.

Neden önemli?

Bu teknik artık bir framework’e bağlı değil. PHP, Go ya da Python ile HTML üreten bir sunucu da aynı akışı yapabilir. Daha az JavaScript, daha hızlı görünen sayfa demek. Her tarayıcıya gelene kadar template-for-polyfill adlı bir polyfill de var. Ama bir tarayıcının parser’ını taklit edemediği için sınırları olduğunu unutma.

Sonra ne oldu?

• Bölüm yayınlandığında Chrome 150 beta aşamasındaydı. 30 Haziran 2026’da kararlı sürüme geçti ve <template for> ile processing instruction desteği herkese açıldı. Edge 150’de de var.
• WebKit ve Mozilla bu özelliğe resmi olarak olumlu görüş verdi. Ama Chrome’un Eylül’de güncellenen belgesine göre Safari ve Firefox henüz desteklemiyor. Bu görüşlerin ne anlama geldiğini web standartları yazımızda anlattık.
• fetch cevabını tek satırda metin akışına çeviren response.textStream() Chrome 151 ile geldi.
• JavaScript akış metotları hâlâ bir bayrak arkasında. Chrome’un yazısı Chrome 155’i hedef gösteriyordu, Chrome Status’ta hedef artık Chrome 157.

Düşün

• Senin sitende kullanıcıyı en çok bekleten parça hangisi? Onu bir yer tutucuyla sona bırakabilir misin?
• Bir özellik tek tarayıcıda varken onu kullanmaya ne zaman başlarsın?

Kendi cümlelerimizle yazılmış bir özettir, çeviri değildir. Tüm kaynaklar yukarıda.