← Wszystkie wpisy

Browser Tasks: Jak scrapować strony mocno oparte na JavaScript

Ponad 70% współczesnych stron internetowych wymaga JavaScript do wyrenderowania treści. Oto jak browser tasks w FourA pozwalają pobrać pełną stronę, gdy żądania HTTP zwracają pustkę.

Ponad 70% współczesnych stron internetowych polega na JavaScript do renderowania treści. Standardowy request HTTP widzi jedynie początkowy szkielet HTML. Właściwe dane ładują się dopiero po wykonaniu JavaScript, dlatego tradycyjne narzędzia do scrapingu zwracają puste strony.

Zadania przeglądarkowe FourA rozwiązują ten problem, uruchamiając dla każdego żądania rzeczywistą instancję headless Chrome.

Jak to działa

Kiedy wysyłasz zadanie z type: "browser", FourA:

  1. Uruchamia przeglądarkę headless Chrome
  2. Przechodzi pod docelowy URL
  3. Czeka na wykonanie JavaScript i ustabilizowanie DOM
  4. Opcjonalnie czeka na pojawienie się określonego selektora CSS
  5. Zwraca w pełni wyrenderowany HTML

Cały proces odbywa się na infrastrukturze FourA. Otrzymujesz czysty HTML bez konieczności instalowania przeglądarki, konfigurowania Puppeteer czy zarządzania aktualizacjami Chrome.

Kiedy używać zadań przeglądarkowych

Używaj zadań przeglądarkowych dla:

  • Aplikacji Single-Page Application (React, Vue, Angular)
  • Stron z treściami doczytywanymi dynamicznie (infinite scroll, przyciski "załaduj więcej")
  • Witryn wymagających zgody na cookie lub wstępnej konfiguracji JS
  • Treści dostępnych po uwierzytelnieniu po stronie klienta

Pozostań przy zadaniach single, gdy:

  • Strony HTML są renderowane po stronie serwera (serwisy informacyjne, blogi, wiki)
  • REST API zwracają bezpośrednio JSON
  • Priorytetem jest szybkość (zadania przeglądarkowe trwają 2-10 sekund w porównaniu do poniżej 1 sekundy dla zadań pojedynczych)

Przykład: Scraping aplikacji React

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

Selektor waitFor instruuje FourA, aby poczekać na pojawienie się .dashboard-content w DOM przed pobraniem strony. Zapewnia to, że wszystkie dane asynchroniczne zostały załadowane.

Wskazówki dotyczące wydajności

  • Zawsze używaj waitFor z konkretnym selektorem zamiast polegać na sztywnych limitach czasu. Jest to szybsze i bardziej niezawodne.
  • Ustaw rozsądny timeout. 15 sekund wystarcza dla większości aplikacji SPA. Zwiększaj go tylko dla wyjątkowo wolnych backendów.
  • Używaj domyślnie single i przełączaj się na browser tylko wtedy, gdy w odpowiedzi brakuje treści.

Co dalej

Pracujemy nad kolejnymi funkcjami przeglądarki, takimi jak robienie zrzutów ekranu, generowanie PDF i wieloetapowa nawigacja (klikanie, przewijanie, wypełnianie formularzy). Nawet bez tych dodatków zadania przeglądarkowe rozwiązują już najczęstszy problem: pobieranie rzeczywistej zawartości ze stron renderowanych przez JavaScript zamiast pustego szkieletu.

Sprawdź dokumentację, aby zobaczyć pełne porównanie typów zadań.