Tarayıcılar sunucu kaynaklı out-of-order HTML streaming’i yerel özellik yapıyor
Yeni <template for> söz dizimi ve streaming DOM API’leriyle sayfanın bazı bölümleri diğerleri hâlâ yüklenirken kullanılabilir hale geliyor; standart şimdiden Chrome ve Edge’de gemiye bindi.
Tarayıcılar, sayfanın tamamı yüklenmeden bazı bölümleri görünür ve etkileşimli hale getiren sunucu kaynaklı HTML streaming modelini standart hale getiriyor. Böylece bu desen, her framework’ün kendi hilesi yerine doğrudan tarayıcı kabiliyetine dönüşüyor.
Öneri, mevcut <template> elemanına eklenen yeni bir for özelliği ve işaretleme için kullanılan özel processing-instruction işaretçileriyle out-of-order streaming’i destekliyor. Sunucu, bu mekanizma sayesinde sayfaya sonradan gelecek HTML parçalarını şimdiden hedefleyebiliyor.
Geliştiriciler, akışla güncellenecek yerleri <?marker> gibi processing-instruction işaretçileriyle tanımlayabiliyor veya <?start> ve <?end> arasına yedek içerik koyup, gerçek veri gelene kadar bu içeriğin gösterilmesini sağlayabiliyor.
Daha sonra gelen bir <template for="..."> bloğu işlendiğinde, tarayıcı ilgili start/end işaretçilerini ve aradaki yedek düğümleri DOM’dan kaldırıp, template içeriğini tam o konuma yerleştiriyor. Böylece geç gelen parça, sayfa yapısını bozmadan yerine oturuyor.
Bir <template for> yalnızca kendi ebeveyn elemanı içindeki processing-instruction’ları yamalayabiliyor; bu da farklı bileşenler arasında rastgele DOM enjeksiyonunu sınırlıyor. Ancak doğrudan <body> altında duran template’ler için istisna var: onlar tüm belgeyi, <head> içindekiler dahil, güncelleyebiliyor.
Bu işi desteklemek için bir dizi DOM ekleme metodu tanımlanıyor: setHTML, replaceWithHTML, beforeHTML, prependHTML, appendHTML ve afterHTML gibi statik çağrıların yanında streamHTML ve streamAppendHTML gibi streaming versiyonları da geliyor.
streamHTMLUnsafe() çağrısı, HTML fragment parser’a kademeli olarak veri besleyen bir WritableStream döndürüyor. Böylece sunucudan gelen parçalı HTML, tarayıcının içsel parser’ına doğrudan akıtılabiliyor.
Fetch API de response.textStream() ile güncelleniyor. Bu akış, hedef bir elemanın streaming HTML metoduna doğrudan pipe edilerek, ağ katmanından DOM’a kadar kesintisiz bir streaming hattı kurulabiliyor.
Bu yaklaşımla, 2009’daki Facebook BigPipe denemelerinden ve React Suspense streaming ile Next.js gibi framework’lerin kullandığı tekniklerden bildiğimiz model tarayıcı düzeyinde resmileşmiş oluyor. Artık bu desen, framework’lere özgü bir numara değil, standart bir tarayıcı özelliği.
Yeni deklaratif primitifler — <template for> ve processing-instruction hedefleri — WHATWG HTML Living Standard’a girdi. İlk uygulamalar Chrome 150 ve Edge 150 sürümlerinde sunuluyor; response.textStream() ise 151 sürümüyle geliyor.
Neden önemli
Sunucu kaynaklı HTML streaming’in tarayıcı standardı haline gelmesi, sayfa yükleme deneyimini framework bağımsız bir yetenek olarak tanımlıyor. Sunucular artık belli DOM konumlarını işaretleyip, ağır kısımlar hazır olduğunda bu noktalara parça parça HTML akıtabilirken, kullanıcı kalan içerik gelmeden sayfayı kullanmaya başlayabiliyor. Güvenlik ve bileşen sınırları için getirilen ebeveyn kısıtları ve yalnızca <body> altında verilen geniş yetki, bu esnekliği kontrollü bir alana hapsediyor. Chrome ve Edge’in erken desteği ile WHATWG standardındaki yeri, bu modelin yakın gelecekte web uygulamalarında yaygın bir temel desen olacağını işaret ediyor.
Sinyal mi, gürültü mü?
Bu haber önemli mi, yoksa abartı mı? Başkalarının ne dediğini görmeden önce sen karar ver.