Bildirime dayalı kısmi güncellemeler

Barry Pollard

Noam Rosenthal

Yayın tarihi: 19 Mayıs 2026, Son güncelleme tarihi: 8 Eylül 2026

Web, başlangıçta statik ve doküman odaklı bir ortam olsa da uzun zaman önce bu durum değişti. Modern ve zengin web uygulamaları, iletişim kurma, satın alma, zengin içerik tüketme ve karmaşık hayatımızı yönetme gibi birçok nedenle herkes tarafından kullanılmaktadır.

HTML, tüm gelişmelerine rağmen içerik hazır olduğunda veya kullanıcı tarafından tüketildiğinde çok az dikkate alınarak yukarıdan aşağıya doğru sırayla sunulmaya devam ediyor. CSS, içeriğin sırasını değiştirmenize olanak tanır ancak genellikle erişilebilirlik açısından önemli yan etkileri olur. JavaScript, DOM'u çeşitli API'ler aracılığıyla değiştirmenize olanak tanıyarak bu durumdan bir ölçüde kurtulmanızı sağlar. Ancak bu API'ler genellikle ayrıntılı söz dizimi veya HTML'ye bağlanmak için DOM ağaçlarının oluşturulmasını gerektirir.

Ortamın istemci-sunucu yapısı göz önüne alındığında performans, web için son derece önemlidir. Ancak HTML'nin bu sıralı yapısını atlamak için genellikle optimum olmayan seçimler yapılır ve bu da performansı yavaşlatır. Sayfanın tamamının hazır olmasını beklemek veya bileşenleri eşzamansız olarak sunmak için ağır bir çerçeve kullanmak bu kapsamdadır. JavaScript çerçevelerinin popülerliği, web geliştiricilerin web'in başlangıcındaki katı doküman zihinsel modeli yerine bileşen tabanlı bir modeli tercih ettiğini gösteriyor.

Chrome Ekibi bu sorunu değerlendiriyor ve Bildirim Temelli Kısmi Güncellemeler adı altında web platformuna yeni eklemeler geliştiriyor.

Yeni API'lerin ilk iki grubu, HTML'nin daha az doğrusal bir şekilde yayınlanmasını kolaylaştırır. Bu, HTML belgesinin kendisinde sırası bozulmuş şekilde veya yeni JavaScript API'leri kullanılarak HTML'nin mevcut belgelere dinamik olarak eklenmesini kolaylaştıran yollarla yapılabilir. Bu yeni API'leri henüz desteklemeyen tarayıcılarda bile hemen kullanabilmeniz için polyfill'ler de mevcuttur.

Sıra dışı yayın

İlk değişiklik grubu, for özelliğiyle <template> HTML öğesini ve işleme talimatı yer tutucularını kullanan yeni sıra dışı akış API'leridir. Örneğin:

<div>
  <?marker name="placeholder">
</div>

...

<template for="placeholder">
  Here is some <em>HTML content</em>!
</template>

İşleme talimatları, XML'de uzun süredir bulunuyor ancak HTML'de yorum olarak ele alınıyor ve yoksayılıyor. Bu yeni API, bu durumu değiştirerek HTML'ye işleme talimatları getiriyor. Örneğin, tarayıcı <?marker name="placeholder"> işleme talimatını gördüğünde, daha önce olduğu gibi hemen hiçbir şey yapmaz ancak daha sonra buna referans verilebilir.

for özelliği içeren <template> öğesi, name özelliğiyle karşılık gelen işlem talimatlarını arar ve içeriği değiştirir. Bu durumda, ayrıştırıldıktan sonra DOM aşağıdaki gibi olur (bazı boşluk farklılıkları göz ardı edilerek):

<div>
  Here is some <em>HTML content</em>!
</div>

Değiştirme için kullanılan <?marker> özelliğinin yanı sıra, şablon işlenmeden önce geçici yer tutucu içeriğin gösterilmesine olanak tanıyan <?start> ve <?end> aralık işaretçileri de vardır:

<div>
  <?start name="another-placeholder">
  Loading…
  <?end>
</div>

...

<template for="another-placeholder">
  Here is some <em>HTML content</em>!
</template>

Bu durumda, <template> görülene kadar Loading… dizesi gösterilir ve ardından yeni içerikle değiştirilir.

Birden fazla güncellemeye izin vermek için şablonlara işleme talimatları da ekleyebilirsiniz:

<ul id="results">
  <?start name="results">
  Loading…
  <?end>
</ul>

...

<template for="results">
  <li>Result One</li>
  <?marker name="results">
</template>

...

<template for="results">
  <li>Result Two</li>
  <?marker name="results">
</template>

...

Bu, ayrıştırılıp işlendikten sonra aşağıdaki HTML'yi oluşturur:

<ul id="results">
  <li>Result One</li>
  <li>Result Two</li>
  <?marker name="results">
</ul>

Belgeye daha sonra başka <template for="results"> yer tutucuları eklenmesi ihtimaline karşı, en sondaki son işleme talimatıyla.

Neden standart HTML öğeleri yerine işlem talimatları kullanılıyor?

Bu API'yi ilk kez kullananların sıkça sorduğu bir sorudur. <slot> veya <template> öğelerinin kendilerini kullanma önerileri verilir. Bu teklifin ilk sürümünde standart HTML öğeleri kullanılıyordu ancak tasarım üzerinde yineleme yapıldıkça işleme talimatlarına geçildi. İşleme talimatları, DOM'u etkilemeden yamaların uygulanmasına olanak tanır. Bu, <head> içinde (ör. <title> güncellemeleri için) veya hatta <table> gibi diğer öğelerin içinde (ör. isteğe bağlı ek satırlar eklemek için) kullanılmasını sağlar.

Söz dizimi birçok web geliştirici için yabancı olsa da işleme talimatları, geriye dönük uyumluluk sorunları olasılığı daha düşük olduğundan çok daha fazla esneklik sunar. Bu özellikler XML'de zaten kullanılıyordu ve bu öneri sayesinde artık HTML standardının bir parçasıdır.

Demo

Bu videoda, akışlı HTML ile temel bir fotoğraf albümü uygulaması uygulanmaktadır:

Durum ve fotoğraflar, ilk düzenden sonra HTML'ye aktarılır.

Kullanım alanları

Bu sırasız yama HTML'sinin, akış HTML'siyle birlikte kullanılabileceği birçok alan vardır:

• Ada mimarisi. Astro gibi çerçeveler tarafından popüler hale getirilen, bileşenlerin statik HTML'nin üzerinde bağımsız olarak doldurulduğu ada mimarisi. <template for> API, statik içeriğin doğrudan HTML'de benzer şekilde işlenmesine olanak tanır. JavaScript çerçeveleri, daha etkileşimli adalar için veya bileşenleri işlemek için de bunu kullanabilir.
• İçerik hazır olduğunda yayınlayın. Bu ada mimarisi sayesinde içerik, hazır olduğunda yayınlanabilir. Ek işleme (ör. veritabanı araması) gerektiren içerikler için bekletilmez. Birçok platform HTML akışına izin verse de HTML'nin sıralı yapısı nedeniyle içerik genellikle gecikir veya karmaşık JavaScript DOM manipülasyonlarına başvurulur. Artık beklerken statik içerik sunabilir, ardından HTML akışının sonuna daha pahalı ve dinamik içerikler ekleyebilirsiniz.
• HTML, sayfa yükleme performansı için en uygun sırada yayınlanabilir. Bir adım daha ileri giderek, hazır olduğunda bile siparişi değiştirebilirsiniz. Örneğin, mega menüler, sayfa etkileşimli hale gelene kadar kullanıcının görmeyeceği çok sayıda HTML içeren yaygın bir gezinme özelliğidir. Bu büyük HTML parçası, ilk sayfa yüklemesi için gereken daha önemli HTML'ye öncelik vermek amacıyla HTML belgesinde daha sonra yayınlanabilir. HTML ile sipariş artık bir engel değil.

Bunlar yalnızca bazı kullanım alanlarıdır. Geliştiricilerin bu yeni API'yi hangi amaçlarla kullanacağını görmek için sabırsızlanıyoruz.

Kısıtlamalar ve ayrıntılar

API'de dikkat edilmesi gereken birkaç kısıtlama ve ayrıntı vardır:

• <template for>, güvenlik nedeniyle yalnızca aynı üst öğe içindeki işleme talimatlarını güncelleyebilir. <template for> öğesini doğrudan <body> öğesine eklemek, öğesine belgenin tamamına (<head> dahil) erişim izni verir.
• <?end> işleme talimatı isteğe bağlıdır ve eksikse <?start> öğesi ile kapsayan öğenin sonu arasındaki içerik değiştirilir.
• <template for> yayınlanmaya başladıktan sonra işleme talimatlarının taşınması da beklenmedik sonuçlara yol açabilir. Bu durumda yeni içerik, eski konumda yayınlanmaya devam eder.
• <template for>, setHTML veya innerHTML özelliği gibi bir yöntemle dinamik olarak eklenirken şablonun ayrıştırıldığında "üst öğesinin" ara doküman parçası olduğunu unutmayın. Bu nedenle, bu yöntemlerle HTML eklemek mevcut DOM'u değiştiremez ve yama, parçanın içinde "yerinde" yapılır. Ancak streamHTMLUnsafe gibi yöntemler kullanılarak yayın yapıldığında (kısa süre sonra ele alınacaktır) ara parça olmadığından şablonlar mevcut içeriğin yerini alabilir.

Standartlaştırma durumu

<template for> özelliği HTML standardının bir parçasıdır ancak henüz tüm tarayıcılarda desteklenmemektedir.

Gelecekte eklenebilecek potansiyel özellikler

Gelecekte eklenebilecek bazı özellikler:

• İstemci tarafı şunları içerir: Örneğin, <template for="footer" src="/partials/footer.html"> veya yama olmadan <template src="/partials/footer.html">. Daha fazla bilgi için açıklayıcı metne göz atın. Bu özellik, chrome://flags/#enable-experimental-web-platform-features işaretinin arkasında kullanılabilir.
• Değişmeyecek içeriklerin üzerine yazılmasını önleme. Bu, içerik revizyon numarası veya sürüm oluşturma ile sağlanabilir. Bu sayede, içerik sıfırlanmak yerine rota değişiklikleri veya diğer güncellemeler arasında durum korunabilir.
• Yama uygularken temizleme. Örneğin, <template for=icon safe><svg id="from-untrusted-source">...</svg></template>

Polyfill

Chrome Ekibi, bu yeni işlevin diğer tarayıcılarda kullanıma sunulmasından önce sitelerin bu işlevi hemen kullanabilmesi için npm'de template-for-polyfill kullanılabilen bir sürüm yayınladı.

Tarayıcının HTML ayrıştırıcılarını doğrudan güncelleyemediği için bazı sınırlamalar olsa da en yaygın kullanım alanları desteklenir. Siteler diğer tarayıcılarda da test edilmelidir.

Yenilenen HTML ekleme ve akış yöntemleri

Tüm içerikler HTML olarak teslim edilemez. Chrome'un bu alanda yaptığı çalışmanın ikinci kısmı, JavaScript ile içeriklerin güncellenmesini kolaylaştırmayı amaçlıyor.

JavaScript kullanarak mevcut bir dokümana HTML'yi dinamik olarak yerleştirmenin birden fazla yolu vardır:

• setHTML
• setHTMLUnsafe
• innerHTML ve outerHTML
• createContextualFragment
• insertAdjacentHTML

Ancak hepsi biraz farklı şekillerde çalışır ve geliştiricilerin her zaman dikkate almayabileceği incelikler ve farklılıklar içerir:

• Yeni içerik, mevcut içeriğin üzerine mi yazılıyor yoksa içeriğe mi ekleniyor?
• Potansiyel olarak tehlikeli HTML'yi temizliyor mu? Örneğin, <script> etiketlerinden kaçınıyor mu?
• Aksi takdirde <script> çalıştırılmalı mı?
• Güvenilir Türler ile nasıl çalışır?

Çok az geliştirici bu API'lere dürüstçe bakıp her biri için bu soruları güvenle yanıtlayabilir.

HTML'nin yayınlanmasına izin verilmesi için çağrılar yapılmış olsa da bu işlevlerin yalnızca önceden bilinen eksiksiz bir HTML grubu için kullanılabiliyor olması büyük bir sınırlamadır. Pratikte bu, HTML'nin güçlü yönlerinden biri olan içeriği anında yayınlama özelliğine rağmen, içeriği eklemeden önce tamamını indirmeniz gerektiği anlamına gelir. Bu sorun, yükleri bölerek veya document.write gibi eski ve geçici yöntemler kullanarak sınırlı bir şekilde çözülebilir ancak bu yöntemler de kendi sorunlarını beraberinde getirir.

Yeni bir statik ve akış API'leri grubu

Chrome, bu durumu düzeltmek ve akış işlevini kullanıma sunmak için mevcut setHTML ve setHTMLUnsafe'ye yönelik bir dizi yeni API ve uzantı üzerinde çalıştı.

Bu özellikler, Chrome 148'den itibaren chrome://flags/#enable-experimental-web-platform-features flag'i kullanılarak geliştirici testine hazır hâle getirilmiştir ve Chrome 155'te kullanıma sunulması planlanmaktadır.

İçeriği mevcut HTML'nin öncesine veya sonrasına ekleme yöntemlerinin yanı sıra ayarlama ya da değiştirme yöntemleri de vardır. Her yöntemin akış eşdeğerleri vardır:

Yakında ele alınacak Unsafe sürümleri de vardır. Özellikle Unsafe eşdeğerlerini eklediğinizde çok sayıda yöntem varmış gibi görünse de tutarlı adlandırma kuralı, her birinin ne yaptığını daha önce bahsedilen alakasız yöntemlere kıyasla daha belirgin hale getirir.

Statik sürümler, isteğe bağlı seçeneklerle birlikte yeni HTML'yi DOM String bağımsız değişkeni olarak alır:

const newHTML = "<p>This is a new paragraph</p>";
const contentElement = document.querySelector('#content-to-update');

contentElement.setHTML(newHTML);

Akış sürümleri, Streams API ile birlikte çalışır. Örneğin, getWriter():

const contentElement = document.querySelector('#content-to-update');
const writer = contentElement.streamHTMLUnsafe().getWriter();

// Example stream of updating content
while (true) {
  await writer.write(`<p>${++i}</p>`);
  await new Promise((resolve) => setTimeout(resolve, 1000));
}

writer.close();

Alternatif olarak, boru zincirleri kullanılarak alınan bir yanıttan da oluşturulabilir:

const contentElement = document.querySelector('#content-to-update');
const response = await fetch('/api/content.html');

response.body
  .pipeThrough(new TextDecoderStream())
  .pipeTo(contentElement.streamHTMLUnsafe());

textStream() özel ödeme yöntemi

Ayrıca, ara textStream adımına gerek kalmadan doğrudan yayın yapabileceğiniz bir TextDecoderStream() kolaylık yöntemi de eklendi:

const contentElement = document.querySelector('#content-to-update');
const response = await fetch('/api/content.html');

response.textStream().pipeTo(contentElement.streamHTMLUnsafe());

options

options bağımsız değişkeni, varsayılan olarak default olan özel bir sanitizer belirtmenize olanak tanır. Bu, varsayılan temizleyici yapılandırması anlamına gelir. Kullanımı:

const newHTML = '<p>This is a new paragraph</p>';
const contentElement = document.querySelector('#content-to-update');

// Only allows basic formatting
const basicFormattingSanitzer = new Sanitizer({ elements: ['em', 'i', 'b', 'strong'] });

contentElement.setHTML(newHTML, {sanitizer: basicFormattingSanitzer});

"Güvenli olmayan" yöntemler

Ayrıca, her API'nin "güvenli olmayan" sürümleri de vardır:

Bu "güvenli olmayan" yöntemler, temizleyiciyi varsayılan olarak devre dışı bırakır. İsterseniz özel bir temizleyici belirtebilirsiniz. Bu yöntemler, komut dosyalarının isteğe bağlı bir runScripts seçeneğiyle (varsayılan olarak false) çalıştırılmasına da olanak tanır.

setHTML gibi setHTMLUnsafe de mevcut bir yöntemdir ancak komut dosyası yürütmeyle kullanılabilmesi için runScripts seçenekleri parametresi eklenmiştir:

const newHTML = `<p>This is a new paragraph</p>
                 <script src=script.js></script>`;
const contentElement = document.querySelector('#content-to-update');

contentElement.setHTMLUnsafe(newHTML, {runScripts: true});

Yöntemdeki "güvenli olmayan" ifadesi, geliştiricilere olası riski ve komut dosyalarını nasıl temizlemek veya kısıtlamak isteyebileceklerini hatırlatmak için kullanılır. Bu yöntemlerin kullanılmaması gerektiği anlamına gelmez.

Bu durumun ne kadar "güvensiz" olduğu, girişlerin ne kadar güvenilir olduğuna bağlıdır. Unsafe statik yöntemlerinin tümü, html bağımsız değişkenleri olarak hem DOM dizesi hem de TrustedHTML ile çalışır ve temizleyicilerin kullanılmasına da olanak tanır. Ancak runScript ile amaç, komut dosyalarına izin vermektir. Bu nedenle varsayılan olarak temizleyici kullanılmaz.

Kullanım alanları

Bu yeni API'ler, geliştiricilerin mevcut sayfalara HTML eklemesini kolaylaştırır. Tutarlı adlara ve seçeneklere sahip yeni API'ler eklenir. Akış API'leri, tüm yeni içeriklerin platformda kullanıma sunulmasını bekleme zorunluluğunu ortadan kaldırarak performans avantajları sunar.

Kullanım alanları:

• Tek sayfalık uygulamalarda büyük içerik güncellemelerinin dinamik olarak yayınlanması. Daha önce de belirtildiği gibi, mevcut SPA mimarisinin büyük bir dezavantajı, ilk HTML yüklemelerinin akış özelliğinden yararlanmamasıydı. Ancak bu durum değişti.
• HTML altbilgileri gibi yaygın içerikleri ekleme. JavaScript API'lerini kullanarak, gönderilen her sayfada tekrarlamak yerine önbelleğe almadan yararlanarak parçaları çekip sayfaya ekleyebilirsiniz. Ancak, çalışmak için JavaScript'e bağımlı olduğundan bu yalnızca ilk yüklemede görünmeyecek içeriklerde kullanılmalıdır.

Bunlar sadece birkaç örnek. Sizlerin neler yapacağını görmek için sabırsızlanıyoruz.

Kısıtlamalar ve ayrıntılar

Bu yeni API'ler, dikkat etmeniz gereken bazı kısıtlamalar ve ayrıntılar da içerir:

• Güvenilir Türler API'si ile akışın entegrasyonu için, herhangi bir HTML ayar işlemine temizleyici eklemeye olanak tanıyan yeni bir createParserOptions yöntemi kullanılması gerekir. Güvenilen türler entegrasyonu hakkında daha fazla bilgi için açıklayıcı metne bakın.
• <template for>'ya benzer şekilde, yayınlanan öğelerin taşınması beklenmedik sonuçlara veya yayın hatalarına neden olabilir.
• streamHTMLUnsafe, <template for> talimatlarını ana belgeye eklenirken işleme ve defer komut dosyalarını akışın sonuna kadar erteleme gibi birçok açıdan ana ayrıştırıcıya daha çok benzer.

Standartlaştırma durumu

Daha yeni ekleme ve yayın yöntemleri HTML standardına eklenme sürecindedir ancak henüz tüm tarayıcılarda desteklenmemektedir.

Polyfill

Chrome Ekibi, bu yeni işlevin diğer tarayıcılarda kullanıma sunulmasından önce sitelerin bu işlevi hemen kullanabilmesi için npm'de html-setters-polyfill kullanılabilen bir sürüm yayınladı.

Bu polyfill'in yayın yapmadığını, bunun yerine tamamlandığında arabelleğe alıp uyguladığını unutmayın. İşlevsellikten ziyade API şekli için bir polyfill'dir.

Ayrıca, güvenli içeriğin ayarlanması setHTML ve Safari'de desteklenmeyen Sanitizer API'ye bağlıdır.

İkisini birlikte kullanma

Bunlar iki ayrı API olsa da gerçek güç, bunları birleştirmekten gelir. HTML'ye yeni <template for> öğeleri aktararak, içeriğin farklı bölümlerini her birini DOM'a ayrı JavaScript referanslarıyla doğrudan hedeflemeniz gerekmeden dinamik olarak güncelleyebilirsiniz.

Temel bir SPA tarzı sayfa yüklemesi, işleme talimatları içeren bir ana hat sayfası yüklenerek ve ardından her yeni sayfanın şablonları, bu işleme talimatlarına yerleştirilmek üzere HTML'nin en altına aktarılarak uygulanabilir.

Şüphesiz ki bu iki API'nin de daha fazla potansiyeli ve kullanım alanı var. Bu nedenle, (sınırlı!) hayal gücümüzün sizi engellemesine izin vermeyin. Kısmi güncellemeleri yönetmeyi kolaylaştırarak bazı ortak metin kodlarını azaltabilir, güncellemeleri kolaylaştırabilir ve web için yeni potansiyellerin kilidini açabilirsiniz.

Chrome'un Bildirime Dayalı Kısmi Güncellemeler projesi kapsamında üzerinde çalıştığı birkaç API daha var ancak bu ilk ikisini kullanıma sunmaktan heyecan duyuyoruz. Bu alanda daha fazla içerik kullanıma sunulduğunda sizi bilgilendireceğiz.