Browser Tasks: Jak scrapować strony mocno oparte na JavaScript

Ponad 70% współczesnych stron internetowych opiera się na JavaScript, aby wyrenderować swoją treść. Standardowy request HTTP widzi tylko początkowy szkielet HTML. Rzeczywiste dane ładują się dopiero po wykonaniu JavaScript, dlatego tradycyjne narzędzia do scrapingu zwracają puste strony.

Rozwiązaniem tego problemu w FourA są browser tasks, które dla każdego requestu uruchamiają prawdziwą, headless instancję Chrome.

Jak to działa

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

Uruchamia headless przeglądarkę Chrome
Przechodzi pod docelowy URL
Czeka na wykonanie JavaScript i ustabilizowanie DOM
Opcjonalnie czeka na pojawienie się konkretnego selektora CSS
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ć browser tasks

Używaj browser tasks, gdy:

Masz do czynienia z aplikacjami typu Single-Page Application (React, Vue, Angular)
Strony mają leniwie ładowaną treść (infinite scroll, przyciski „załaduj więcej”)
Strony wymagają zgody na pliki cookie lub wstępnej konfiguracji JS
Treść znajduje się za procesami uwierzytelniania po stronie klienta

Pozostań przy zadaniach single, gdy:

Strony to HTML renderowany po stronie serwera (serwisy informacyjne, blogi, wiki)
Korzystasz z REST API, które bezpośrednio zwracają JSON
Priorytetem jest szybkość (browser tasks zajmują 2-10 sekund, podczas gdy zadania single poniżej 1 sekundy)

Przykład: Scrapowanie aplikacji w React

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

Selektor waitFor mówi FourA, aby poczekać, aż .dashboard-content pojawi się w DOM przed przechwyceniem strony. Gwarantuje to, że wszystkie asynchroniczne dane zostały załadowane.

Wskazówki dotyczące wydajności

Zawsze używaj waitFor z konkretnym selektorem zamiast polegać na timeoutach. Jest to zarówno szybsze, jak i bardziej niezawodne.
Ustaw rozsądny timeout. 15 sekund wystarcza dla większości aplikacji SPA. Zwiększaj go tylko w przypadku naprawdę wolnych backendów.
Używaj single jako domyślnego rozwiązania i przełączaj się na browser tylko wtedy, gdy w odpowiedzi brakuje treści.

Co dalej

Pracujemy nad dodatkowymi możliwościami przeglądarki, w tym robieniem zrzutów ekranu, generowaniem PDF oraz wieloetapową nawigacją (klikanie, przewijanie, wypełnianie formularzy). Jednak nawet bez tych dodatków, browser tasks już teraz rozwiązują najczęstszy problem: pobieranie rzeczywistej treści ze stron renderowanych w JavaScript zamiast pustego szkieletu.

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