Die Daten aller Fahrradzählstellen kann man über die Open-Data-Plattform der Stadt Bonn als CSV abrufen. Allerdings sind das wirklich nur die Daten des Vortags und ich benötige auch die Daten der Vorwoche – und manchmal mache ich auch Analysen über größere Zeiträume hinweg. Daten doppelt zu halten (und das als CSV) ist mir zu umständlich. Daher gehe ich den direkten Weg über die API des Herstellers, doch die alte REST-API ist seit zwei Tagen offline und mein Mastodon-Account liefert keine Daten mehr.

Um herauszufinden, wie ich jetzt noch an die Daten herankomme, öffne ich die Zählstellen-Website des Herstellers für die Stadt Bonn in meinem Browser. Wenn man sich den Datenverkehr der Website in seinem Browser genauer anschaut, fällt einem schnell auf, dass es sich um eine Next.js-Applikation handeln muss. Man kann dies an TURBOPACK in den Daten der übertragenen JavaScript-Dateien erkennen oder aber auch an dem Präfix der CSS-Variablen next-.

Diese Website stellt jedoch keine JSON-API mehr bereit; stattdessen sind die Tageszahlen in den React Server Components (RSC) der Seite eingebettet. Ich zeige euch hier ein Beispiel, wie man diesen Stream abfragt und daraus die aggregierten Tageswerte, die ich für meine Toots benötige, extrahiert. Ich habe den Code extra etwas vereinfacht. Bitte achtet auf die Validierung der Input-Daten.

Die Abfrage der Daten geschieht in drei Schritten:

1. den RSC-Stream abrufen
2. den gewünschten JSON-Wert aus dem Stream extrahieren
3. das extrahierte JSON in eine Liste der täglichen Zahlen umwandeln

Das komplette Skript findet ihr ganz unten. Ich gehe hier nur die wichtigsten Teile durch.

RSC-Stream abrufen

Ich selbst habe noch nie eine Website mit Next.js gebaut. Das ist also auch neu für mich. Schreibt mir gern in die Kommentare, wenn etwas nicht ganz korrekt erklärt ist. Fakt ist, die Next.js-Anwendung verwendet RSCs. Eine URL wie /site/100021143?… kann je nach Art der Anfrage zwei völlig unterschiedliche Ergebnisse liefern:

• Initiale Browseranfrage: Der Server gibt eine vollständige HTML-Seite zurück. React läuft im Browser und die eigentlichen Zähldaten werden nach dem Laden via JavaScript abgerufen und im DOM gerendert.
• Anfrage mit gesetztem HTTP-Header RSC: 1: Next.js gibt stattdessen den RSC-Payload zurück: einen Stream, der den DOM und die Daten beschreibt. Das ist, was der Browser selbst anfordert, wenn du innerhalb der App navigierst – React ruft die neue Seite als RSC-Daten ab, anstatt das vollständige HTML erneut zu laden.

def fetch_rsc_payload(counter_id: int, year: int, month: int) -> str:
    """Return the raw RSC stream text for one site and month."""
    url = f"{SITE_BASE}/site/{counter_id}"
    params = {"year": year, "month": month, "granularity": "P1D"}
    headers = {
        "RSC": "1",
        "Accept": "text/x-component",
        "User-Agent": "Mozilla/5.0",
        "Referer": f"{SITE_BASE}/site/{counter_id}",
    }
    resp = requests.get(url, params=params, headers=headers, timeout=30)
    resp.raise_for_status()
    return resp.text

Was wir von dieser Funktion erhalten, ist etwa folgender Payload (hier deutlich gekürzt):

1:"$Sreact.fragment"
3:I[97367,["/_next/static/chunks/0s2yzmf9j.2c6.js", ...]]
4:"$Sreact.suspense"
...

Wie du schnell erkennst, ist das nicht einfach JSON. Es ist Next.js‘ zeilenbasiertes RSC Wire Format (hier ein Blogartikel von Sachin zum Deep Dive). Jede Zeile ist durchnummeriert. Aber – und das ist das Wichtige – die eigentlichen Daten, die uns interessieren, sind als gewöhnliches JSON-Array gespeichert und befinden sich direkt in einer dieser Zeilen:

22:["$","$L25",null,{"granularity":"P1D","site":"$2:2:props:...","chartData":[{"travelMode":"bike","data":[{"timestamp":"2026-07-01T00:00:00+02:00","traffic":{"counts":19014}}, ... ]}], "directionGraphData":[...], ...}]

JSON aus dem Stream extrahieren

In den erhaltenen Daten suchen wir jetzt nach chartData oder graphData (ich hab je nach Monat der Daten diese in dem einen oder in dem anderen Key gefunden, eventuell hat der Betreiber einmal sein Schema geändert?). Wir suchen also nach diesen beiden Schlüsseln und merken uns die Zeile.

SITE_BASE = "https://stadtbonn.eco-counter.com"

def _extract_keyed_value(body: str, key: str) -> object:
    """Find `"key":` in the stream and json.loads the line."""
    needle = f'"{key}":'
    for line in body.split("\n"):
        if needle in line:
            try:
                return json.loads(_extract_json(line))[3][key]
            except (IndexError, KeyError):
                continue

    raise RSCParseError(f'Key "{key}" not found')

Mit dieser Zeile rufen wir dann eine weitere Funktion auf, welche das JSON aus der Zeile herauslöst (es ist ja durch die Zeilennummer gepräfixt, wir trennen daher am ersten Doppelpunkt).

def _extract_json(line: str) -> str:
    """Return the json from a line of the RSCP."""
    try:
        json_data = line.split(":", 1)[1]
        return json_data
    except IndexError:
        raise RSCParseError("Unexpected format of RSC payload.")

Aus dem erhaltenen JSON lassen wir uns jetzt in _extract_keyed_value das vierte Element der Liste ausgeben und aus diesem Objekt dann den Value für unseren gesuchten Key. Warum? Naja, das habe ich halt einfach so aus den erhaltenen Daten abgelesen. Und ob es morgen noch funktioniert, sehen wir dann morgen.

Das ist ein sehr fragiler Teil des Codes und überhaupt ist das Parsen von Daten Dritter eine sehr gefährliche Angelegenheit. Dieser Beispielcode ist auch nicht mein Produktivcode! Mit Libraries wie Pydantic könnt ihr euren Code auf wesentlich sichere Beine stellen. Hier aber möchte ich euch den grundsätzlichen Ansatz zeigen.

Liste der täglichen Zahlen

Jetzt bauen wir uns eine Dataclass, welche die täglichen Daten halten soll.

@dataclass(frozen=True)
class DayCount:
    """One day's total count. `count` is None when no data exists for that day."""

    date: dt.date
    count: int | None

Jetzt bauen wir uns eine Funktion, um aus der Liste von Tageswerten eine Liste von DayCount-Objekten zu erhalten.

DATA_KEYS = ("chartData", "graphData")

def parse_daily_counts(body: str) -> list[DayCount]:
    """Extract the aggregate daily counts from an RSC payload."""
    series = None
    for key in DATA_KEYS:
        try:
            series = _extract_keyed_value(body, key)
            break
        except RSCParseError:
            continue
    if series is None:
        raise RSCParseError(
            f"none of {DATA_KEYS} found; the page structure may have changed "
            "or the RSC header is no longer honored"
        )

    # series looks like: [{"travelMode": "bike", "data": [ {timestamp, traffic}, ... ]}]
    rows = series[0].get("data")

    counts = [
        DayCount(
            date=dt.date.fromisoformat(row["timestamp"][:10]),
            count=row["traffic"].get("counts"),
        )
        for row in rows
    ]
    return sorted(counts, key=lambda d: d.date)

Auch dieser Beispielcode ist nicht reif für Produktiv!

In dem kompletten Beispielcode, der jetzt folgt, könnt ihr dann auch sehen – und gerne auch ausprobieren – wie alles zusammengestöpselt wird. Dazu erstellt ihr euch am besten ein virtuelles Environment und installiert euch requests mittels pip install requests.

import datetime as dt
import json
from dataclasses import dataclass

import requests

SITE_BASE = "https://stadtbonn.eco-counter.com"
DATA_KEYS = ("chartData", "graphData")


@dataclass(frozen=True)
class DayCount:
    """One day's total count. `count` is None when no data exists for that day."""

    date: dt.date
    count: int | None


class RSCParseError(ValueError):
    """Raised when the expected count data can't be located or parsed."""


# --------------------------------------------------------------------------- #
# Step 1: fetch the RSC stream
# --------------------------------------------------------------------------- #
def fetch_rsc_payload(counter_id: int, year: int, month: int) -> str:
    """Return the raw RSC stream text for one site and month."""
    url = f"{SITE_BASE}/site/{counter_id}"
    params = {"year": year, "month": month, "granularity": "P1D"}
    headers = {
        "RSC": "1",  # <- the key that makes Next.js return the data stream
        "Accept": "text/x-component",
        "User-Agent": "Mozilla/5.0",
        "Referer": f"{SITE_BASE}/site/{counter_id}",
    }
    resp = requests.get(url, params=params, headers=headers, timeout=30)
    resp.raise_for_status()
    return resp.text


# --------------------------------------------------------------------------- #
# Step 2: extract exactly the JSON value we want from the stream
# --------------------------------------------------------------------------- #
def _extract_json(line: str) -> str:
    """Return the json from a line of the RSCP."""
    try:
        json_data = line.split(":", 1)[1]
        return json_data
    except IndexError:
        raise RSCParseError("Unexpected format of RSC payload.")


def _extract_keyed_value(body: str, key: str) -> object:
    """Find `"key":` in the stream and json.loads the line."""
    needle = f'"{key}":'
    for line in body.split("\n"):
        if needle in line:
            try:
                return json.loads(_extract_json(line))[3][key]
            except (IndexError, KeyError):
                continue

    raise RSCParseError(f'Key "{key}" not found')


# --------------------------------------------------------------------------- #
# Step 3: turn the extracted JSON into a clean list of daily counts
# --------------------------------------------------------------------------- #
def parse_daily_counts(body: str) -> list[DayCount]:
    """Extract the aggregate daily counts from an RSC payload."""
    series = None
    for key in DATA_KEYS:
        try:
            series = _extract_keyed_value(body, key)
            break
        except RSCParseError:
            continue
    if series is None:
        raise RSCParseError(
            f"none of {DATA_KEYS} found; the page structure may have changed "
            "or the RSC header is no longer honored"
        )

    # series looks like: [{"travelMode": "bike", "data": [ {timestamp, traffic}, ... ]}]
    rows = series[0].get("data")

    counts = [
        DayCount(
            date=dt.date.fromisoformat(row["timestamp"][:10]),
            count=row["traffic"].get("counts"),
        )
        for row in rows
    ]
    return sorted(counts, key=lambda d: d.date)


# --------------------------------------------------------------------------- #
# Convenience: put the three steps together
# --------------------------------------------------------------------------- #
def get_daily_counts(counter_id: int, year: int, month: int) -> list[DayCount]:
    """Fetch and parse the daily counts for one site and month."""
    return parse_daily_counts(fetch_rsc_payload(counter_id, year, month))


if __name__ == "__main__":
    # Example: the Kennedybrücke counter in Bonn
    # It's an honour to be a Bonner! :)
    KENNEDYBRUECKE = 100021143
    today = dt.date.today()

    counts = get_daily_counts(KENNEDYBRUECKE, today.year, today.month)

    print(f"Daily counts for site {KENNEDYBRUECKE}, {today:%B %Y}:")
    for day in counts:
        value = "—" if day.count is None else f"{day.count:,}"
        print(f"  {day.date:%Y-%m-%d}: {value}")

    # Pick out a single day (e.g. yesterday).
    yesterday = today - dt.timedelta(days=1)
    match = next((d for d in counts if d.date == yesterday), None)
    if match and match.count is not None:
        print(f"\nYesterday ({yesterday}): {match.count:,}")
    else:
        print(f"\nNo data for yesterday ({yesterday}) yet.")