메뉴
SSE streaming optimization — batching char-by-char events and debouncing React re-renders for Crok AI chat performance
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | wsh-sse-optimization |
| description | SSE streaming optimization — batching char-by-char events and debouncing React re-renders for Crok AI chat performance |
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.
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`);
}
// After: chunk-based (tens of events)
const CHUNK_SIZE = 50; // characters per chunk
for (let i = 0; i < response.length; i += CHUNK_SIZE) {
if (res.closed) break;
const chunk = response.slice(i, i + CHUNK_SIZE);
const data = JSON.stringify({ text: chunk, done: false });
res.write(`event: message\nid: ${messageId++}\ndata: ${data}\n\n`);
}
Impact: Reduces SSE events from ~5000+ to ~100. Each event triggers an EventSource onmessage callback, JSON parse, and React setState. Reducing events by 50x dramatically cuts TBT.
The existing useSSE hook concatenates text via onMessage callback. It already handles multi-character chunks correctly since onMessage does prevContent + data.text. No client changes required if the server sends larger chunks.
| Pitfall | Symptom | Fix |
|---|---|---|
| Chunk size too large | Response feels "jumpy" instead of streaming | Use 30-80 chars, balancing UX and performance |
| Breaking mid-UTF8 | Garbled characters | Use Array.from(response) to iterate by codepoints, then batch |
| SSE format issues | Client receives partial data | Ensure each res.write is a complete SSE event |
| Change | Visual Impact | Mitigation |
|---|---|---|
| Faster response delivery | Chat messages appear faster but same content | None needed — VRT captures final state |
| Text chunking | None — final text is identical | Verify final content matches |
crok-response.md) containing code blocks, math formulas, tablesreact-markdown + rehype-katex + react-syntax-highlighter to render each updatesetContent() call triggers full markdown re-parse and re-renderCrok AI chat rendering optimization — SSE debouncing, ChatMessage memoization, Markdown re-render prevention
DM page and flow optimization — afterSave hook, message rendering, unread count queries for WSH 2026
Home page performance optimization — Post defaultScope, SSR data reduction, lazy media hydration for WSH 2026 CaX app
Lazy loading modal containers and route components to reduce initial bundle size — CrokContainer, NewPostModalContainer
Runs Visual Regression Testing (VRT) locally to prevent disqualification in Web Speed Hackathon. Captures screenshots, compares against baselines, updates snapshots, and validates visual integrity after performance optimizations. Use when optimizing WSH apps, running VRT checks, updating VRT baselines, or investigating VRT failures.
Optimizes deliberately slow web applications for maximum Lighthouse scores in Web Speed Hackathon (CyberAgent). Use when participating in WSH or performing aggressive frontend performance optimization on React/Node.js apps with SQLite backends. Covers bundle reduction, image optimization, Core Web Vitals, server tuning, and known competition traps.