Meine Fußball-App funktionierte perfekt – bis der Spieltag begann

Der Bau einer Fußball-App schien anfangs einfach zu sein.

Ich hatte geplant, Spiele abzurufen, Teams anzuzeigen, Spielstände zu präsentieren und alle paar Sekunden zu aktualisieren. Während der Tests funktionierte alles. Ich nutzte zwei Tabs und ein paar Beispielspiele. Alles sah gut aus.

Dann kam der erste geschäftige Spieltag.

Hunderte von Nutzern öffneten die App gleichzeitig. Anfragen überschnitten sich. Einige Spielstände schienen sich rückwärts zu bewegen. Die App rief für jeden einzelnen Besucher dieselben Daten separat ab.

Ich habe gelernt, dass eine Live-App nicht nur eine Website ist, die mit einer API verbunden ist. Sie ist ein Datensynchronisationssystem.

Hier sind die Fehler, die ich gemacht habe, und wie ich sie behoben habe:

  • Vermeiden Sie reines Client-seitiges Polling Meine erste Version veranlasste jeden Browser dazu, alle fünf Sekunden Daten abzufragen. 1 Nutzer = 12 Anfragen pro Minute. 1.000 Nutzer = 12.000 Anfragen pro Minute. Die meisten Anfragen fragten exakt dieselben Daten ab.

  • Nutzen Sie Server-seitige Anfragen Ich habe die API-Aufrufe auf den Server verlagert. Das gibt Ihnen die Kontrolle über: • API-Zugangsdaten • Caching • Rate Limiting • Fehlerbehandlung • Antwortformatierung

Verwenden Sie niemals Keys im Client-seitigen Code. Es ist unsicher und teuer, wenn jemand Ihren Key stiehlt.

  • Erstellen Sie eine Mapping-Schicht Ich habe aufgehört, rohe API-Daten direkt an meine Komponenten zu übergeben. Wenn der Anbieter einen Feldnamen änderte, brach mein UI zusammen. Jetzt mappe ich die Anbieterdaten zuerst in mein eigenes internes Format. Das hält mein UI stabil.

  • Nutzen Sie Server Components für mehr Geschwindigkeit Anstatt einen Ladebildschirm anzuzeigen, lade ich die ersten Spiele auf dem Server. Der Nutzer sieht den Inhalt sofort.

  • Implementieren Sie smartes Polling Die App sollte sich nicht aktualisieren, wenn keine Spiele live sind. Ich habe eine Prüfung hinzugefügt, um das Polling zu stoppen, wenn die Spiele beendet sind. Das spart massive Serverressourcen.

  • Beheben Sie Race Conditions Manchmal kehrt Anfrage B zurück, bevor Anfrage A fertig ist. Das lässt Spielstände so aussehen, als würden sie sich rückwärts bewegen. Ich verwende einen AbortController, um alte Anfragen abzubrechen, bevor ich neue starte.

  • Gehen Sie mit Fehlern professionell um Wenn eine Aktualisierung fehlschlägt, zeigen Sie keinen leeren Bildschirm an. Halten Sie die letzten erfolgreichen Daten sichtbar. Ein fünfzehn Sekunden alter Spielstand ist besser als gar kein Spielstand.

Eine Demo muss nur Daten anzeigen. Ein echtes Produkt muss Caching, Sicherheit und State verwalten.

Haben Sie schon einmal eine Live-App gebaut? Was ist kaputtgegangen, als die echten Nutzer kamen?

Quelle: https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59