Dokumentacja › Poradniki › Scrapowanie dynamicznych stron

Scrapowanie dynamicznych stron

Dynamiczne strony internetowe ładują zawartość za pomocą JavaScript po początkowym załadowaniu strony. Ten poradnik pokazuje, jak zbierać dane z takich witryn przy użyciu endpointu browser od FourA.

Problem

Gdy wysyłasz standardowy request HTTP do strony mocno opartej na JavaScript, otrzymujesz tylko szkielet HTML, a nie rzeczywistą zawartość. Dane, których potrzebujesz (listy produktów, ceny, wyniki wyszukiwania), są ładowane przez JavaScript dopiero po wyrenderowaniu strony w przeglądarce.

To coraz powszechniejsze zjawisko w przypadku nowoczesnych frameworków, takich jak React, Vue, Angular i Next.js.

Rozwiązanie: Requesty browser

Endpoint browser od FourA (POST /api/browser/) otwiera Twój URL w instancji przeglądarki Chrome, która:

  1. Ładuje stronę
  2. Wykonuje cały JavaScript
  3. Czeka na wyrenderowanie zawartości
  4. Zwraca w pełni wyrenderowany HTML

Krok 1: Określ, czego potrzebujesz

Przed wysłaniem requestu odwiedź docelową stronę w przeglądarce i użyj DevTools (F12) to znalezienia fragmentu tekstu lub elementu, który potwierdza, że zawartość się załadowała. Na przykład:

  • Nazwę produktu, która pojawia się po wyrenderowaniu JS
  • Klasę CSS, taką jak product-grid w wyrenderowanym HTML
  • Ciąg tekstowy, taki jak "results", który pojawia się dopiero po załadowaniu danych

Krok 2: Wyślij request browser

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"
  }'

Opcja checkText mówi FourA, aby zweryfikować, czy ciąg "product-grid" pojawia się na wyrenderowanej stronie. Jeśli nie pojawi się przed upływem limitu czasu (timeout), request zakończy się niepowodzeniem, informując Cię, że zawartość się nie załadowała.

Krok 3: Sparsuj HTML

Response zawiera w pełni wyrenderowany HTML w polu body. Sparsuj go za pomocą swojej ulubionej biblioteki:

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());
});

Rozwiązywanie problemów

Nadal otrzymujesz pustą zawartość?

  • Zweryfikuj, czy strona faktycznie korzysta z renderowania JavaScript (porównaj "Wyświetl źródło strony" z DevTools)
  • Zwiększ timeout_ms: niektóre strony ładują się powoli
  • Sprawdź, czy strona wymaga uwierzytelnienia lub plików cookie (użyj parametru cookies)

Trafiasz na stronę z CAPTCHA?

  • W przypadku pojedynczych requestów HTTP przełącz się na endpoint proxy (POST /api/proxy/), aby uzyskać automatyczną rotację IP.
  • Aby dodać rotację proxy do requestów browser, użyj parametru proxy endpointu browser zamiast opakowywać go w endpoint proxy. Endpoint proxy opakowuje tylko pojedyncze requesty HTTP, a nie requesty browser.
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"}'

Kolejne kroki

Aktualizacja: 31 maja 2026
Monitorowanie cen konkurencji →