Dynamische Website scrapen

Dynamische Websites laden Inhalte nach dem ersten Seitenaufruf per JavaScript. Diese Anleitung zeigt, wie du mit dem Browser-Endpoint von FourA Daten von diesen Seiten erfasst.

Das Problem

Wenn du einen Standard-HTTP-Request an eine JavaScript-lastige Website sendest, erhältst du nur das HTML-Gerüst, aber nicht den eigentlichen Inhalt. Die benötigten Daten (Produktlisten, Preise, Suchergebnisse) werden erst nach dem Rendern der Seite im Browser per JavaScript geladen.

Dies ist bei modernen Frameworks wie React, Vue, Angular und Next.js immer häufiger der Fall.

Die Lösung: Browser-Requests

Der Browser-Endpoint von FourA (POST /api/browser/) öffnet deine URL in einer Chrome-Browserinstanz, die:

  1. die Seite lädt
  2. sämtliches JavaScript ausführt
  3. auf das Rendern der Inhalte wartet
  4. das vollständig gerenderte HTML zurückgibt

Schritt 1: Identifiziere, was du benötigst

Besuche vor dem Request die Zielseite im Browser und nutze die DevTools (F12), um einen Text oder ein Element zu finden, das das Laden der Inhalte bestätigt. Zum Beispiel:

  • Ein Produktname, der nach dem JS-Rendering erscheint
  • Eine CSS-Klasse wie product-grid im gerenderten HTML
  • Ein Text wie "results", der erst nach dem Laden der Daten erscheint

Schritt 2: Browser-Request senden

curl -X POST https://eu.api.foura.ai/api/browser/ \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/products",
    "timeout_ms": 15000,
    "checkText": "product-grid"
  }'

Die Option checkText weist FourA an, zu prüfen, ob der String "product-grid" auf der gerenderten Seite erscheint. Wenn er vor dem Timeout nicht erscheint, schlägt der Request fehl, sodass du weißt, dass der Inhalt nicht geladen wurde.

Schritt 3: HTML parsen

Die Response enthält das vollständig gerenderte HTML im Feld body. Parse es mit deiner bevorzugten Bibliothek:

Python (BeautifulSoup)

import requests
from bs4 import BeautifulSoup

resp = requests.post("https://eu.api.foura.ai/api/browser/", headers={
    "X-API-Key": "YOUR_API_KEY",
    "Content-Type": "application/json"
}, json={
    "url": "https://example.com/products",
    "timeout_ms": 15000,
    "checkText": "product-grid"
})

html = resp.json()["body"]
soup = BeautifulSoup(html, "html.parser")

for product in soup.select(".product-card"):
    name = product.select_one(".product-name").text.strip()
    price = product.select_one(".product-price").text.strip()
    print(f"{name}: {price}")

Node.js (cheerio)

import * as cheerio from 'cheerio';

const resp = await fetch('https://eu.api.foura.ai/api/browser/', {
  method: 'POST',
  headers: { 'X-API-Key': 'YOUR_API_KEY', 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://example.com/products',
    timeout_ms: 15000,
    checkText: 'product-grid'
  })
});

const { body: html } = await resp.json();
const $ = cheerio.load(html);

$('.product-card').each((i, el) => {
  console.log($(el).find('.product-name').text(), $(el).find('.product-price').text());
});

Fehlerbehebung

Immer noch leerer Inhalt?

  • Prüfe, ob die Seite tatsächlich JavaScript-Rendering nutzt (Vergleich von "Quelltext anzeigen" mit den DevTools)
  • Erhöhe timeout_ms: Einige Seiten laden langsam
  • Prüfe, ob die Seite eine Authentifizierung oder Cookies erfordert (nutze den Parameter cookies)

Wird eine CAPTCHA-Seite angezeigt?

  • Wechsle bei Single-/HTTP-Requests zum Proxy-Endpoint (POST /api/proxy/) für automatische IP-Rotation.
  • Um Browser-Requests eine Proxy-Rotation hinzuzufügen, nutze den Parameter proxy des Browser-Endpoints, anstatt ihn in den Proxy-Endpoint einzubetten. Der Proxy-Endpoint bettet nur Single-/HTTP-Requests ein, keine Browser-Requests.
curl -X POST "https://eu.api.foura.ai/api/browser/" \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com", "proxy": "http://proxy-url:port"}'

Nächste Schritte

Aktualisiert: 31. Mai 2026