Streaming token a token: implementando SSE do backend ao componente

Uma resposta que leva 8 segundos parece rápida se o primeiro token aparece em 300 ms. A mesma resposta entregue de uma vez parece travada.

O endpoint

export const POST = async ({ request }: { request: Request }) => {
  const stream = new ReadableStream({
    async start(controller) {
      for await (const chunk of generate(await request.json())) {
        controller.enqueue(new TextEncoder().encode(`data: ${chunk}\n\n`));
      }
      controller.close();
    },
  });

  return new Response(stream, {
    headers: { "Content-Type": "text/event-stream" },
  });
};

Consumo no cliente

Prefira fetch com ReadableStream a EventSource quando precisar enviar cabeçalhos e cancelar via AbortController.

Erros no meio do fluxo

• Envie um evento tipado de erro em vez de fechar a conexão em silêncio.
• Preserve o texto já recebido na tela.
• Ofereça retry que continue de onde parou quando possível.