Browser-Tasks: Wie du JavaScript-intensive Websites scrapst

Über 70 % moderner Websites setzen auf JavaScript, um 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 herkömmliche Scraping-Tools leere Seiten zurückgeben.

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

Funktionsweise

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

Startet einen Headless-Chrome-Browser
Navigiert zur Ziel-URL
Wartet auf die JavaScript-Ausführung und die Stabilisierung des DOM
Wartet optional darauf, dass ein bestimmter CSS-Selektor erscheint
Gibt das vollständig gerenderte HTML zurück

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

Wann sich Browser-Tasks eignen

Nutze Browser-Tasks bei:

Single-Page-Applications (React, Vue, Angular)
Seiten mit nachgeladenen Inhalten (Infinite Scroll, "Mehr laden"-Buttons)
Websites, die Cookie-Banner oder ein initiales JS-Setup erfordern
Inhalten hinter clientseitigen Authentifizierungs-Flows

Bleibe bei single-Tasks bei:

Server-gerenderten HTML-Seiten (Nachrichtenseiten, Blogs, Wikis)
REST-APIs, die direkt JSON zurückgeben
Höchster Priorität auf Geschwindigkeit (Browser-Tasks dauern 2 bis 10 Sekunden gegenüber unter 1 Sekunde bei Single-Tasks)

Beispiel: Scraping einer React-App

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

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

Performance-Tipps

Verwende immer waitFor mit einem spezifischen Selektor, anstatt dich auf Timeouts zu verlassen. Das ist schneller und zuverlässiger.
Setze ein sinnvolles Timeout. 15 Sekunden reichen für die meisten SPAs aus. Erhöhe den Wert nur bei wirklich langsamen Backends.
Nutze single als Standard und wechsle nur zu browser, wenn Inhalte in der Response fehlen.

Ausblick

Wir arbeiten an weiteren Browser-Funktionen wie Screenshot-Erstellung, PDF-Generierung und mehrstufiger Navigation (Klicken, Scrollen, Formulare ausfüllen). Doch auch ohne diese Extras lösen Browser-Tasks bereits das häufigste Problem: den eigentlichen Inhalt von JavaScript-gerenderten Seiten zu erhalten statt eines leeren Gerüsts.

Den vollständigen Vergleich der Task-Typen findest du in der Dokumentation.