Web Programlama Eğitimi: Speculation Rules ile Güvenli Prerender

Web Programlama Eğitimi İçin Prefetch ve Prerender Ayrımı

Speculation Rules API iki farklı maliyet profili sunar: prefetch yalnızca hedef belgenin ve uygun alt kaynakların ağdan alınmasını hedefler; prerender ise hedef dokümanı görünmeyen bir tarayıcı bağlamında parse eder, JavaScript'ini çalıştırır ve etkinleştirme anında bu bağlamı kullanıcıya devreder. Prerender, hedef rotaya hiç gidilmese bile CPU, bellek ve ağ tükettiği için tüm linklere uygulanmamalıdır. İlk aday kümesini, analitik veride en az %20 tıklanma oranına sahip ve aynı origin altında kalan liste/ayrıntı geçişleriyle sınırlayın.

Tarayıcı desteğini çalışma anında sınayın ve kuralı yalnızca destek varsa ekleyin. Bu yaklaşım, desteklemeyen istemcilerde normal navigasyon akışını korur; ayrıca SPA router'ının her linke koşulsuz veri yüklemesinden daha kontrollüdür.

if (HTMLScriptElement.supports?.('speculationrules')) {
  const rules = {
    prerender: [{
      source: 'document',
      where: { and: [
        { href_matches: '/urun/*' },
        { not: { href_matches: '/urun/*?stok-bildirimi=*' } }
      ]},
      eagerness: 'moderate'
    }]
  };

  const script = document.createElement('script');
  script.type = 'speculationrules';
  script.textContent = JSON.stringify(rules);
  document.head.appendChild(script);
}

Bu örnekte eagerness: 'moderate', kullanıcı işaretçiyi linke götürdüğünde veya link görünür bir aday h芒line geldiğinde tarayıcının tahmin yapmasına izin verir; eager ise sayfa yüklenir yüklenmez adayları başlatabileceğinden katalog sayfalarında gereksiz prerender üretir. URL desenine sorgu parametrelerini de dahil etmeyi unutmayın: filtre, oturum veya tek kullanımlık işlem parametreleri içeren rotaları kuraldan hariç tutmak için href_matches ve not birleşimi kullanın.

Javascript Eğitimi: Prerender Sırasındaki Yan Etkileri Ertelemek

Prerender edilmiş belgede JavaScript çalışır; dolayısıyla modülün en üst seviyesinde çalışan telemetry, WebSocket bağlantısı, yazma işlemi yapan API çağrısı veya ödeme sağlayıcısı SDK'sı kullanıcı hiç sayfayı görmeden tetiklenebilir. Kritik ayrım document.prerendering durumudur. Kodun sadece görünür aktivasyonda çalışması gereken bölümünü bir aktivasyon kapısının arkasına alın; visibilitychange tek başına yeterli değildir, çünkü sekme arka plana alındığında da görünürlük değişir.

function runAfterActivation(fn) {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', fn, { once: true });
  } else {
    fn();
  }
}

runAfterActivation(() => {
  analytics.track('product_view', { productId: window.__PRODUCT_ID__ });
  const socket = new WebSocket('wss://example.com/inventory');
  socket.addEventListener('message', updateStockBadge);
});

Bu kapı özellikle idempotent olmayan uç noktalar için önemlidir. Örneğin POST /api/recommendations/impression yerine aktivasyondan sonra gönderilen, istemci üretimli bir navigationId taşıyan bir olay kullanın; sunucuda (session_id, navigation_id, event_type) üzerinde benzersiz indeks tanımlayarak yeniden denemeleri de tekilleştirin. Sadece istemci tarafında once: true kullanmak ağ tekrarlarını engellemez; sayfa geri/ileri, bağlantı yeniden denemesi ve birden fazla sekme h芒l芒 aynı olayı üretebilir.

Deneyimli ekiplerin sık kaçırdığı ayrıntı, veri okumanın da yan etkisiz olmayabilmesidir: stok rezervasyonu yapan bir GET, CDN cache miss'i üzerinden pahalı hesap çalıştıran kişiselleştirme endpoint'i veya erişim günlüğünü faturalayan üçüncü taraf çağrısı prerender bütçesini bozar. Chrome DevTools Network panelinde prerender adayını açıp Initiator sütununu inceleyin; aktivasyon öncesi başlayan istekleri document.prerendering ile koşullandırın ya da endpoint'i açıkça cache'lenebilir, okuma amaçlı bir sürüme ayırın.

Frontend Development Eğitimi: Ölçüm, Önce-Sonra ve RUM

Prerender'ı "hızlı hissettiriyor" diye değerlendirmeyin. Kontrollü bir deneyde kullanıcıların yarısına kuralı vermeyin, diğer yarısına yalnızca yüksek olasılıklı ürün linki kuralını verin. Chrome DevTools Performance panelinde her iki akış için navigasyon kaydı alın; prerender grubunda hedef sayfanın activationStart değerini ve aktivasyondan sonraki LCP'yi karşılaştırın. Aynı zamanda Network panelinde iptal edilen prerender isteklerinin indirdiği byte toplamını izleyin; düşük aktivasyon oranı, iyi görünen gecikme değerini ağ maliyetiyle geçersiz kılabilir.

RUM yüküne Navigation Timing verisini ekleyin. activationStart > 0, gezinmenin prerender aktivasyonu ile tamamlandığını gösterir; bu alanı normal navigasyonlarla aynı dağılıma koymak yanlış sonuç verir. Aşağıdaki kod hem aktivasyon türünü hem de kullanıcıya görünür h芒le geldikten sonra işaretlenen render süresini yollar.

runAfterActivation(() => {
  performance.mark('app:activated');
  const nav = performance.getEntriesByType('navigation')[0];

  navigator.sendBeacon('/rum/navigation', JSON.stringify({
    path: location.pathname,
    prerendered: Boolean(nav?.activationStart),
    activationStart: nav?.activationStart ?? 0,
    activatedAt: performance.now()
  }));
});

Sunucu tarafında sonuçları en az dört segmente ayırın: prerendered/normal 脳 cache-hit/cache-miss. Aksi halde CDN cache hit oranı artmış bir günün etkisini prerender'a yazarsınız. Başarı kriterini örneğin "prerendered ürün geçişlerinde aktivasyondan sonraki p75 LCP, normal gruba göre en az 300 ms düşük; iptal edilmiş prerender başına indirilen medyan veri 150 KB altında" diye önceden tanımlayın. Chrome DevTools'ta CPU throttling ile de kontrol yapın; güçlü geliştirme makinesinde görünmeyen JavaScript başlatma maliyeti, düşük uç cihazlarda aktivasyon kazanımını tüketebilir.

Frontend Framework Karşılaştırması: Router ve Veri Katmanı Tuzakları

Bir frontend framework karşılaştırması yapılırken prerender özelliğini framework'e ait sanmak hatadır: Speculation Rules tarayıcı seviyesindedir, fakat router ve veri katmanı sonuçları belirler. Reactjs eğitimi projelerinde route modüllerinin import anında sorgu başlatıp başlatmadığını kontrol edin; document.prerendering sırasında yalnızca güvenli GET sorgularına izin verin. React tarafında event tabanlı analitiği bileşen gövdesine değil useEffect içine koymak gerekir; fakat useEffect de prerender sırasında çalışabileceği için aktivasyon kapısı yine zorunludur.

useEffect(() => {
  const report = () => analytics.track('route_open', { path: location.pathname });

  if (document.prerendering) {
    document.addEventListener('prerenderingchange', report, { once: true });
    return () => document.removeEventListener('prerenderingchange', report);
  }
  report();
}, []);

Angular eğitimi uygulamalarında router resolver'ları navigasyon öncesi HTTP çağrısı yapabildiğinden, resolver endpoint'lerini idempotent tasarlayın ve auth yenileme gibi mutasyonları interceptor içinde koşulsuz çalıştırmayın. Vuejs eğitimi örneklerinde de onMounted içine konan SDK başlatmaları aynı riski taşır. Eski angularjs eğitimi kod tabanlarında ise $routeChangeSuccess ile gönderilen page-view çağrılarını aktivasyon kapısına almak gerekir; aksi h芒lde prerender edilmiş fakat hiç açılmamış sayfalar rapora girer.

React Native eğitimi için önemli sınır şudur: React Native'in yerel navigasyonu tarayıcı belge prerender'ını kullanmaz. Ortak monorepo'da paylaşılan telemetry modülüne doğrudan document erişimi koymak web dışı derlemeyi kırar. Web adaptörünü ayrı tutun veya typeof document !== 'undefined' korumasıyla tarayıcıya özgü aktivasyon mantığını izole edin.

Dağıtım Politikası ve Güvenli Aday Seçimi

Kuralı uygulama kabuğuna tek seferde ve sınırsız koymak yerine, sunucunun ürettiği aday listesiyle aşamalı dağıtın. Örneğin son 14 gündeki geçiş matrisiyle yalnızca bir kaynak rota için en fazla üç hedef seçin; hedef URL'yi kullanıcı yetkisine göre üretin ve kişisel veri taşıyan sorgu parametrelerini kurala yazmayın. Statik JSON kuralı deploy etmek istiyorsanız, sürüm değişimlerinde tarayıcı cache'inin eski adayları denemesini önlemek için HTML kabuğunda kısa ömürlü sürümlü bir kural dosyası kullanın.

Operasyonel geri alma için RUM verisinde prerendered bayrağını, hata izleme sisteminde de aynı etiketi taşıyın. Sentry kullanıyorsanız aktivasyondan sonra Sentry.setTag('prerendered', String(Boolean(nav.activationStart))) çağrısı ile prerender kaynaklı hata oranını normal akıştan ayırabilirsiniz. Özellikle oturum yenileme, CSRF token döndürme ve A/B deney ataması yapan endpoint'lerde hata oranı yükselirse kuralı kapatın; prerender, bu tür sunucu durum değişimlerini kullanıcı niyeti olmadan erkene çeker.

Sık Sorulan Sorular

Web programlama eğitimi kapsamında Speculation Rules ne zaman prerender yerine prefetch kullanmalı?

Hedef linkin tıklanma oranı yüksek ama sayfa JavaScript'i ağır, oturum durumuna duyarlı veya üçüncü taraf SDK başlatıyorsa prefetch ile başlayın. Chrome DevTools Network panelinde hedef HTML ve kritik CSS'nin cache'e geldiğini, fakat CPU maliyetinin oluşmadığını doğrulayın. Prerender'a ancak aktivasyon oranı ve iptal edilen aday başına indirilen byte ölçümleri kabul edilen bütçedeyse geçin.

Reactjs eğitimi projelerinde prerender analytics olaylarını iki kez nasıl engellerim?

Page-view olayını bileşen render'ında veya modül seviyesinde göndermeyin. useEffect içinde document.prerendering kontrolü yapın, prerenderingchange olayında tek seferlik gönderin ve sunucuda navigationId ile benzersiz indeks kullanın. Bu iki katman, hem istemci yaşam döngüsünü hem de ağ yeniden denemelerini kapsar.

Angular eğitimi ve Vuejs eğitimi uygulamalarında prerender performansı nasıl ölçülür?

Framework bağımsız olarak PerformanceObserver veya performance.getEntriesByType('navigation') ile activationStart değerini toplayın. RUM verisini prerendered/normal ve CDN cache-hit/cache-miss segmentlerine ayırın; ardından p75 aktivasyon sonrası LCP ile iptal edilmiş adayların indirilen byte değerini birlikte raporlayın. Sadece ortalama süre, birkaç çok hızlı aktivasyon nedeniyle yanıltıcıdır.