Browser Rendering

Browser Rendering nedir?

Bazı işler için gerçek bir tarayıcıya ihtiyaç vardır: bir sayfanın göründüğü hâliyle ekran görüntüsünü almak, JavaScript ile üretilen içeriği okumak, HTML’i PDF’e çevirmek, bir formu doldurup göndermek.

Browser Rendering, Cloudflare’in altyapısında headless Chrome çalıştırmanı sağlar. Worker’ından bir binding üzerinden veya dışarıdan REST API ile sürebilirsin.

Ürün sayfasının başlığı yeni konumlandırmayı özetliyor: “Headless, programmable web browsers built for AI Agents.”

Nasıl çalışır?

İki erişim yolu

Kütüphaneler

Standart puppeteer ve playwright npm paketleri Workers runtime’ında çalışmaz. Cloudflare kendi uyarlamalarını yayımlıyor: @cloudflare/puppeteer ve @cloudflare/playwright. API’ler tanıdıktır ama tarayıcı başlatma binding üzerinden yapılır.

Oturum yönetimi

Her launch() çağrısı yeni bir tarayıcı açar ve hem tarayıcı saati hem eşzamanlı tarayıcı kotası tüketir. Bir tarayıcıyı açıp birden çok sayfa işlemek, her istekte yeniden açmaya göre belirgin biçimde ucuzdur.

Ne zaman kullanılır, ne zaman kullanılmaz

Uygun olduğu işler

• Ekran görüntüsü servisi (sosyal medya önizleme kartları, arşivleme)
• HTML’den PDF üretimi (fatura, rapor, sertifika)
• JavaScript ile üretilen içeriği okuma
• Otomatik uçtan uca test
• Yapay zekâ ajanlarına tarayıcı yeteneği verme

Uygun olmadığı işler

• Statik HTML yeterliyse. Sayfa JavaScript gerektirmiyorsa düz fetch çok daha ucuz ve hızlı.
• Çok yüksek hacimli kazıma. Tarayıcı saati pahalıdır; API varsa API kullan.
• Gerçek zamanlı istek yolu. Tarayıcı başlatmak saniyeler alır; istek yolunda değil, arka planda veya önbelleğe alarak kullan.
• Lab oturumlarıyla üretim. Resmî ifade: “Lab sessions are experimental and should not be used for production workloads.”
• Hukuki izni olmayan kazıma. Teknik mümkünlük hukuki serbestlik değildir.

Somut örnekler

1. Ekran görüntüsü servisi

import puppeteer from "@cloudflare/puppeteer";

export default {
  async fetch(request, env) {
    const { searchParams } = new URL(request.url);
    const hedef = searchParams.get("url");
    if (!hedef) return new Response("?url= gerekli", { status: 400 });

    const tarayici = await puppeteer.launch(env.TARAYICI);
    try {
      const sayfa = await tarayici.newPage();
      await sayfa.setViewport({ width: 1280, height: 720 });
      await sayfa.goto(hedef, { waitUntil: "networkidle0" });
      const gorsel = await sayfa.screenshot({ type: "png" });

      return new Response(gorsel, {
        headers: {
          "content-type": "image/png",
          "cache-control": "public, max-age=86400",
        },
      });
    } finally {
      await tarayici.close();   // kapatmazsan fatura yazmaya devam eder
    }
  },
};

2. HTML’den PDF üretimi

import puppeteer from "@cloudflare/puppeteer";

export default {
  async fetch(request, env) {
    const { html } = await request.json();

    const tarayici = await puppeteer.launch(env.TARAYICI);
    try {
      const sayfa = await tarayici.newPage();
      await sayfa.setContent(html, { waitUntil: "networkidle0" });

      // Fontların yüklenmesini bekle — Türkçe karakter sorunlarının başlıca sebebi
      await sayfa.evaluateHandle("document.fonts.ready");

      const pdf = await sayfa.pdf({
        format: "A4",
        printBackground: true,
        margin: { top: "20mm", bottom: "20mm", left: "15mm", right: "15mm" },
      });

      return new Response(pdf, {
        headers: {
          "content-type": "application/pdf",
          "content-disposition": 'attachment; filename="rapor.pdf"',
        },
      });
    } finally {
      await tarayici.close();
    }
  },
};

3. Oturum tekrar kullanımı — maliyet düşürme

import puppeteer from "@cloudflare/puppeteer";

export default {
  async fetch(request, env) {
    const { urller } = await request.json();

    // TEK tarayıcı, birden çok sayfa — her URL için yeniden açmaktan çok daha ucuz
    const tarayici = await puppeteer.launch(env.TARAYICI);
    const sonuclar = [];

    try {
      for (const url of urller) {
        const sayfa = await tarayici.newPage();
        try {
          await sayfa.goto(url, { waitUntil: "domcontentloaded", timeout: 15_000 });
          sonuclar.push({ url, baslik: await sayfa.title(), ok: true });
        } catch (h) {
          sonuclar.push({ url, ok: false, hata: h.message });
        } finally {
          await sayfa.close();   // sayfayı kapat, tarayıcıyı açık tut
        }
      }
    } finally {
      await tarayici.close();
    }

    return Response.json({ sonuclar });
  },
};

4. R2’ye arşivleme

import puppeteer from "@cloudflare/puppeteer";

export default {
  async scheduled(controller, env) {
    const tarayici = await puppeteer.launch(env.TARAYICI);
    try {
      const sayfa = await tarayici.newPage();
      await sayfa.goto("https://sirket.com/panel", { waitUntil: "networkidle0" });

      const gorsel = await sayfa.screenshot({ fullPage: true, type: "png" });
      const anahtar = `arsiv/${new Date().toISOString().slice(0, 10)}.png`;

      await env.ARSIV.put(anahtar, gorsel, {
        httpMetadata: { contentType: "image/png" },
      });
    } finally {
      await tarayici.close();
    }
  },
};

Demo 1: Ekran görüntüsü ve PDF üretimi

Adım 1 — Binding kurulumu

{
  "name": "tarayici-worker",
  "main": "src/index.ts",
  "compatibility_date": "2026-08-31",
  "browser": { "binding": "TARAYICI" }
}

Terminal — bindings bölümünde TARAYICI (Browser Rendering) satırı

Adım 2 — İlk ekran görüntüsü

curl "http://localhost:8787/?url=https://example.com" -o ekran.png

Üretilen PNG dosyası açılmış hâlde — hedef sayfanın doğru render edildiği görünsün

Adım 3 — Türkçe karakter testi

Türkçe metin içeren bir sayfanın PDF’ini üret ve ı ğ ş ç ö ü İ karakterlerini kontrol et.

Üretilen PDF açık — Türkçe karakterlerin doğru göründüğü (veya bozuksa nasıl bozulduğu) net okunsun

İki PDF yan yana — font beklenmeden alınan ve beklenerek alınan; farkın görüldüğü

Adım 4 — Yayına al ve panelde izle

npx wrangler deploy

Panel → Browser Rendering → kullanım ekranı: tarayıcı saati ve eşzamanlı tarayıcı sayısı

Demo 2: Oturum tekrar kullanımının maliyet etkisi

Adım 1 — Her URL için yeni tarayıcı

10 URL’i her biri için ayrı launch() çağırarak işle.

Terminal — 10 URL için toplam süre ve panelde tüketilen tarayıcı dakikası

Adım 2 — Tek tarayıcı, çok sayfa

Aynı 10 URL’i tek tarayıcı üzerinden işle.

Aynı test tek tarayıcıyla — toplam süre ve tüketilen tarayıcı dakikası

Adım 3 — Eşzamanlı tarayıcı sınırına çarp

Ücretsiz plandaki 3 eşzamanlı tarayıcı sınırını aşmayı dene.

wrangler tail veya yanıt gövdesinde eşzamanlı tarayıcı limiti hatası

Adım 4 — Günlük kotayı izle

Panel kullanım grafiği — günlük tüketimin kotaya oranı

Ölçüm

Fiyatlandırma

Rakamlar 31 Ağustos 2026’da doğrulanmıştır.

Lisanslama ve hukuki çerçeve

Browser Rendering tescilli bir hizmettir; Cloudflare Hizmet Şartları ve Kabul Edilebilir Kullanım Politikası kapsamındadır.

Kazıma yaparken dikkat edilmesi gerekenler. Bu ürün teknik olarak herhangi bir sayfayı açabilir, ama bu hukuki serbestlik anlamına gelmez. Ayrı ayrı geçerli olan katmanlar:

• Hedef sitenin kullanım şartları
• robots.txt ve benzeri erişim beyanları
• Telif hakkı — içeriğin çoğaltılması ve yeniden yayımlanması
• Kişisel veri mevzuatı — topladığın veride kişisel veri varsa KVKK devreye girer

Cloudflare bu konularda bir muafiyet sağlamaz; sorumluluk kullanandadır.

Veri konumu. Tarayıcı Cloudflare’in ağında çalışır; belirli bir ülkede çalışacağı garanti edilmez.

Sık yapılan hatalar

Tarayıcıyı kapatmamak. browser.close() çağrılmazsa oturum açık kalır ve tarayıcı saati yazmaya devam eder. try/finally içinde kapat.

Her istekte yeni tarayıcı açmak. Oturum tekrar kullanımı hem gecikmeyi hem faturayı düşürür.

Standart puppeteer paketini kurmak. Cloudflare’in uyarlaması gerekir: @cloudflare/puppeteer.

Font yüklenmesini beklememek. Türkçe karakter ve özel font sorunlarının başlıca sebebi. document.fonts.ready bekle.

waitUntil seçeneğini yanlış seçmek. networkidle0 görsel doğruluk için iyidir ama yavaştır; yalnızca metin okuyacaksan domcontentloaded çok daha hızlıdır.

Zaman aşımı vermemek. Yanıt vermeyen bir sayfa oturumu açık tutar ve fatura yazar. goto çağrısına timeout ver.

Beta özellikleri üretimde kullanmak. Özellikle lab oturumları için resmî uyarı açık: üretim iş yükleri için kullanılmamalı.

Rozet yokluğundan GA çıkarımı yapmak. Doküman sayfalarının çoğu hiçbir durum ifadesi taşımıyor — bu GA oldukları anlamına gelmez.