← Alle Beiträge
Produktupdate 2 Min. Lesezeit

Browser-Tasks: Wie du JavaScript-intensive Websites scrapst

Über 70 % der modernen Websites benötigen JavaScript, um ihre Inhalte zu rendern. So liefern dir die Browser-Tasks von FourA die vollständige Seite, wenn HTTP-Requests leer bleiben.

browserjavascriptpuppeteerproduct-update

Über 70 % der modernen Websites verlassen sich auf JavaScript, um ihre Inhalte zu rendern. Ein standardmäßiger HTTP-Request sieht nur das initiale HTML-Gerüst. Die eigentlichen Daten laden erst nach der Ausführung von JavaScript, weshalb traditionelle Scraping-Tools leere Seiten zurückgeben.

Browser-Tasks von FourA lösen dies, indem sie für jeden Request eine echte headless Chrome-Instanz ausführen.

Wie es funktioniert

Wenn du einen Task mit type: "browser" sendest, führt FourA folgende Schritte aus:

  1. Startet einen headless Chrome-Browser
  2. Navigiert zur Ziel-URL
  3. Wartet, bis JavaScript ausgeführt wurde und sich das DOM stabilisiert hat
  4. Wartet optional auf das Erscheinen eines bestimmten CSS-Selectors
  5. Gibt das vollständig gerenderte HTML zurück

Der gesamte Prozess läuft auf der Infrastruktur von FourA ab. Du erhältst sauberes HTML zurück, ohne einen Browser installieren, Puppeteer konfigurieren oder Chrome-Updates verwalten zu müssen.

Wann du Browser-Tasks nutzen solltest

Nutze Browser-Tasks bei:

  • Single-Page-Applications (React, Vue, Angular)
  • Seiten mit Lazy-Loading-Inhalten (Infinite Scroll, „Mehr laden“-Buttons)
  • Websites, die eine Cookie-Zustimmung oder ein initiales JS-Setup erfordern
  • Inhalten hinter clientseitigen Authentifizierungs-Flows

Bleibe bei single-Tasks bei:

  • Server-gerenderten HTML-Seiten (News-Websites, Blogs, Wikis)
  • REST-APIs, die direkt JSON zurückgeben
  • Wenn Geschwindigkeit Priorität hat (Browser-Tasks dauern 2-10 Sekunden im Vergleich zu unter 1 Sekunde bei single-Tasks)

Beispiel: Scraping einer React-App

curl -X POST https://eu.api.foura.ai/api/v1/tasks \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/dashboard",
    "type": "browser",
    "options": {
      "waitFor": ".dashboard-content",
      "timeout": 15000
    }
  }'

Der waitFor-Selector weist FourA an, zu warten, bis .dashboard-content im DOM erscheint, bevor die Seite erfasst wird. Dies stellt sicher, dass alle asynchronen Daten geladen sind.

Performance-Tipps

  • Nutze immer waitFor mit einem spezifischen Selector, anstatt dich auf Timeouts zu verlassen. Das ist sowohl schneller als auch zuverlässiger.
  • Setze ein angemessenes Timeout. 15 Sekunden reichen für die meisten SPAs aus. Erhöhe es nur bei wirklich langsamen Backends.
  • Nutze single als Standard und wechsle nur zu browser, wenn Inhalte im Response fehlen.

Ausblick

Wir arbeiten an zusätzlichen Browser-Funktionen, darunter Screenshot-Erstellung, PDF-Generierung und mehrstufige Navigation (Klicken, Scrollen, Formulare ausfüllen). Aber selbst ohne diese Extras lösen Browser-Tasks bereits das häufigste Problem: den tatsächlichen Inhalt von JavaScript-gerenderten Seiten zu erhalten, anstatt eines leeren Gerüsts.

Sieh dir die Dokumentation für den vollständigen Vergleich der Task-Typen an.