Streaming Claude to the Browser With Real Backpressure

การสตรีมโทเค็น (tokens) ของ LLM นั้นทำส่วนใหญ่ให้ถูกต้องได้ง่ายถึง 80% แต่ 20% สุดท้ายคือจุดที่นักพัฒนาส่วนใหญ่พลาด การตั้งค่าแบบพื้นฐานอาจใช้งานได้ดีบนเครื่องของคุณเอง แต่จะพังเมื่อเจอการเชื่อมต่อที่ช้าหรือโมเดลที่ทำงานเร็วมาก

หากคุณต้องการการสตรีมระดับโปรดักชัน (production-grade) คุณต้องจัดการกับปัญหาเฉพาะสองประการนี้

  1. ปัญหา Nginx Buffer นักพัฒนาหลายคนลืมตั้งค่า header X-Accel-Buffering หากไม่ตั้งค่านี้เป็น no Nginx จะทำการบัฟเฟอร์ (buffer) สตรีมของคุณไว้ ทำให้ผู้ใช้ไม่เห็นอะไรเลยจนกว่าการตอบกลับทั้งหมดจะเสร็จสิ้น ซึ่งเป็นการทำลายจุดประสงค์ของการสตรีม

  2. ปัญหา Abandoned Stream นี่คือความผิดพลาดที่มีราคาแพงที่สุด หากผู้ใช้ปิดแท็บหรือการเชื่อมต่อหลุดในขณะที่โมเดลกำลังสร้างคำตอบ เซิร์ฟเวอร์จะยังคงทำงานต่อไป ลูปของคุณจะยังคงดึงโทเค็นจาก Claude ต่อไปเรื่อยๆ ทำให้คุณต้องจ่ายเงินสำหรับเอาต์พุตที่ไม่มีใครเห็น

The Fix: End-to-End Aborts คุณต้องเชื่อมโยง request signal เข้ากับ Claude stream เมื่อไคลเอนต์ (client) ตัดการเชื่อมต่อ เซิร์ฟเวอร์ต้องหยุดการสร้างคำตอบทันที

ใน Next.js route ของคุณ ให้ส่ง request signal ไปยัง Anthropic SDK:

  • ใช้ { signal: request.signal } ในการเรียก SDK
  • เพิ่ม event listener สำหรับ abort signal
  • เรียก llm.abort() และ controller.close() เมื่อเกิดการ abort

วิธีนี้จะหยุดการสร้างคำตอบและหยุดไม่ให้ค่าใช้จ่ายของคุณเพิ่มขึ้น

On the Frontend เบราว์เซอร์จะได้รับข้อมูลเป็น chunk ตามขอบเขตที่สุ่มมา คุณต้องบัฟเฟอร์ chunk เหล่านี้และแยกพวกมันด้วย SSE delimiter

  • ใช้ AbortController ในการเรียก fetch
  • ส่งคืน controller นั้นไปยัง React component ของคุณ
  • เรียก controller.abort() ในฟังก์ชัน cleanup ของ component

สิ่งนี้จะช่วยให้มั่นใจว่า abort signal จะถูกส่งจาก UI กลับไปยังเซิร์ฟเวอร์ของคุณได้โดยตรง

เคล็ดลับสุดท้ายเพื่อประสิทธิภาพ: โมเดลที่ทำงานเร็วจะส่งโทเค็นออกมาเร็วกว่าที่ DOM จะสามารถ repaint ได้ การอัปเดต React state สำหรับทุกๆ โทเค็นจะทำให้ UI ของคุณหน่วง (lag) ควรบัฟเฟอร์โทเค็นและอัปเดตเป็นชุดๆ (batches) เพื่อให้หน้าจอของคุณทำงานได้อย่างลื่นไหล

เลิกสร้างสตรีมที่ใช้ได้แค่ตอนเดโม (demo-only) ได้แล้ว ให้ปิดการทำ proxy buffering และส่งต่อ (propagate) การ abort เพื่อประหยัดค่าใช้จ่ายและสร้างแอปพลิเคชันที่เสถียร

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

Optional learning community: https://t.me/GyaanSetuAi