Bildirime dayalı kısmi güncellemeler

Barry Pollard

Noam Rosenthal

Yayınlanma tarihi: 19 Mayıs 2026

Web, başlangıçta olduğu statik ve doküman odaklı ortamdan çoktan uzaklaştı. Modern ve zengin web uygulamaları, iletişim kurmak, satın alma işlemi yapmak, zengin içerik tüketmek ve karmaşık hayatımızı yönetmek gibi birçok nedenden dolayı herkes tarafından kullanılı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ıralaması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 manipüle etmenize 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 web için performans son derece önemlidir. Ancak HTML'nin sıralı yapısını atlamak için genellikle en iyi olmayan seçenekler tercih edilir ve bu da performansı yavaşlatır. Buna, sayfanın tamamı hazır olana kadar beklemek veya bileşenleri eşzamansız olarak sunmak için ağır bir çerçeve kullanmak dahildir. JavaScript çerçevelerinin popülerliği, web geliştiricilerin web'in kökenlerindeki 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.

İki yeni API grubu, HTML'nin daha az doğrusal bir şekilde yayınlanmasını kolaylaştırır. Bu, HTML belgesinin kendisinde sırasız olarak veya yeni JavaScript API'leri kullanılarak HTML'nin mevcut belgelere dinamik olarak eklenmesinin kolaylaştırılmasıyla yapılabilir. Bu özellikler, chrome://flags/#enable-experimental-web-platform-features flag'i kullanılarak Chrome 148'den itibaren geliştirici testine hazırdır. Bu yeni API'leri hemen kullanabilmeniz için, henüz desteklemeyen tarayıcılarda bile polyfill'ler de mevcuttur.

Web platformuna yapılan bu eklemeler, diğer tarayıcı sağlayıcılarından ve standardizasyon kanallarından gelen olumlu geri bildirimlerle standartlaştırılıyor. İlgili standartlar, bu yeni API'leri içerecek şekilde güncellenmektedir.

Sıra dışı akış

İlk değişiklik grubu, <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 değerlendirilip yoksayılıyordu. Bu yeni API, bu durumu değiştirerek HTML'ye işleme talimatları getiriyor. Tarayıcı, <?marker name="placeholder"> işleme talimatlarını gördüğünde hemen hiçbir şey yapmaz (önceki gibi) ancak daha sonra bunlara başvurulabilir.

<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 şu şekilde görünür:

<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, Loading…, <template> görülene kadar 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ıldıktan 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"> eklenmesi ihtimaline karşı, sonundaki son işleme talimatıyla.

Demo

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

Hem durum hem de fotoğraflar, ilk düzenden sonra HTML'ye aktarılır.

Kullanım alanları

Bu sırasız yama HTML'si, akış HTML'si ile birlikte kullanıldığında birçok kullanım alanına sahiptir:

• Ada mimarisi. Astro gibi çerçeveler tarafından popüler hale getirilen yaygın bir kalıp olan ada mimarisinde, bileşenler statik HTML'nin üzerinde bağımsız olarak doldurulur. <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 oluşturmak veya bileşenleri işlemek için de bu özelliği kullanabilir.
• İçerik hazır olduğunda yayınlayın. Bu ada mimarisi sayesinde içerik, hazır olduğunda yayınlanabilir. Örneğin, veritabanı araması gibi ek işlem 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 geciktirilir veya karmaşık JavaScript DOM manipülasyonlarına başvurulur. Artık beklerken statik içeriği sunabilir, ardından HTML akışının sonuna daha maliyetli içeriği 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 ve geliştiricilerin bu yeni API'yi hangi amaçlarla kullandığını görmek heyecan vericidir.

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, <template for> öğ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 gibi bir yöntemle dinamik olarak yerleştirildiğinde, ayrıştırılan şablonun "üst öğesi" ara doküman parçasıdır. Bu nedenle, bu yöntemler kullanılarak HTML eklenmesi 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 (bu yöntemi birazdan ele alacağız) ara parça olmadığından şablonlar mevcut içeriğin yerini alabilir.

Gelecekte eklenebilecek potansiyel özellikler

Gelecekte eklenmesi düşünülen bazı özellikler şunlardır:

• İstemci tarafı dahil etmeleri. Örneğin, <template for="footer" patchsrc="/partials/footer.html">.
• Toplu işleme. İstemci tarafında, birden fazla güncellemenin aynı anda gerçekleşmesini sağlamak için toplu işleme yönelik destek de eklenebilir.
• Değişmeyecek içeriğin ü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 test edilmeye devam etmelidir.

Yenilenen HTML ekleme ve akış yöntemleri

Bazı içerikler HTML olarak teslim edilemez. Chrome'un bu alanda yaptığı çalışmanın ikinci bölümü, JavaScript aracılığıyla içeriğin güncellenmesini kolaylaştırmayı içerir.

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

• setHTML
• setHTMLUnsafe
• innerHTML ve outerHTML ayarlayıcıları
• 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?
• Örneğin, <script> etiketlerini kaçırarak tehlikeli olabilecek HTML'yi temizliyorlar mı?
• Aksi takdirde <script> çalıştırılmalı mı?
• TrustedTypes ile nasıl çalışırlar?

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

Bu API'lerin HTML'nin yayınlanmasına izin verilmesi çağrıları yapıldığında yalnızca önceden bilinen eksiksiz bir HTML grubu için kullanılabilmesi büyük bir sınırlamadır. HTML'nin güçlü yönlerinden biri içeriği anında yayınlayabilme özelliği olmasına rağmen, bu durum pratikte 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 bir dizi yeni API ve uzantı eklemeyi önerdi:

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

Ayrıca, birazdan bahsedeceğimiz Unsafe sürümleri de vardır. Bu yöntemlerin sayısı çok fazla gibi görünse de (özellikle Unsafe eşdeğerlerini eklediğinizde) 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);

Yayın sürümleri, Streams API ile ç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, getirme yanıtından boru zincirleriyle:

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

const response = await fetch('/api/content.html');

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

Ayrıca, TextDecoderStream() ara adımına gerek kalmadan doğrudan yayın yapabileceğiniz bir kolaylık yöntemi eklemeyi de planlıyoruz.

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. Şu şekilde kullanılır:

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, API'lerin her birinin "güvenli olmayan" sürümleri de vardır:

Bu "güvenli olmayan" yöntemler, temizleyiciyi varsayılan olarak kapatır (isterseniz özel bir temizleyici belirtebilirsiniz) ve komut dosyalarının isteğe bağlı bir runScripts seçeneğiyle (varsayılan olarak false) çalıştırılmasına da izin verir.

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.

Bunun 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ç tamamen komut dosyalarına izin vermek olduğundan 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 tek sayfa uygulamalarının büyük bir dezavantajı, ilk HTML yüklemelerinin akış özelliğinden yararlanamamaları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, kısmi içerikleri çekip sayfaya ekleyebilir ve önbelleğe almadan yararlanabilirsiniz. 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 yalnızca birkaç örnek. Üreteceğiniz içerikleri 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ış 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çıklama metnini inceleyin.
• <template for> benzer şekilde, yayınlanan öğelerin taşınması beklenmedik sonuçlara veya yayın hatalarına neden olabilir.
• streamHTMLUnsafe, <template for> talimatlarını ana belgeye eklendikçe 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.

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 uygun şekilde 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 ortak metin kodlarının bir kısmını azaltabilir, güncellemeleri kolaylaştırabilir ve web için yeni potansiyellerin kilidini açabilirsiniz.