WSH: SSE Streaming Optimization

Optimizing Server-Sent Events (SSE) streaming where character-by-character emission causes thousands of events and React re-renders, destroying TBT scores.

Use this skill when the Crok AI chat SSE endpoint streams individual characters, causing excessive client-side re-renders.

Techniques

Server-Side: Batch Characters into Chunks

Instead of emitting one SSE event per character, batch into word/sentence-sized chunks.

// Before: char-by-char (thousands of events)
for (const char of response) {
  res.write(`event: message\nid: ${messageId++}\ndata: ${JSON.stringify({ text: char, done: false })}\n\n`);
}