import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
// Forțăm rularea pe Edge ca să evităm timeout-ul serverless
export const runtime = 'edge';
export async function POST(req: Request) {
const { messages } = await req.json();
const result = await streamText({
model: openai('gpt-4o-mini'),
messages,
});
// Returnează un stream formatat special pe care useChat îl înțelege nativ
return result.toDataStreamResponse();
}Să aștepți 5 sau 10 secunde după un API de OpenAI e moartea UX-ului. Am pățit asta recent la un proiect cu 8k utilizatori activi, unde generam rapoarte de analiză. Oamenii dădeau refresh crezând că s-a blocat aplicația. Soluția a fost evidentă: streaming direct prin Server-Sent Events (SSE). Am scăzut Time to First Token (TTFB) de la 4 secunde la sub 150ms.
În loc să reinventez roata cu ReadableStream-uri scrise de mână, am mers pe Vercel AI SDK. Vă povestesc mai jos cum funcționează și ce bube are în producție.
De ce Vercel AI SDK și nu fetch direct?
Acum un an, dacă voiai streaming în Next.js, trebuia să-ți scrii singur parserul de SSE pe frontend. Cine a făcut asta știe ce durere de cap e când conexiunea se întrerupe la jumătate și rămâi cu JSON-uri malformate.
Pachetul @ai-sdk/react vine cu hook-ul useChat care face tot heavy lifting-ul. Îți oferă la cheie starea messages, funcția input, starea de isLoading și, cel mai important, o funcție handleSubmit care știe să facă apelul POST, să citească stream-ul și să facă update la UI în timp real, caracter cu caracter.
Trade-off-ul de care nu scrie în documentație
Sună prea frumos ca să nu aibă un catch. Și are. Dacă rulezi aplicația pe Vercel pe planul Hobby (sau chiar Pro, dar cu setări default), funcțiile serverless au un timeout strict de 10-15 secunde. Dacă LLM-ul tău are o zi proastă și răspunde greu, conexiunea se taie brusc.
Ca să eviți asta, ești obligat să muți ruta de API pe Edge Runtime. Edge-ul nu are limita asta de timeout și e mult mai rapid, dar vine cu un cost uriaș: nu rulează într-un mediu complet de Node.js. Dacă în acea rută de API vrei să folosești un ORM mai vechi, o librărie de PDF-uri sau anumite pachete de criptografie, te lovești de erori de compilare instant.
Noi am rezolvat asta separând complet logica: ruta de streaming face doar streaming-ul pe Edge, iar salvarea în baza de date o facem asincron, printr-un webhook sau apel separat după ce s-a terminat generarea.
Cum arată codul pe backend
Codul e surprinzător de curat. În Next.js App Router, definim o rută POST simplă care folosește streamText și trimite răspunsul formatat special pentru client.
Concluzia mea
Dacă ai nevoie de un chat simplu sau de un asistent în aplicație, Vercel AI SDK îți salvează lejer 3 zile de muncă brută cu parsarea stream-urilor. Totuși, ai grijă la constrângerile de Edge Runtime dacă ai nevoie de interogări complexe de bază de date în aceeași rută.
Voi ce folosiți pentru streaming? V-ați lovit de limitările de timeout pe serverless?