---
title: "Wie man eine Next.js-Website in Sekundenschnelle durch Hydration-Daten scrapen kann"
slug: web-scraping-with-next-js
date: 2026-02-22T07:21:48+00:00
modified: 2026-07-19T10:11:02+00:00
permalink: https://brightdata.de/blog/wie/web-scraping-with-next-js
type: blog
---

[ Blog ](https://brightdata.de/blog "Blog") / [How Tos](https://brightdata.de/blog/wie)







 [How Tos](https://brightdata.de/blog/wie)

# Wie man eine Next.js-Website in Sekundenschnelle durch Hydration-Daten scrapen kann

Entdecken Sie in diesem kompakten Tutorial effiziente Web-Scraping-Techniken für Next.js-Websites, indem Sie React Hydration nutzen.

 3 min lesen





 [ ![Antonello Zanini](https://media.brightdata.de/2022/12/Antonello-Zanini-2-50x50.jpg) ](https://brightdata.com/blog/authors/antonello-zanini)

 [Antonello Zanini

Technical Writer

 ](https://brightdata.com/blog/authors/antonello-zanini)





 ![Scraping dynamic websites with next.js main image](https://media.brightdata.de/2024/03/How-to-Scrape-with-Next.Js.svg)





In diesem Tutorial über Tricks zum Scraping von Next.js-Websites lernen Sie Folgendes:

- Was Next ist und warum es so beliebt ist
- Warum es dank der Funktionsweise von React Hydration einfach ist, Next.js-Webseiten zu scrapen
- Wie Sie React Hydration für das Web-Scraping nutzen können

Lassen Sie uns loslegen!

## Was ist Next.js und wie funktioniert es?

[Next.js](https://nextjs.org/) ist ein JavaScript-Framework, das auf React aufbaut und zum Erstellen von serverseitig gerenderten und statisch generierten Websites dient. Es vereinfacht den Entwicklungsprozess durch eine umfangreiche API und einen strukturierten Ansatz zum Erstellen serverseitiger React-Anwendungen.

Next.js hat im Laufe der Jahre stark an Popularität gewonnen und ist [laut Statista](https://www.statista.com/statistics/1124699/worldwide-developer-survey-most-used-frameworks-web/) mittlerweile die fünftmeistgenutzte Webbibliothek. Dies ist auf seine Benutzerfreundlichkeit, seine hervorragende Leistung, seine Ähnlichkeiten mit React, seine umfangreiche Dokumentation und die Unterstützung durch die Community zurückzuführen. Kein Wunder, dass viele große Unternehmen und Startups Next.js für ihre Webentwicklungsanforderungen wählen.

Auf hoher Ebene funktioniert Next.js, indem es Daten auf dem Server abruft und an React-Komponenten weiterleitet, um vorgerenderte HTML-Dokumente zu erstellen. Dieser Prozess verbessert die Leistung, indem HTML-Inhalte auf dem Server generiert werden, die dann an den Client gesendet werden können, um das Laden der Startseite zu beschleunigen.

## Wie Sie React Hydration für das Web-Scraping nutzen können

[Hydration](https://blog.logrocket.com/react-hydration-pre-rendered-html/) schließt die Lücke zwischen serverseitigem und clientseitigem Rendering. Genauer gesagt ist Next.js Hydration der Prozess, durch den das von Next.js generierte HTML-Dokument in eine voll funktionsfähige clientseitige React-Anwendung umgewandelt wird.

Während der Hydration – nachdem der Browser die vom Server zurückgegebene HTML-Seite geladen hat –[fügt React der Seite Interaktivität hinzu](https://react.dev/reference/react-dom/client/hydrateRoot). Konkret fügt es Ereignis-Listener hinzu und verarbeitet den Status in den DOM-Knoten, die den auf dem Server gerenderten React-Komponenten entsprechen.

Dies sind die Schritte, die React benötigt, um eine vorgerenderte Seite zu hydrieren:

1. **Anfängliches Server-Rendering**: Der Server generiert das HTML-Dokument mit der HTML-Darstellung der auf der Seite verwendeten React-Komponenten.
2. **Clientseitige JavaScript-Ausführung**: Wenn der Client das HTML-Markup empfängt, führt er das JavaScript-Bundle aus, das den React-Code enthält.
3. **Abgleich**: React vergleicht das vom Server zurückgegebene HTML mit der virtuellen DOM-Darstellung, die spontan generiert wurde. [Weitere Informationen finden Sie in der offiziellen Dokumentation](https://react.dev/learn/preserving-and-resetting-state).
4. **Hydration**: Wenn beide identisch sind, schließt React das Rendering ab, indem es Ereignisbehandler hinzufügt und den Status verarbeitet, während es so viel wie möglich vom vorhandenen DOM wiederverwendet.

Um diesen Vorgang auszuführen, benötigt React dieselben Daten, die vom Server zur Generierung des HTML-Dokuments verwendet werden. Aus diesem Grund fügt Next.js der generierten Seite einige spezielle DOM-Elemente hinzu, die die Props-Daten enthalten.

Auf einigen Next.js-Websites finden Sie diese Daten im `<script>` -Element mit der ID `__NEXT_DATA__`. Dieser spezielle DOM-Knoten enthält Daten im JSON-Format, die React für die Hydration verwendet, wie folgt:

![Finding the  __NEXT_DATA__ ID](https://media.brightdata.de/2024/03/finding-the-__next_data__id-1.png)Auf neueren Next.js-Websites, die den neuen [App Router](https://nextjs.org/docs/app) verwenden, werden die Hydration-Daten stattdessen in den `self.__next_f.push()` -Funktionsaufrufen in mehreren `<script>` -Knoten gespeichert:

![self.__next_f.push() calls in script nodes](https://media.brightdata.de/2024/03/self.__next_f.push-calls-in-script-nodes.png)Beachten Sie, dass diese Knoten möglicherweise noch mehr Daten enthalten als auf der Website angezeigt werden. Wie ist das möglich? Weil diese Hydration-Elemente alle API- und Datenbankdaten speichern, die während der Seitengenerierung vom Server abgerufen und an React-Komponenten übergeben werden. Allerdings werden möglicherweise nicht alle Attribute dieser Objekte tatsächlich in den Komponenten abgerufen und verwendet.

Nun spielt es keine Rolle, ob Sie tatsächlich verstanden haben, warum diese Daten vorhanden sein müssen, damit React funktioniert. Wichtig ist, dass die über Next.js generierten Webseiten die zu rendernden Daten im JSON-Format in speziellen DOM-Knoten enthalten. Wie Sie sich vorstellen können, hat dies enorme Auswirkungen auf das Web-Scraping mit Nex.js!

## Scraping von Next.js-Websites durch die Hydration-Daten

Das Extrahieren von Daten aus einer mit Next.js erstellten Seite ist so einfach, dass Sie nicht einmal ein Scraping-Skript benötigen. Die DevTools Ihres Browsers reichen völlig aus.

Sehen wir uns nun an, wie Sie React Hydration nutzen können, um Next.js-Websites in Sekundenschnelle zu scrapen!

### **Extrahieren von Daten aus `__NEXT_DATA__`**

Angenommen, Sie haben überprüft, dass die zu scrapend Zielseite mit Next.js erstellt wurde (wie das geht, erfahren Sie in der FAQ-Frage).

Rufen Sie nun die Seite in Ihrem Browser auf, klicken Sie mit der rechten Maustaste und wählen Sie „Untersuchen”, um zu den DevTools zu gelangen. Wechseln Sie zur Registerkarte „Konsole” und führen Sie die folgende JavaScript-Zeile aus, um das gewünschte `<script>` -Element auszuwählen:

```none
`const scriptNode = document.querySelector("#__NEXT_DATA__")`
```

Dadurch wird die Funktion [querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) verwendet, um das Element im DOM mit der ID \_\_NEXT\_DATA\_\_ auszuwählen und es der Variablen `scriptNode` zuzuweisen.

Wenn Sie `scriptNode` in die Konsole eingeben und die Eingabetaste drücken, erhalten Sie den gewünschten Knoten:

![Typing scriptnode in console](https://media.brightdata.de/2024/03/Typing-scriptnode-in-console.png)Greifen Sie auf den inneren HTML-Inhalt zu und[führen Sie ein Parsing des Inhalts als JSON-Inhalt aus](/blog/how-tos/parse-json-data-with-python)mit:

`const jsonData = JSON.parse(scriptNode.innerHTML)`

Et voilà! Das Objekt `jsonData` enthält nun alle Daten, die React zum Rendern der Komponenten auf der Seite verwendet hat:

![jsondata object with all the data](https://media.brightdata.de/2024/03/json-data-object-with-all-the-data.png)Konzentrieren Sie sich im Detail auf das Feld `pageProps` innerhalb von props:

```none
`jsonData.props.pageProps`
```

![The pageprops field in the console](https://media.brightdata.de/2024/03/Focusing-on-the-pageprops-field-1.png)Klicken Sie anschließend mit der rechten Maustaste auf das Objekt und wählen Sie die Option „Objekt kopieren”:

![Copying the object from the console tab](https://media.brightdata.de/2024/03/Copying-the-object.png)Erstellen Sie abschließend eine Datei „data.json“ und fügen Sie den gewünschten Inhalt ein!

Großartig! Sie haben gerade in weniger als einer Minute Web-Scraping auf einer Next.js-Website durchgeführt.

Wenn Sie alles zusammenfügen, erhalten Sie dieses Next.js-Scraping-Skript:

```none
const scriptNode = document.querySelector("#__NEXT_DATA__")

const jsonData = JSON.parse(scriptNode.innerHTML)

jsonData.props.pageProps
```

### **Abrufen von Daten aus `self.__next_f.push` -Funktionen**

Next.js 13 hat den App Router eingeführt. Dadurch ändert sich die Art und Weise, wie Next.js die Daten zur Hydrierung an React übermittelt. In diesem Fall müssen Sie alle `<script>` -Knoten auswählen, die die Zeichenfolge `self.__next_f.push` enthalten.

Rufen Sie erneut die Zielseite im Browser auf und öffnen Sie die Konsole. Führen Sie den folgenden Befehl aus, um die `<script>` -Knoten auszuwählen:

```none
`const scriptNodes = document.querySelectorAll("script")`
```

[`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) gibt ein `NodeList` -Objekt zurück. Konvertieren Sie es mit `Array.from()` in ein Array, um die `filter()` -Methode anzuwenden und nur die gewünschten Knoten zu erhalten:

```none
const hydrationScriptNodes = Array.from(scriptNodes).filter((e) => e.innerHTML.includes("self.__next_f.push"))
```

Jetzt enthält `hydrationScriptNodes` alle Hydration- `<script>` -Elemente auf der Seite:

![the hydrationScriptNodes containing all hydration elements](https://media.brightdata.de/2024/03/the-hydrationScriptNodes-containing-all-hydration-elements-1.png)In der Regel möchten Sie jedoch nur den Knoten, der das Attribut `initialTree` hat. Hier sind alle interessanten Hydration-Daten gespeichert:

![Finding the hydration data of interest](https://media.brightdata.de/2024/03/Finding-the-hydration-data-of-interest-1.png)Wählen Sie ihn mit folgendem Befehl aus:

```none
`const scriptNode = hydrationScriptNodes.find((e) => e.innerHTML.includes("initialTree"))`
```

Extrahieren Sie dann die interessierenden Daten mit:

```none
`scriptNode.innerHTML`
```

Beachten Sie, dass die abgerufenen Daten zwar die gewünschten Informationen enthalten, jedoch zusätzliches Parsing erforderlich ist. Mit ein paar zusätzlichen Zeilen können Sie sie in ein besser lesbares Format konvertieren.

![converting the data to a more readable format](https://media.brightdata.de/2024/03/converting-the-data-to-a-more-readable-format-1.png)Diesmal lautet das Next.js-Skript zum Scraping:

```none
const scriptNodes = document.querySelectorAll("script")

const hydrationScriptNodes = Array.from(scriptNodes).filter((e) => e.innerHTML.includes("self.__next_f.push"))

const scriptNode = hydrationScriptNodes.find((e) => e.innerHTML.includes("initialTree"))

scriptNode.innerHTML
```

Herzlichen Glückwunsch! Das Scraping von Next.js-Websites war noch nie so einfach!

## Einschränkungen dieses Next.js-Scraping-Ansatzes

Dieser auf React-Hydration-Daten basierende Scraping-Ansatz ist zwar schnell und effektiv, unterliegt jedoch einigen Einschränkungen. Diese sind:

- **Teilweise Daten**: Die speziellen `<SCRIPT>` -Knoten, die von Next.js hinzugefügt werden, enthalten nur die Daten, die vom Server abgerufen und während der Hydration an die React-Komponenten übergeben werden. Das sind möglicherweise nicht alle Daten, die auf der Seite enthalten sind. Der Grund dafür ist, dass React-Komponenten fest codierte Werte haben oder andere Daten dynamisch über AJAX abrufen können. In diesem Fall müssen Sie das Web-Scraping mit einem [Browser-Automatisierungstool](/blog/proxy-101/browser-automation-explained) durchführen.
- **Zusätzliche Parsing erforderlich**: `self.__next_f.push` beinhaltet Daten in einem proprietären Format, und es ist nicht immer einfach, diese korrekt zu parsen.
- **Manuelle Vorgänge erforderlich**: Sofern Sie die oben geschriebenen Skripte nicht in Scraping-Skripte in JavaScript, Python oder einer ähnlichen Sprache übersetzen und die Logik für den Datenexport integrieren, müssen Sie die Daten manuell in eine Textdatei exportieren. Weitere Informationen finden Sie in unserem [Leitfaden zum Web-Scraping mit JavaScript und Node.js](/blog/how-tos/web-scraping-with-node-js).

## Fazit

In diesem Artikel haben Sie erfahren, was Next.js ist, warum es eine der weltweit am häufigsten verwendeten Technologien für die Erstellung von Websites ist und wie Sie Daten daraus scrapen können. Insbesondere haben Sie erkannt, dass es auf React Hydration basiert und was dies bedeutet. Aus diesem Grund enthalten die vom Server zurückgegebenen HTML-Seiten bereits alle Daten, die Sie benötigen (und das sogar im JSON-Format!). Dies macht das Web-Scraping von Next.js-Websites sehr einfach.

Das eigentliche Problem ist ein anderes: die Blockierung durch Anti-Bot-Technologien. Diese Systeme können Ihr automatisiertes Scraping-Skript erkennen und blockieren. Glücklicherweise hat Bright Data mehrere effektive Lösungen für Sie:

- [**Web Scraper IDE**](/products/web-scraper/functions): Eine Cloud-IDE zum Erstellen von Web-Scrapern, die Blockierungen automatisch umgehen und vermeiden können.
- **[Web Scraper API](/products/web-scraper)**: Einfacher programmgesteuerter Zugriff auf strukturierte Webdaten mit einer Verfügbarkeit von 99,99 % und unbegrenzter Skalierbarkeit.
- [**Scraping-Browser**](/products/scraping-browser): Ein cloudbasierter, steuerbarer Browser, der JavaScript-Rendering-Funktionen bietet und gleichzeitig CAPTCHAs, Browser-Fingerprinting, automatische Wiederholungsversuche und vieles mehr für Sie übernimmt. Er lässt sich in die gängigsten Automatisierungs-Browser-Bibliotheken wie Playwright und Puppeteer integrieren.
- [**Web Unlocker**](/products/web-unlocker): Eine Entsperr-API, die nahtlos den rohen HTML-Code jeder Seite zurückgeben kann und dabei alle Anti-Scraping-Maßnahmen umgeht.

Sie möchten sich überhaupt nicht mit Web-Scraping beschäftigen, sind aber dennoch an Online-Daten interessiert? [Entdecken Sie die gebrauchsfertigen Datensätze von Bright Data!](/products/datasets)

## FAQ

**Ist es möglich, \_\_NEXT\_DATA\_\_ aus dem DOM in Next.jszu verbergen oder zu entfernen ?**

Nein, das können Sie nicht entfernen oder ausblenden. Wenn Sie sich entscheiden, das `_NEXT_DATA_ <script>` -Element aus dem DOM zu entfernen, kann React nicht mehr hydrieren. Da die Daten in diesem Skript für die ordnungsgemäße Funktion von React erforderlich sind, können Sie sie nicht entfernen, ohne mit Fehlfunktionen oder einer Beeinträchtigung der Funktionalität zu rechnen. Lesen Sie die [GitHub-Diskussion](https://github.com/vercel/next.js/discussions/13418) zu diesem Thema.

**Ist es möglich, self.\_\_next\_f.push -Aufrufe aus dem DOMzu entfernen ?**

Nein, Sie können die `self.__next_f.push-Aufrufe` in den von Next.js hinzugefügten `<script>` -Knoten nicht entfernen. Diese DOM-Elemente werden vom Server hinzugefügt, damit die clientseitige React-Anwendung hydrieren und wie erwartet funktionieren kann. Weitere Informationen finden Sie in der [GitHub-Diskussion](https://github.com/vercel/next.js/discussions/42170) zu diesem Thema.

**Wie kann man feststellen, ob eine Website mit Next.js erstellt wurde?**

Es gibt mehrere Möglichkeiten, um festzustellen, ob eine Website mit Next.js erstellt wurde. Suchen Sie zunächst nach dem X-Powered-By-Header, der von einigen Versionen von Next.js standardmäßig gesetzt wird:

![checking the x-powered-by header](https://media.brightdata.de/2024/03/checking-the-x-powered-by-header-1.png)Andernfalls überprüfen Sie, ob das DOM einen `<script id="__NEXT_DATA__" ... >` -Knoten oder einige `<script>self.__next_f.push(...)</script>` -Knoten enthält.

**Ist Next.js die einzige Technologie, die auf React Hydration basiert?**

Nein, Next.js ist nicht die einzige Technologie, die auf React Hydration basiert. Andere Server-Side-Rendering-Generatoren (SSR) wie Gatsby nutzen ebenfalls React Hydration, um server-gerenderte HTML-Dateien in interaktive React-Anwendungen auf der Client-Seite umzuwandeln. Dieser Prozess ist ein gängiger Ansatz bei SSR mit React und nicht auf Next.js beschränkt.



Vertrieb kontaktierenGratis testen![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg)









 Inhaltsverzeichnis







Dedicated Scraper APIs &amp; No-Code Scrapers

Over 1000 scrapers for all popular domains. Simplify your web scraping.

[See pricing](/pricing/web-scraper "See pricing")

Just want data? Skip scraping.

Hundreds of ready-to-use datasets from all popular domains.

[See pricing](/pricing/datasets "See pricing")







 [ ](https://news.ycombinator.com/submitlink?t=Wie+man+eine+Next.js-Website+in+Sekundenschnelle+durch+Hydration-Daten+scrapen+kann&u=https://brightdata.de/blog/wie/web-scraping-with-next-js) [ ](https://www.linkedin.com/shareArticle?mini=true&title=Wie+man+eine+Next.js-Website+in+Sekundenschnelle+durch+Hydration-Daten+scrapen+kann&url=https://brightdata.de/blog/wie/web-scraping-with-next-js) [ ](http://www.reddit.com/submit?title=Wie+man+eine+Next.js-Website+in+Sekundenschnelle+durch+Hydration-Daten+scrapen+kann&url=https://brightdata.de/blog/wie/web-scraping-with-next-js)







##  Das könnte Sie auch interessieren

 [ ![OpenHuman with Bright Data](https://media.brightdata.de/2026/09/OpenHuman-with-Bright-Data.png) ](https://brightdata.de/blog/ai/openhuman-with-bright-data "Produktionsreifer Web-Zugriff in OpenHuman über die Bright Data CLI")

 [AI



 ![Antonello Zanini](https://media.brightdata.de/2022/12/Antonello-Zanini-2-50x50.jpg)

Antonello Zanini

Technical Writer





### Produktionsreifer Web-Zugriff in OpenHuman über die Bright Data CLI

Integrieren Sie die Bright Data CLI mit OpenHuman, um produktionsreifen Web-Zugriff und Datenerhebung für KI-Agenten zu ermöglichen.



 09-Sep-2026

 12 min lesen

 ](https://brightdata.de/blog/ai/openhuman-with-bright-data)

 [ ![Multimodal Web Scraping with MiniMax](https://media.brightdata.de/2026/09/Multimodal-Web-Scraping-with-MiniMax.png) ](https://brightdata.de/blog/web-data-de/multimodal-web-scraping-with-minimax "Multimodales Web-Scraping mit MiniMax")

 [Web Data



 ![Antonello Zanini](https://media.brightdata.de/2022/12/Antonello-Zanini-2-50x50.jpg)

Antonello Zanini

Technical Writer





### Multimodales Web-Scraping mit MiniMax

Kombinieren Sie Bright Data Web Unlocker mit MiniMax M3 Vision, um strukturierte Daten aus Bildern und Webseiten-Screenshots zu extrahieren.



 09-Sep-2026

 4 min lesen

 ](https://brightdata.de/blog/web-data-de/multimodal-web-scraping-with-minimax)

 [ ![The 10 Best CLI Tools for Codex in 2026](https://media.brightdata.de/2026/08/The-10-Best-CLI-Tools-for-Codex-in-2026.png) ](https://brightdata.de/blog/ai/best-cli-tools-for-codex "Die 10 besten CLI-Tools für Codex im Jahr 2026 – Getestet & Bewertet")

 [AI



 ![Daniel Shashko](https://media.brightdata.de/2022/04/Daniel-Shashko-2-50x50.png)

Daniel Shashko

Web Data &amp; AI Expert





### Die 10 besten CLI-Tools für Codex im Jahr 2026 – Getestet &amp; Bewertet

Die 10 CLI-Tools, die Codex schneller und leistungsfähiger machen, beginnend mit dem Bright Data CLI für echten Web-Zugriff aus der Sandbox heraus.



 06-Sep-2026

 20 min lesen

 ](https://brightdata.de/blog/ai/best-cli-tools-for-codex)