用途
Streaming HTML 是一条前端性能检查规则，用于审查服务端渲染（SSR）实现，判断 HTML 是以分块方式增量流式发送给浏览器，还是被缓冲到完整生成后才发送给客户端。其核心目标是让浏览器尽早收到首屏 HTML，从而能够开始解析、发现子资源并进行渲染，而不必等待最慢的数据查询完成。
主要能力
- 检查服务端渲染实现是否采用流式传输，而非等待完整响应后一次性发送。
- 识别服务端入口与页面组件中的 renderToString 调用。
- 发现数据获取组件周围缺失的 Suspense 边界。
- 发现返回响应前对慢查询使用 await 的写法。
- 提供修复方向：重构 SSR 实现，使用 renderToPipeableStream 配合 Suspense 边界包裹慢数据获取，或在 Node.js 处理器中使用 ReadableStream，使首屏 HTML 立即刷新到客户端。
- 解释流式 HTML 如何通过将快速内容的交付与缓慢的服务端数据依赖解耦，来改善 TTFB 和 FCP。
使用方式
该规则以检查（Check）、修复（Fix）、解释（Explain）和代码审查（Code Review）四种形式提供指导：
- Check：检查服务端渲染实现，判断 HTML 是分块流式发送还是缓冲后发送。
- Fix：重构 SSR 实现，使用 renderToPipeableStream 与 Suspense 边界，或在 Node.js 处理器中使用 ReadableStream。
- Explain：说明流式 HTML 如何改善 TTFB 与 FCP。
- Code Review：审查服务端入口和页面组件中的 renderToString 调用、缺失的 Suspense 边界以及对慢查询的 await。
完整实现细节、代码示例和框架特定指导见 references/rule.md。规则页面为 https://frontendchecklist.io/en/rules/performance/streaming-html。
适用场景
- 审查服务端渲染（SSR）配置。
- 审查 Next.js App Router 页面。
- 审查 Node.js HTTP 处理器。
- 验证 HTML 是否增量流式传输，而非等待完整响应。
关键要点
- 流式传输在 HTML 生成时即分块发送，而不是等待完整响应。
- React 的 renderToPipeableStream 和 Next.js App Router 在使用 Suspense 时默认进行流式传输。
- 将 Suspense 边界放置在缓慢的数据依赖周围，可立即刷新首屏 HTML。
- 在 Lighthouse 中监控 TTFB，超过 600ms 通常表明未使用流式传输。
限制
资料未提供该规则的具体实现代码、各框架的完整配置示例、兼容性范围或性能提升的具体数值，相关内容需参见 references/rule.md 与规则页面。