Streaming Claude to the Browser With Real Backpressure
Das Streamen von LLM-Token ist zu 80 % einfach umzusetzen. Die letzten 20 % sind der Punkt, an dem die meisten Entwickler scheitern. Naive Setups funktionieren auf dem lokalen Rechner, brechen aber bei langsamen Verbindungen oder bei schnellen Modellen ab.
Wenn Sie Streaming auf Produktionsniveau wollen, müssen Sie zwei spezifische Probleme lösen.
Das Nginx-Buffer-Problem Viele Entwickler vergessen den
X-Accel-Buffering-Header. Ohne diesen aufnozu setzen, puffert Nginx Ihren Stream. Ihr Nutzer sieht nichts, bis die gesamte Antwort abgeschlossen ist. Das macht den Zweck des Streamings zunichte.Das Problem abgebrochener Streams Dies ist der teuerste Fehler. Wenn ein Nutzer einen Tab schließt oder die Verbindung verliert, während das Modell generiert, läuft der Server weiter. Ihre Schleife zieht weiterhin Token von Claude ab. Sie bezahlen für Ausgaben, die niemand sieht.
Die Lösung: End-to-End Aborts Sie müssen das Request-Signal mit dem Claude-Stream verknüpfen. Wenn der Client die Verbindung trennt, muss der Server die Generierung sofort stoppen.
In Ihrer Next.js-Route übergeben Sie das Request-Signal an das Anthropic SDK:
- Verwenden Sie
{ signal: request.signal }in Ihrem SDK-Aufruf. - Fügen Sie einen Event-Listener für das Abort-Signal hinzu.
- Rufen Sie
llm.abort()undcontroller.close()auf, wenn ein Abort erfolgt.
Dies stoppt die Generierung und verhindert, dass Ihre Kosten weiter steigen.
Im Frontend Der Browser empfängt Chunks an zufälligen Grenzen. Sie müssen diese Chunks puffern und anhand des SSE-Delimiters aufteilen.
- Verwenden Sie einen
AbortControllerin Ihremfetch-Aufruf. - Geben Sie diesen Controller an Ihre React-Komponente zurück.
- Rufen Sie
controller.abort()in der Cleanup-Funktion der Komponente auf.
Dies stellt sicher, dass das Abort-Signal von der UI bis zurück zu Ihrem Server durchgereicht wird.
Ein letzter Tipp für die Performance: Schnelle Modelle geben Token schneller aus, als das DOM neu zeichnen (repaint) kann. Das Aktualisieren des React-States für jeden einzelnen Token wird Ihre UI verlangsamen. Puffern Sie die Token und aktualisieren Sie diese in Batches. Das hält Ihre Benutzeroberfläche flüssig.
Hören Sie auf, Streams zu bauen, die nur für Demos geeignet sind. Deaktivieren Sie das Proxy-Buffering und leiten Sie Aborts weiter, um Geld zu sparen und robuste Apps zu bauen.
Optional learning community: https://t.me/GyaanSetuAi