API Screenshot pour SPA, SSR et pages dynamiques | ScreenshotCenter

Pourquoi les pages dynamiques échouent avec les outils simples

Les applications monopage (SPA) construites avec React, Vue ou Angular affichent leur contenu après le chargement du HTML initial. Les frameworks SSR comme Next.js et Nuxt peuvent hydrater de manière interactive. Si l'outil de capture se déclenche avant la fin du JavaScript, vous obtenez une page blanche, un spinner ou un contenu incomplet.

ScreenshotCenter utilise un vrai navigateur Chromium qui attend l'inactivité réseau, la stabilité du DOM ou vos sélecteurs personnalisés avant de capturer. Cet article couvre les stratégies qui garantissent des résultats pixel-perfect sur les pages les plus dynamiques.

Stratégies d'attente

1. Inactivité réseau (par défaut)

Par défaut, ScreenshotCenter attend que la page n'ait plus que deux connexions réseau ouvertes pendant 500 ms. Cela couvre la plupart des appels API, images chargées en différé et polices web.

2. Délai fixe

Définissez delay (en millisecondes) pour ajouter une pause après le chargement de la page :

{
  "url": "https://app.example.com/dashboard",
  "delay": 5000,
  "format": "png"
}

3. Attente d'un sélecteur

La stratégie la plus précise. Utilisez wait_for pour spécifier un sélecteur CSS qui doit apparaître avant la capture :

{
  "url": "https://app.example.com/report",
  "wait_for": ".report-table tbody tr",
  "format": "png"
}

Le navigateur sonde toutes les 100 ms pendant 30 secondes maximum. Dès que le sélecteur correspond, la capture se déclenche immédiatement.

Flux clic et scroll

Certaines pages cachent du contenu derrière des onglets, des accordéons ou des boutons « Charger plus ». Utilisez les étapes d'automatisation pour interagir avec la page avant la capture :

• Cliquer sur un onglet : Ouvrir une section spécifique d'un tableau de bord.
• Scroller en bas : Déclencher le chargement par défilement infini.
• Fermer un modal : Supprimer une bannière de cookies avant la capture.

Bonnes pratiques pour les captures de SPA

Pratique	Pourquoi
Préférez wait_for au delay fixe	Plus rapide et déterministe
Utilisez size=page	Les SPA ont souvent un contenu de hauteur variable
Activez hide_popup=true	Supprime les bannières de cookies
Testez d'abord en format=png	Plus facile à déboguer visuellement
Combinez avec country	Les SPA localisées affichent un contenu différent par région

Exemple : capturer un tableau de bord React

curl -X POST https://api.screenshotcenter.com/v1/screenshot \
  -H "X-API-KEY: VOTRE_CLE_API" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://app.example.com/analytics",
    "wait_for": ".chart-container svg",
    "delay": 2000,
    "size": "page",
    "format": "png",
    "hide_popup": true
  }'

Le navigateur attend le rendu du SVG du graphique, ajoute un buffer de 2 secondes pour les animations, puis capture la page entière sans bannières de cookies.

FAQ

ScreenshotCenter exécute-t-il le JavaScript ?

Oui. Chaque capture s'exécute dans une instance Chromium réelle avec exécution complète du JavaScript — React, Vue, Angular, Svelte et tout autre framework.

Que se passe-t-il si le sélecteur n'apparaît jamais ?

Après 30 secondes, le navigateur capture ce qui est actuellement à l'écran. Vérifiez le champ status pour les avertissements.

Peut-on capturer une SPA qui nécessite une connexion ?

Oui — combinez wait_for avec des cookies ou les étapes d'automatisation pour les pages authentifiées.

Prêt à capturer des pages dynamiques ? Lancez une capture de page dynamique maintenant.