Streaming di Claude nel browser con una gestione reale della backpressure

Lo streaming dei token degli LLM è facile da implementare all'80%. Il restante 20% è dove la maggior parte degli sviluppatori fallisce. Le configurazioni ingenue funzionano sulla tua macchina locale, ma si rompono con connessioni lente o con modelli veloci.

Se desideri uno streaming di livello produzione, devi gestire due problemi specifici.

  1. Il problema del buffer di Nginx Molti sviluppatori dimenticano l'header X-Accel-Buffering. Senza impostarlo su no, Nginx bufferizza il tuo stream. L'utente non vedrà nulla finché l'intera risposta non sarà completata. Questo vanifica lo scopo dello streaming.

  2. Il problema dello stream abbandonato Questo è l'errore più costoso. Se un utente chiude una scheda o perde la connessione mentre il modello sta generando, il server continua a girare. Il tuo loop continua a prelevare token da Claude. Paghi per un output che nessuno vede.

La soluzione: Abort end-to-end Devi collegare il segnale della richiesta allo stream di Claude. Quando il client si disconnette, il server deve interrompere immediatamente la generazione.

Nella tua rotta Next.js, passa il segnale della richiesta all'SDK di Anthropic:

  • Usa { signal: request.signal } nella chiamata all'SDK.
  • Aggiungi un event listener per il segnale di abort.
  • Chiama llm.abort() e controller.close() quando si verifica un abort.

Questo interrompe la generazione ed evita che il costo continui a salire.

Sul Frontend Il browser riceve i chunk in punti casuali. Devi bufferizzare questi chunk e dividerli tramite il delimitatore SSE.

  • Usa un AbortController nella tua chiamata fetch.
  • Restituisci quel controller al tuo componente React.
  • Chiama controller.abort() nella funzione di cleanup del componente.

Ciò garantisce che il segnale di abort viaggi dall'interfaccia utente fino al tuo server.

Un ultimo consiglio per le prestazioni: I modelli veloci emettono token più velocemente di quanto il DOM riesca a eseguire il repaint. Aggiornare lo stato di React per ogni singolo token causerà lag nella UI. Bufferizza i token e aggiorna in batch. Questo manterrà l'interfaccia fluida.

Smetti di costruire stream validi solo per le demo. Disabilita il buffering del proxy e propaga gli abort per risparmiare denaro e costruire app robuste.

Fonte: https://dev.to/pavelespitia/streaming-claude-to-the-browser-with-backpressure-that-actually-works-4oaf

Community di apprendimento opzionale: https://t.me/GyaanSetuAi