Une réponse LLM affichée en streaming perçue comme rapide. Bloquée en attente, elle donne une impression de bug. Voici le pattern propre en 2024 avec Vercel AI SDK.
Défaut recommandé : Vercel AI SDK côté serveur et client. Il masque proprement la complexité SSE et gère les retries.
Côté serveur (Next.js Route Handler)
Utilisez streamText du Vercel AI SDK. Il expose un toDataStreamResponse() qui fait tout le travail.
Côté client (React)
Le hook useCompletion ou useChat vous donne le texte au fur et à mesure. Gestion d'état, loading, erreur, retry inclus.
Points à ne pas oublier
- AbortController pour cancel côté user
- Timeout côté serveur (max 30 s Vercel Hobby)
- Retry sur erreur réseau, pas sur erreur logique
- Affichage du curseur qui clignote pendant le streaming (détail UX important)
Un streaming propre en React, c'est 3 h de dev. Sans lui, votre feature IA a l'air cassée.
On cabler votre UI IA ?
En 30 minutes on peut cadrer votre stack streaming. Réservez un créneau. À lire : Intégrer OpenAI dans son SaaS.
