← Tous les articles

Browser Tasks : comment scraper les sites riches en JavaScript

Plus de 70 % des sites web modernes ont besoin de JavaScript pour afficher leur contenu. Voici comment les Browser Tasks de FourA vous permettent d'obtenir la page complète lorsque les requêtes HTTP renvoient une page vide.

Plus de 70 % des sites web modernes dépendent de JavaScript pour afficher leur contenu. Une requête HTTP standard ne voit que la structure HTML initiale. Les données réelles sont chargées après l'exécution du JavaScript, raison pour laquelle les outils de scraping traditionnels renvoient des pages vides.

Les tâches de navigateur FourA résolvent ce problème en exécutant une véritable instance headless de Chrome pour chaque requête.

Fonctionnement

Lorsque vous envoyez une tâche avec type: "browser", FourA :

  1. Lance un navigateur Chrome headless
  2. Navigue vers l'URL cible
  3. Attend l'exécution du JavaScript et la stabilisation du DOM
  4. Attend éventuellement l'apparition d'un sélecteur CSS spécifique
  5. Renvoie le code HTML entièrement rendu

L'ensemble du processus se déroule sur l'infrastructure de FourA. Vous récupérez du HTML propre sans aucun navigateur à installer, aucun Puppeteer à configurer et aucune mise à jour de Chrome à gérer.

Quand utiliser les tâches de navigateur

Utilisez les tâches de navigateur dans les cas suivants :

  • Applications monopages (React, Vue, Angular)
  • Pages avec chargement différé (défilement infini, boutons "charger plus")
  • Sites nécessitant l'acceptation de cookies ou une initialisation JS
  • Contenu situé derrière des flux d'authentification côté client

Conservez les tâches single dans les cas suivants :

  • Pages HTML rendues côté serveur (sites d'actualités, blogs, wikis)
  • API REST qui renvoient directement du JSON
  • La vitesse est la priorité (les tâches de navigateur prennent de 2 à 10 secondes contre moins d'une seconde pour les tâches simples)

Exemple : Scraper une application 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
    }
  }'

Le sélecteur waitFor indique à FourA d'attendre que .dashboard-content apparaisse dans le DOM avant de capturer la page. Cela garantit que toutes les données asynchrones sont bien chargées.

Conseils de performance

  • Utilisez toujours waitFor avec un sélecteur spécifique au lieu de vous fier à des délais d'attente fixes. C'est à la fois plus rapide et plus fiable.
  • Définissez un timeout raisonnable. 15 secondes suffisent pour la plupart des SPA. Ne l'augmentez que pour les backends particulièrement lents.
  • Utilisez single par défaut et ne passez à browser que si du contenu manque dans la réponse.

Prochaines étapes

Nous développons des fonctionnalités de navigateur supplémentaires, notamment la capture d'écran, la génération de PDF et la navigation en plusieurs étapes (clics, défilement, remplissage de formulaires). Mais même sans ces options, les tâches de navigateur traitent déjà le problème principal : obtenir le contenu réel des pages rendues en JavaScript au lieu d'une page vide.

Consultez la documentation pour la comparaison complète des types de tâches.