paint-brush
So scrapen Sie moderne SPAs, PWAs und KI-gesteuerte dynamische Sitesvon@brightdata
Neue Geschichte

So scrapen Sie moderne SPAs, PWAs und KI-gesteuerte dynamische Sites

von Bright Data9m2024/11/14
Read on Terminal Reader
Read this story w/o Javascript

Zu lang; Lesen

Dieser Leitfaden, Teil 2 einer Reihe zum erweiterten Web Scraping, befasst sich mit den Komplexitäten des Scrapings moderner, dynamischer Websites. Während sich das Web mit Single-Page Applications (SPAs), Progressive Web Apps (PWAs) und KI-gesteuerten Websites weiterentwickelt, steht das traditionelle Scraping vor neuen Herausforderungen. Der Leitfaden erläutert die nahtlose Navigation von SPAs, die app-ähnlichen Funktionen von PWAs und wie KI Inhalte personalisiert – was zu Hürden wie clientseitigem Rendering, AJAX und Caching führt. Zu den Scraping-Techniken gehören Browser-Automatisierungstools (z. B. Playwright) und Strategien zum Umgehen der Bot-Erkennung, zum Verwalten dynamischer Daten und zum Umgang mit personalisierten Inhalten. Der Leitfaden gibt eine Vorschau auf kommende Tipps zur Optimierung von Scraping-Tools für mehr Geschwindigkeit und Zuverlässigkeit.

People Mentioned

Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - So scrapen Sie moderne SPAs, PWAs und KI-gesteuerte dynamische Sites
Bright Data HackerNoon profile picture
0-item

Haftungsausschluss : Dies ist Teil 2 unserer sechsteiligen Serie zum Thema „Advanced Web Scraping“. Möchten Sie von Anfang an beginnen? Lesen Sie Teil 1, um auf den neuesten Stand zu kommen !


Wenn Sie sich mit Web Scraping beschäftigen, sind Sie wahrscheinlich bereits mit den meisten der üblichen Herausforderungen vertraut. Aber da sich das Web in rasantem Tempo verändert – insbesondere dank des KI-Booms – gibt es jede Menge neue Variablen im Scraping-Spiel. Um zum Web Scraping-Experten aufzusteigen, müssen Sie sie alle im Griff haben! 🔍


In diesem Handbuch entdecken Sie fortgeschrittene Web-Scraping-Techniken und knacken den Code zum Scraping moderner Websites von heute – sogar mit SPAs, PWAs und KI im Mix! 💪

Was ist der Deal mit SPAs, PWAs und KI-gestützten Sites?

Früher waren Websites nur eine Ansammlung statischer Seiten, die von einem Webserver verwaltet wurden. Heute gleicht das Internet eher einer geschäftigen Metropole. 🌇


Wir sind vom serverseitigen zum clientseitigen Rendering übergegangen. Warum? Weil unsere Mobilgeräte leistungsstärker sind als je zuvor, sodass es einfach sinnvoll ist, sie einen Teil der Last übernehmen zu lassen. 📲


Sicher, das wissen Sie wahrscheinlich schon alles – aber um dorthin zu gelangen, wo wir heute sind, müssen wir wissen, wo wir angefangen haben. Heute ist das Internet eine Mischung aus statischen Websites, dynamischen, serverseitig gerenderten Websites, SPAs, PWAs, KI-gesteuerten Websites und mehr. 🕸️


Und keine Sorge – SPA, PWA und KI sind keine geheimen Abkürzungen für Regierungsbehörden. Lassen Sie uns diese Buchstabensuppe aufschlüsseln. 🥣

SPA: Single-Page-Anwendung

SPA ( Single Page Application ) bedeutet nicht, dass es sich buchstäblich um eine Seite handelt, aber es übernimmt die Navigation, ohne dass jedes Mal alles neu geladen werden muss. Stellen Sie es sich wie Netflix vor: Klicken Sie herum und sehen Sie zu, wie sich der Inhalt sofort ändert, ohne dass die Seite nervig neu geladen wird. 🍿


Fry ist nicht der einzige, der Zweifel an der Seitenaktualisierung bei der Verwendung von SPAs hat


Es ist reibungslos, schnell und ermöglicht es Ihnen, im Fluss zu bleiben.

PWA: Progressive Web App

PWAs sind wie Web-Apps auf Steroiden. 💊


Technisch gesehen nutzt eine PWA ( Progressive Web App ) modernste Webfunktionen, um Ihnen das Gefühl einer nativen App direkt in Ihrem Browser zu vermitteln.

  • Offline-Funktionalität? ✅

  • Push-Benachrichtigungen? ✅

  • Nahezu sofortiges Laden durch Caching? ✅


In den meisten Fällen können Sie PWAs auch direkt auf Ihrem Gerät installieren!

KI-gestützte Websites

KI-gestützte Websites bringen einen Hauch von maschinellem Lernen mit sich. Von dynamisch generierten Designs und Chatbots bis hin zu personalisierten Empfehlungen geben Ihnen diese Websites das Gefühl, als ob die Site Sie kennt . 🤖 ✨


Es geht nicht nur ums Surfen. Es ist ein interaktives Erlebnis, das sich an Sie anpasst.

Hier ist der lustige Teil

Diese Kategorien schließen sich nicht gegenseitig aus!


Web → SPA → PWA → KI


Sie können sie wie ein Parfait schichten. 🍨 Eine PWA kann auch eine SPA sein, und beide können KI nutzen, um Dinge intelligenter und schneller zu machen. Also ja, da draußen kann es ein bisschen wild zugehen!

Erweitertes Daten-Scraping: Navigieren im heutigen Web-Dschungel

Kurz gesagt: Der Aufstieg von SPAs, PWAs und KI-gestützten Websites hat das Web um einiges komplexer gemacht. Und ja, das bedeutet, dass Web Scraping anspruchsvoller denn je ist, da es eine Menge neuer Faktoren zu berücksichtigen gibt. 😣


Und was ist mit Web 3.0 ? Es ist noch zu früh, um zu sagen, welche Auswirkungen es auf das Web Scraping haben wird, aber einige Experten spekulieren bereits darüber …


Um die heute häufigsten (und lästigsten) Hindernisse beim modernen Site Scraping zu umgehen, schauen Sie sich dieses Video von unserem Freund Forrest Knight an. Kapitel 3 behandelt genau das, wonach Sie suchen. 👇


Sehen wir uns nun an, was Sie beim erweiterten Web Scraping auf modernen Websites beachten müssen!


⚠️ Warnung: Lassen Sie sich nicht entmutigen, wenn Ihnen die ersten paar Tipps bekannt vorkommen – machen Sie weiter, denn je tiefer wir vordringen, desto mehr neue Erkenntnisse werden Sie entdecken! 🧠

Dynamische Inhalte über AJAX und Client-Side-Rendering

Heutzutage werden die meisten Sites entweder vollständig clientseitig über JavaScript gerendert (das nennt man clientseitiges Rendering ) oder verfügen über dynamische Abschnitte, die Daten laden oder das DOM der Seite ändern, während Sie mit ihr interagieren.


Wenn Sie im letzten Jahrzehnt einen Browser verwendet haben, wissen Sie, wovon wir sprechen. Dieser dynamische Datenabruf ist keine Zauberei – er wird durch AJAX-Technologie ermöglicht! (Und nein, nicht der Fußballverein Ajax 🔴⚪ – hier handelt es sich um eine andere Art von Zauberei 😉)


Sie wissen wahrscheinlich bereits, was AJAX ist, aber falls nicht, sind die Dokumente von MDN ein guter Ausgangspunkt . Ist AJAX nun eine große Sache für Web Scraping?


Nicht wirklich…


Mit Browser-Automatisierungstools wie Playwright, Selenium oder Puppeteer können Sie Ihrem Skript befehlen, eine Webseite in einem Browser zu laden, einschließlich AJAX-Anfragen. Nehmen Sie einfach eines der besten Headless-Browser-Tools und schon sind Sie fertig!


Weitere Anleitungen finden Sie in unserem vollständigen Tutorial zum Scraping dynamischer Sites in Python .


🚨 Aber warte... da ist ein Profi-Tipp! 🚨


Die meisten AJAX-basierten Seiten beziehen dynamische Daten über API-Aufrufe. Sie können diese Anfragen abfangen, indem Sie beim Laden einer Seite die Registerkarte „Netzwerk“ in den DevTools Ihres Browsers öffnen:


Beachten Sie „Fetch/XHR“ zum Filtern von AJAX-Anfragen


Sie sehen entweder:

  • Eine oder mehrere REST-APIs zu verschiedenen Endpunkten.

  • Ein oder mehrere GraphQL-API-Aufrufe an einen einzelnen Endpunkt, den Sie mit GraphQL abfragen können.


In beiden Fällen öffnet dies die Tür zum Scraping, indem diese API-Aufrufe direkt anvisiert werden. Fangen Sie die Daten einfach ab und ziehen Sie sie – so einfach ist das! 🎉

Eine kurze Anleitung finden Sie im folgenden Video:

Lazy Loading, Infinite Scrolling und dynamische Benutzerinteraktion

Webseiten sind interaktiver denn je. Designer experimentieren ständig mit neuen Möglichkeiten, um uns zu fesseln. Andererseits sind manche Interaktionen, wie das unendliche Scrollen , sogar zum Standard geworden. (Haben Sie schon einmal endlos durch Netflix gescrollt? Dann schauen Sie sich unbedingt die richtige Serie an !)


Zeit, Neues zu lernen! Verschwenden Sie keine Zeit mehr mit Scrollen nach unten


Wie gehen wir also mit all diesen kniffligen Interaktionen beim Web Scraping um? Trommelwirbel... 🥁


Mit Browser-Automatisierungstools! (Ja, schon wieder! 🎉)


Alte Nachrichten sind gute Nachrichten


Die modernsten, wie Playwright , verfügen über integrierte Methoden zur Handhabung allgemeiner Interaktionen. Und wenn etwas Einzigartiges auftaucht, das sie nicht abdecken? Normalerweise können Sie benutzerdefinierten JavaScript-Code hinzufügen, um den Trick zu erledigen.


Insbesondere:

  • Playwright bietet die Methode evaluate(), um benutzerdefiniertes JS direkt auf der Seite auszuführen.

  • Selenium bietet execute_script() , mit dem Sie JavaScript im Browser ausführen können.


Wir wissen, dass Sie diese Grundlagen wahrscheinlich bereits beherrschen, Sie müssen hier also nicht tiefer einsteigen. Wenn Sie sich aber ausführlich informieren möchten, lesen Sie diese vollständigen Anleitungen:

Inhalts-Caching in PWAs

Jetzt wird es spannend! 🌶️


PWAs sind für den Offline-Betrieb konzipiert und verlassen sich stark auf das Caching . Das ist zwar für Endbenutzer großartig, bereitet beim Web Scraping jedoch Kopfschmerzen, da Sie aktuelle Daten abrufen möchten.


Der Umgang mit zwischengespeicherten Daten ist schwierig …


Wie handhaben Sie also das Caching beim Scraping – insbesondere beim Umgang mit einer PWA? Nun, in den meisten Fällen werden Sie ein Browser-Automatisierungstool verwenden. Schließlich werden PWAs normalerweise clientseitig gerendert und/oder basieren auf dynamischem Datenabruf.


Die gute Nachricht? Browser-Automatisierungstools starten bei jedem Ausführen neue Browsersitzungen. Und im Fall von Puppeteer und Playwright werden sie standardmäßig sogar im Inkognito-Modus gestartet. Aber hier ist der Haken: Inkognito/Neue Sitzungen sind nicht cache- oder cookiefrei ! 🤯

Je mehr Sie in Ihrem Scraping-Skript mit einer Site interagieren, desto wahrscheinlicher beginnt der Browser, Anfragen zwischenzuspeichern – sogar im Inkognito-Modus. Um das Problem zu beheben, können Sie den Headless-Browser regelmäßig neu starten.


Oder Sie können mit Puppeteer das Caching mit einem einfachen Befehl vollständig deaktivieren :


 await page.setCacheEnabled(enabled)


Aber was ist, wenn der Server hinter der PWA Daten auf seiner Seite zwischenspeichert? Nun, das ist eine ganz andere Sache… 👹


Leider kann man beim serverseitigen Caching nicht viel tun. Gleichzeitig liefern einige Server zwischengespeicherte Antworten basierend auf den Headern in eingehenden Anfragen. Daher kann man versuchen, einige Anfrageheader zu ändern, wie etwa den User-Agent . 🔄


Entdecken Sie den besten User-Agent für Web Scraping !

Kontextspezifischer Inhalt

Haben Sie sich schon einmal gefragt, warum Websites Ihnen scheinbar Inhalte anzeigen, die Sie fast zu sehr interessieren? Das ist keine Zauberei, sondern maschinelles Lernen. 💡

Heutzutage bieten immer mehr Webseiten personalisierte Inhalte an, die auf Ihre Vorlieben zugeschnitten sind. Basierend auf Ihren Suchvorgängen, Site-Interaktionen, Einkäufen, Ansichten und anderen Online-Verhaltensweisen verstehen ML-Algorithmen, was Ihnen gefällt, und Webseiten bieten entsprechende Inhalte an .


Ist es nützlich? Auf jeden Fall – eine enorme Zeitersparnis! ⏱️


Ist das ethisch vertretbar? Nun, Sie haben diesen Nutzungsbedingungen zugestimmt, also ... sagen wir mal ja. 🤷


Doch hier liegt die Herausforderung beim Web Scraping: Früher musste man sich nur darum kümmern, dass Websites gelegentlich ihre HTML-Struktur änderten. Heute ändern sich Webseiten ständig und bieten potenziell bei jedem Besuch ein anderes Erlebnis.


Hören Sie Meister Yoda


Wie gehen Sie also damit um? Um konsistente Ergebnisse zu erzielen, können Sie Ihre Browser-Automatisierungstools mit vorgespeicherten Sitzungen starten, die dazu beitragen, dass der Inhalt vorhersehbar bleibt. Tools wie Playwright bieten zu diesem Zweck auch ein BrowserContext- Objekt:


 const browserContext = await browser.newContext({ // load the context storage state from a JSON file storageState: "session.json" }); const page = await context.newPage();


Um personalisierte Inhalte zu vermeiden, sollten Sie auch versuchen, Parameter wie Sprache und IP-Standort zu standardisieren – da auch diese den angezeigten Inhalt beeinflussen können. 🗺️


Und hier noch ein letzter Tipp: Überprüfen Sie Websites immer im Inkognito-Modus , bevor Sie scrapen. Auf diese Weise erhalten Sie eine „unbeschriebene“ Sitzung, frei von personalisierten Daten. Dies hilft Ihnen, den normalerweise auf der Website verfügbaren Inhalt besser zu verstehen. 🥷

KI-generierte Sites und Webseiten

Und nun zum aktuellen Topthema: KI ! 🔥


KI verändert die Art und Weise, wie wir Websites erstellen. Was früher Monate dauerte, geschieht heute in Sekunden oder Minuten! ⏱️


Einen schnellen Überblick darüber, wie KI-basierte Web-Building-Technologie das Spiel verändert, erhalten Sie im folgenden Video:


Das Ergebnis? Websites ändern Layout, Struktur und Design schneller als je zuvor. Sogar Inhalte werden mithilfe künstlicher Intelligenz bearbeitet, und Redakteure produzieren im Handumdrehen riesige Mengen an Text, Bildern und Videos. ⚡


Und das ist erst der Anfang …


Was?!?


Stellen Sie sich eine Zukunft vor, in der Websites Seiten dynamisch generieren können, basierend auf dem, was Sie anklicken oder wonach Sie suchen. Es ist, als würden sie sich in Echtzeit verändern und an jeden Benutzer anpassen.


All diese Zufälligkeit ist ein Albtraum für herkömmliche Web-Scraping-Skripte. 😱


Aber es gibt auch eine Kehrseite. So wie KI Website-Updates beschleunigt, können Sie KI-gestütztes Web Scraping nutzen, um Ihre Skripte im Handumdrehen anzupassen. Sie möchten tiefer eintauchen? Lesen Sie einen Leitfaden zu KI für Web Scraping .


Eine weitere mögliche Lösung, insbesondere um Fehler zu vermeiden, besteht darin, unabhängige Prozesse zu erstellen, die Seiten auf Änderungen überwachen und Sie benachrichtigen, bevor Ihr Skript abstürzt. Zum Beispiel durch eine Telegrammnachricht. 📩


Erfahren Sie, wie Sie einen Telegram-Benachrichtigungsbot für Seitenänderungen erstellen.

AI-Bot-Erkennung: Die Mutter aller Bot-Schutztechnologien

Fast jede Lösung, die wir bisher behandelt haben, geht davon aus, dass moderne Websites hochgradig interaktiv sind. Das bedeutet, wenn Sie sie scrapen möchten, müssen Sie ein Browser-Automatisierungstool verwenden. Aber dieser Ansatz hat eine Schwachstelle: den Browser selbst!


Browser sind nicht für das Scraping gemacht! 😲


Natürlich können Sie sie mit Erweiterungen optimieren (wie etwa mit Puppeteer Extra ) oder alle oben genannten Optimierungen implementieren. Doch mit der heutigen KI-gestützten Bot-Erkennung sind herkömmliche Browser immer leichter zu erkennen, insbesondere wenn Websites fortschrittliche Anti-Scraping-Technologien wie die Analyse des Nutzerverhaltens einsetzen.


Was ist also die Lösung? Ein leistungsstarker Scraping-Browser, der:

  • Läuft im Header-Modus wie ein normaler Browser, um sich unter die echten Benutzer zu mischen.

  • Mühelose Skalierung in der Cloud, wodurch Sie Zeit und Infrastrukturkosten sparen.

  • Integriert rotierende IPs aus einem der größten und zuverlässigsten Proxy-Netzwerke.

  • Löst CAPTCHAs automatisch, verwaltet den Browser-Fingerprint und passt Cookies und Header an, während gleichzeitig Wiederholungsversuche für Sie abgewickelt werden.

  • Funktioniert nahtlos mit Top-Automatisierungstools wie Playwright, Selenium und Puppeteer.


Dies ist nicht nur eine futuristische Idee. Es ist da und genau das bietet der Scraping Browser von Bright Data . Möchten Sie einen genaueren Blick darauf werfen? Sehen Sie sich dieses Video an:


Abschließende Gedanken

Jetzt wissen Sie, was modernes Web Scraping erfordert – insbesondere im Hinblick auf die Bewältigung KI-gesteuerter SPAs und PWAs!


Sie haben hier sicherlich einige Profi-Tipps mitgenommen, aber denken Sie daran, dies ist nur Teil 2 unseres sechsteiligen Abenteuers in fortgeschrittenes Web Scraping! Also, schnallen Sie sich an, denn wir werden gleich noch mehr Spitzentechnologie, clevere Lösungen und Insider-Tipps kennenlernen.


Nächster Halt? Optimierungsgeheimnisse für schnellere, intelligentere Scraper! 🚀