菜单
HTTP streaming patterns including React Suspense streaming SSR, ReadableStream API, Server-Sent Events, chunked transfer encoding, and AI response streaming with Vercel AI SDK
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/InugamiDev/ultrathink-oss --skill streaming命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Unified design foundations — design system architecture, tokens, component specs, visual principles, creative vision, figma integration, plus brand design system loader (66 real brands via DESIGN.md). Absorbs design, design-system, design-systems, design-principles, design-router, creative-vision, figma, design-md.
Render, summarize, and present markdown documents and structured content in multiple output modes
Ultra UI skill - combines Google's DESIGN.md spec (machine-readable design tokens) with the ui-ux-pro-max knowledge base (91 styles, 161 palettes, 73 font pairings, 161 products, 104 UX guidelines, 25 chart types). Generates lint-clean DESIGN.md files, validates token references and WCAG contrast, exports Tailwind/DTCG tokens, and diffs design systems version-over-version.
基于 SOC 职业分类
| name | streaming |
| description | HTTP streaming patterns including React Suspense streaming SSR, ReadableStream API, Server-Sent Events, chunked transfer encoding, and AI response streaming with Vercel AI SDK |
| layer | utility |
| category | backend |
| triggers | ["streaming","stream response","ReadableStream","chunked transfer","streaming SSR","AI streaming","Vercel AI SDK","stream text","server-sent events"] |
| inputs | ["Streaming use case (AI chat, SSR, data feed, file download)","Runtime environment (Node.js, Edge, Cloudflare Workers)","Client framework (React, vanilla JS)"] |
| outputs | ["Streaming endpoint implementation","Client-side stream consumer code","Error handling and backpressure patterns"] |
| linksTo | ["nextjs","nodejs","websockets","react"] |
| linkedFrom | ["api-designer","performance-profiler"] |
| preferredNextSkills | ["nextjs","caching"] |
| fallbackSkills | ["websockets","nodejs"] |
| riskLevel | low |
| memoryReadPolicy | selective |
| memoryWritePolicy | none |
| sideEffects | [] |
Stream data to clients as it becomes available instead of buffering the full response. Essential for AI chat interfaces, large data exports, real-time SSR, and progressive loading patterns.
| Pattern | Use Case | Latency | Complexity |
|---|---|---|---|
| ReadableStream | Custom binary/text streaming | Low | Medium |
| Streaming SSR | React Suspense + App Router | Low TTFB | Low (built-in) |
| AI SDK streaming | LLM chat responses | Token-level | Low |
| Chunked transfer | Large file/data export | Progressive | Low |
| SSE | Server push notifications | Real-time | Low |
// Works in Next.js Edge, Cloudflare Workers, Deno, Bun
export async function GET() {
const encoder = new TextEncoder();
const stream = new ReadableStream({
async start(controller) {
const items = await db.query('SELECT * FROM large_table');
for (const item of items) {
controller.enqueue(encoder.encode(JSON.stringify(item) + ));
( (r, ));
}
controller.();
},
() {
.();
},
});
(stream, {
: {
: ,
: ,
},
});
}
// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
export async function POST(req: Request) {
const { messages } = await req.json();
const result = streamText({
model: openai('gpt-4o'),
system: 'You are a helpful assistant.',
messages,
onFinish({ text, usage }) {
// Persist completed response
saveMessage({ role: 'assistant', content: text, tokens: usage.totalTokens });
},
});
return result.toDataStreamResponse();
}
// Client: app/chat/page.tsx
'use client';
import { useChat } from '@ai-sdk/react';
export default function ChatPage() {
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
api: '/api/chat',
});
return (
<div>
{messages.map((m) => (
<div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
{m.content}
</div>
))}
<form onSubmit={handleSubmit}>
<input value={input} onChange={handleInputChange} disabled={isLoading} />
</form>
</div>
);
}
// Outer shell streams immediately, Suspense boundaries resolve progressively
import { Suspense } from 'react';
export default function Page() {
return (
<main>
<h1>Dashboard</h1> {/* Streams instantly */}
<Suspense fallback={<TableSkeleton />}>
<AsyncDataTable /> {/* Streams when data resolves */}
</Suspense>
<Suspense fallback={<ChartSkeleton />}>
<AsyncChart /> {/* Independent — can resolve in any order */}
</Suspense>
</main>
);
}
// This component fetches on the server — no useEffect needed
async function AsyncDataTable() {
const data = await fetch('https://api.example.com/data', {
next: { revalidate: 60 },
});
const rows = await data.json();
return <DataTable rows={rows} />;
}
// Generic NDJSON stream consumer
async function consumeStream<T>(
url: string,
onChunk: (item: T) => void,
signal?: AbortSignal
): Promise<void> {
const res = await fetch(url, { signal });
if (!res.ok || !res.body) throw new Error(`Stream failed: ${res.status}`);
const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
let buffer = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += value;
const lines = buffer.split('\n');
buffer = lines.pop() ?? ''; // Keep incomplete line in buffer
for (const line of lines) {
if (line.trim()) onChunk(JSON.parse(line));
}
}
}
// Usage with abort support
const controller = new AbortController();
consumeStream('/api/export', (row) => appendToTable(row), controller.signal);
// controller.abort() to cancel
cancel() callback in ReadableStreamTransfer-Encoding: chunked explicitly when not using a framework that sets itX-Accel-Buffering: no for NginxAbortController on the client to cancel streams when components unmountstreamText over generateText for any user-facing AI response| Pitfall | Impact | Fix |
|---|---|---|
| Not handling client disconnect | Resource leaks, wasted compute | Check signal.aborted or use cancel() callback |
| Buffering by reverse proxy | Stream appears to hang, then flushes all at once | Disable Nginx/CloudFront buffering headers |
| No error boundary around Suspense | Streaming SSR crash takes down entire page | Wrap Suspense in <ErrorBoundary> |
Missing TextDecoderStream | Binary chunks split mid-character | Always decode before parsing |
| Forgetting backpressure | Memory grows unbounded on slow clients | Use TransformStream or manual flow control |