Qu’est-ce qu’une page dynamique exactement ?

Salut! Les pages Web dynamiques peuvent sembler déroutantes à première vue. Je m'appelle [John] et je travaille avec des web scrapers depuis plus de 5 ans. Je suis donc ici pour expliquer exactement ce que sont les pages dynamiques.

Que vous soyez nouveau dans le web scraping ou un professionnel chevronné, comprendre ce qui rend une page « dynamique » est essentiel pour pouvoir la scraper efficacement. À la fin de ce guide, vous saurez comment identifier les pages dynamiques, pourquoi elles sont importantes pour le web scraping et comment aborder leur scraping.

Pages statiques ou dynamiques

Pour comprendre ce qu'est une page dynamique, il est utile de regarder d'abord le contraire : une page statique.

A page Web statique a un contenu prédéfini et ne change pas après le chargement initial de la page. Tous les éléments HTML, CSS, JavaScript, images et autres éléments sont chargés à partir du serveur lors du premier rendu de la page.

Selon la documentation Web Fundamentals de Google, les pages statiques ont deux qualités clés :

• Ils affichent le même contenu pour tous les utilisateurs.
• Le contenu ne change pas en fonction de l'interaction de l'utilisateur.

Quelques exemples de pages statiques :

• Sites HTML simples sans grande interactivité
• Sites d'information de la vieille école comme Wikipédia
• Blogs et sites Web classiques

A page Web dynamique, en revanche, met à jour son contenu après le chargement initial, sans avoir à actualiser complètement la page. Ceci est réalisé en effectuant des requêtes supplémentaires (généralement des requêtes XHR ou Fetch à l'aide de JavaScript) pour récupérer davantage de données du backend à la demande.

Ces nouvelles données peuvent ensuite être utilisées pour modifier le DOM et mettre à jour ce que vous voyez sur la page.

Selon MDN Web Docs, certains signes d'une page dynamique sont :

• Le contenu de la page change sans recharger la page
• Les éléments DOM sont ajoutés, supprimés ou manipulés
• Des données supplémentaires sont téléchargées et interagissent avec

Exemples courants de pages dynamiques :

• Applications Web interactives modernes comme Twitter, Facebook, etc.
• Sites avec des flux à défilement infini comme Instagram, Reddit, Pinterest
• Listes de produits de commerce électronique qui chargent des articles paresseusement
• Pages construites avec des frameworks JavaScript comme React, Vue, Angular

Donc en résumé, un page dynamique peut mettre à jour son contenu et son DOM après le chargement initial en effectuant des requêtes supplémentaires pour récupérer des données depuis le backend. Presque toutes les applications Web modernes auront un certain niveau de chargement dynamique.

Identification des pages dynamiques

Maintenant que vous comprenez conceptuellement la différence entre les pages statiques et dynamiques, passons en revue quelques signes clairs qui indiquent qu'une page est dynamique :

1. Construit avec un framework JavaScript

Si un site est construit à l'aide de React, Vue, Angular, Svelte ou tout autre framework JavaScript frontal, il s'agit probablement d'une page dynamique.

Ce Enquête 2021 de l'État de JS a montré la popularité des frameworks frontend :

Vous pouvez identifier si un site utilise React en installant le Outils de développement React extension de navigateur, qui mettra en évidence les composants React sur la page.

2. Chargement paresseux du contenu

Si une page charge uniquement des éléments tels que des images, des vidéos ou des éléments tels que des publications et des commentaires lorsqu'ils défilent, il s'agit d'une forme de chargement dynamique.

Le contenu n'est récupéré du backend qu'en cas de besoin, lorsque l'utilisateur consulte cette partie de la page. Le chargement paresseux améliore les performances.

3. Nouvelles requêtes réseau sur l'interaction

Ouvrez l'onglet Réseau dans les outils de développement Chrome. Rechargez la page et surveillez les requêtes – si des requêtes XHR ou Fetch supplémentaires sont effectuées lorsque vous faites défiler, cliquez sur des boutons, survolez des éléments, etc., alors le contenu dynamique est probablement en cours de chargement.

Par exemple, voici les nouvelles requêtes faites lors du scroll sur Twitter :

Twitter network requests demo

Chaque requête supplémentaire renvoie davantage de tweets à afficher sur la page.

4. Mise à jour des éléments DOM

Inspectez les éléments de la page avant et après avoir interagi avec elle. Si le DOM change – de nouveaux éléments sont ajoutés, les attributs des éléments changent, des nœuds sont supprimés – cela indique des modifications dynamiques.

Par exemple, voici la mise à jour du DOM de Twitter au fur et à mesure que je fais défiler mon flux :

Twitter DOM changes demo

Les nouveaux tweets sont injectés dynamiquement dans le DOM au fur et à mesure qu'ils sont récupérés depuis le backend.

5. Désactivation de JavaScript

Un moyen simple de tester si une page s'appuie sur JavaScript pour le chargement dynamique consiste à désactiver temporairement JS dans votre navigateur (en utilisant une extension comme Sélecteur JavaScript rapide) et rechargez.

Si le contenu de la page change de manière significative avec JavaScript désactivé, c'est le signe qu'elle utilise JS pour charger le contenu de manière dynamique.

Exemples de pages dynamiques

Examinons quelques exemples concrets pour rendre l'identification des pages dynamiques plus concrète.

Twitter

Nous avons déjà utilisé Twitter comme exemple plus tôt dans l'article. Il s'agit d'une application Web dynamique par excellence, avec un défilement infini, un chargement paresseux du contenu et des mises à jour DOM.

Quelques signes clairs que Twitter est dynamique :

• Construit avec React
• Chargement paresseux d'images/vidéos
• Nouvelles requêtes réseau lors du défilement
• DOM se met à jour avec de nouveaux tweets

Voici une vidéo récapitulative mettant en évidence le comportement dynamique :

Twitter Dynamic Page Loading Demo

Facebook

Facebook est un autre excellent exemple d'application Web dynamique :

• Flux à défilement infini
• Chargement paresseux des images/vidéos
• Requêtes réseau supplémentaires lors du défilement
• DOM se met à jour avec de nouveaux messages

Voici une vidéo montrant le chargement dynamique sur Facebook :

Facebook Dynamic Loading Demo

Reddit

Reddit est un site extrêmement dynamique, étant l'un des pionniers des flux à défilement infini. Quelques signes que Reddit est dynamique :

• Construit avec React
• Charge constamment de nouveaux messages lorsque vous faites défiler
• Chargement paresseux des images
• Des tonnes de nouvelles requêtes réseau lors du défilement

Vous pouvez voir vous-même le chargement dynamique en ouvrant Reddit dans votre navigateur.

Amazon

Même les listes de produits d'Amazon ont un comportement de chargement dynamique :

• Des produits supplémentaires se chargent lors du défilement
• Les requêtes réseau récupèrent les nouveaux produits
• DOM se met à jour avec le nouveau HTML

Voici un exemple : notez comment la barre de défilement remonte lorsque de nouveaux produits sont chargés :

Amazon Dynamic Product Loading

Cela améliore les performances en chargeant uniquement les produits au fur et à mesure qu'ils sont visualisés.

Moyenne

Les plateformes de blogs comme Medium ont un chargement dynamique afin que les articles se chargent plus rapidement :

• Les images se chargent paresseusement pendant que vous faites défiler
• Le corps du texte se charge en morceaux
• Des requêtes réseau supplémentaires récupèrent plus de texte

Vous pouvez observer ce comportement sur n'importe quel article sur Medium.

Pinterest

Pinterest regorge bien sûr de chargements dynamiques à défilement infini :

• Les épingles se chargent paresseusement pendant que vous faites défiler
• Les nouvelles requêtes réseau récupèrent plus de broches
• Le DOM se met à jour avec les nouvelles broches

Comportement très similaire à celui d’autres flux de médias sociaux.

Pourquoi c'est important pour le Web Scraping

Maintenant que vous savez comment reconnaître les pages Web dynamiques, voyons pourquoi cela est important lors du scraping.

Comprendre si une page est statique ou dynamique affecte la outils et techniques nécessaire pour construire un grattoir efficace.

Gratter des pages statiques

Pour les pages Web statiques, nous pouvons simplement :

1. Effectuez une seule requête HTTP pour récupérer le code HTML complet
2. Analyser le contenu HTML dans le langage de programmation de notre choix
3. Extrayez toutes les données dont nous avons besoin avec une bibliothèque d'analyse comme Beautiful Soup en Python ou Cheerio dans Node.js

Par exemple, voici un simple scraper Python utilisant Requests et Beautiful Soup pour gratter une page Wikipédia statique :

import requests
from bs4 import BeautifulSoup

url = ‘https://en.wikipedia.org/wiki/Hippopotamus‘ 

response = requests.get(url)
soup = BeautifulSoup(response.text, ‘html.parser‘)

title = soup.find(‘h1‘).text
infobox = soup.find(‘table‘, class_=‘infobox‘)

print(title)
print(infobox)

Étant donné que Wikipédia diffuse tout le contenu, y compris le texte, les images, les tableaux, etc. dans le HTML initial, nous pouvons analyser le contenu complet de la page dans un simple script.

Pas besoin de navigateur sans tête ni de simulation des interactions des utilisateurs. Le HTML statique contient toutes les données dont nous avons besoin.

Cette approche simple de scraping fonctionne bien pour de nombreux sites et pages statiques.

Grattage de pages dynamiques

Le scraping de pages dynamiques nécessite une approche différente, car :

• Le HTML initial ne contient pas tout le contenu – plus est chargé dynamiquement
• Nous devons le faire simuler les interactions des utilisateurs comme faire défiler pour déclencher le chargement du contenu
• L'exécution de JavaScript est requise pour gérer les requêtes dynamiques

Cela signifie que nous devons utiliser un navigateur sans tête comme Marionnettiste, Dramaturge ou Sélénium pour :

1. Chargez le JavaScript + CSS complet pour afficher correctement la page initiale
2. Faites défiler, cliquez, survolez, etc. pour déclencher le chargement dynamique du contenu
3. Attendez que les requêtes réseau soient terminées et que la page soit mise à jour
4. Extraire le HTML mis à jour contenant du contenu chargé dynamiquement

Par exemple, voici comment récupérer des flux Twitter à défilement infini avec Python + Playwright :

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()  
    page.goto(‘https://twitter.com/home‘)

    page.scroll_to_bottom() # trigger dynamic loading
    page.wait_for_load_state(‘networkidle‘) 

    html = page.content() # get full html
    # parse html to extract tweets... 

   browser.close()

Les principales différences avec le scraping statique :

• Lancer un navigateur Chrome complet
• Exécuter des commandes de défilement pour déclencher le chargement du contenu
• En attente que le réseau soit inactif et que le DOM se mette à jour
• Obtenir le code HTML mis à jour une fois le chargement dynamique terminé

Cette automatisation du navigateur est nécessaire pour rendre entièrement les pages dynamiques avant de les supprimer.

Scraping statique ou dynamique

Voici une comparaison entre le scraping de page statique et dynamique :

Comprendre ces différences clés vous aidera à choisir la bonne approche pour chaque projet de scraping.

Outils pour gratter des pages dynamiques

Parlons maintenant de certains des outils les plus populaires pour supprimer des sites dynamiques utilisant beaucoup de JavaScript :

Marionnettiste

Marionnettiste est une bibliothèque Node.js développée par Google pour contrôler Chrome sans tête. Cela nous permet de :

• Lancer une instance de navigateur
• Charger des pages
• Interagissez en faisant défiler, en cliquant, en remplissant des formulaires
• Exécuter JavaScript sur les pages
• Accédez au DOM et extrayez le HTML

Avec plus de 67 XNUMX étoiles sur GitHub, Puppeteer est l’une des options les plus utilisées et les plus conviviales pour les débutants.

Dramaturge

Dramaturge est le petit nouveau du quartier, également pour contrôler Chromium, Firefox et WebKit. Principales caractéristiques:

• Prend en charge Chrome, Firefox et Safari
• Plus rapide et plus fiable que Puppeteer
• Facile à installer et à utiliser dans toutes les langues
• Puissants assistants d'attente et assertions intégrés
• 19 XNUMX étoiles GitHub

Nous avons utilisé Playwright dans les exemples de code de ce guide en raison de ses excellentes API.

Sélénium

Sélénium existe depuis plus de 15 ans et constitue la suite d'automatisation de navigateur la plus utilisée.

Avantages:

• Prend en charge tous les principaux navigateurs
• Très mature et éprouvé au combat
• Grande communauté et écosystème

Les inconvénients:

• Prend uniquement en charge JavaScript/TypeScript
• L'API est plus lourde que Puppeteer ou Playwright

Selenium est indispensable pour les tests multi-navigateurs, mais Puppeteer et Playwright sont souvent plus faciles à utiliser pour le web scraping.

Scripts de navigateur personnalisés

Vous pouvez également contrôler les navigateurs directement à l’aide d’API de navigateur brutes et de langages comme JavaScript. Cela offre le plus de flexibilité mais nécessite plus d'efforts que l'exploitation de bibliothèques comme Puppeteer.

Des approches comme Marionnettiste chromé et les Sans chrome ont émergé pour simplifier le travail directement avec le protocole Chrome DevTools.

Services de navigateur sans tête

Des services comme Apifier, Diffbotet une Exploration des proxys fournir des solutions sans tête basées sur le cloud qui gèrent le scraping dynamique pour vous.

L’avantage est une réduction des frais de DevOps et d’infrastructure puisqu’ils gèrent les navigateurs et les proxys. Mais moins de contrôle par rapport à l’exécution de vos propres scripts.

Faits marquants

Récapitulons ce que nous avons couvert :

• Pages dynamiques mettre à jour le contenu après le chargement initial en récupérant les données du backend

• Pages statiques diffuser tout le contenu dans la première réponse HTML

• Identifier les pages dynamiques :

  • Construit avec des frameworks JavaScript
  • Chargement paresseux du contenu
  • Nouvelles requêtes réseau sur l'interaction
  • Mise à jour des éléments DOM
  • La désactivation de JavaScript modifie la page

• Supprimer des pages statiques est simple, mais les pages dynamiques nécessitent une automatisation du navigateur

• Les outils de développement Puppeteer, Playwright, Selenium et Chrome sont couramment utilisés pour supprimer des sites JavaScript dynamiques.

• Comprendre si une page est statique ou dynamique détermine la meilleure approche de scraping

J'espère que ce guide vous a donné une compréhension complète des pages Web dynamiques et de leur impact sur le web scraping. Faites-moi savoir si vous avez d'autres questions !

Bon grattage !