在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

facebook/react

菜单

React Fizz

相关源文件

React Fizz 是 React 的流式服务器端渲染 (SSR) 引擎。它能够在整个页面准备好之前，逐步将 HTML 内容从服务器发送到客户端，从而提高感知性能和用户体验。该系统对于内容丰富的页面或有数据获取需求的应用尤其有用。

有关 React Server Components 的信息，请参阅 React Server Components。

概述

React Fizz 在服务器上渲染 React 组件，并将生成的 HTML 逐步传输到客户端。这使得浏览器能够在接收到完整响应之前开始处理和显示内容，显著改善了首字节时间 (TTFB) 和首次内容绘制 (FCP) 指标。

React Fizz 的主要功能包括

  • 渐进式 HTML 流式传输
  • 服务器端原生 Suspense 边界处理
  • 增量式水合支持
  • 错误处理和恢复
  • 资源管理（样式表、脚本等）

来源：packages/react-server/src/ReactFizzServer.js1-175 packages/react-dom/src/server/ReactDOMFizzServerNode.js1-45

架构

高层系统设计

来源：packages/react-server/src/ReactFizzServer.js459-535 packages/react-dom/src/server/ReactDOMFizzServerNode.js1-45 packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js1-95

核心组件

来源：packages/react-server/src/ReactFizzServer.js337-462 packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js111-608

请求生命周期

React Fizz 在处理服务器渲染请求时遵循特定的流程：

  1. 请求创建 - 创建包含待渲染组件树的请求
  2. 工作处理 - 系统处理组件树，渲染为 HTML
  3. 流式传输 - HTML 片段在可用时即流式传输到客户端
  4. 完成/错误处理 - 系统完成渲染或处理错误

创建请求

请求创建过程设置了流式服务器渲染所需的所有状态和配置。

来源：packages/react-server/src/ReactFizzServer.js459-535 packages/react-dom/src/server/ReactDOMFizzServerNode.js47-56

处理工作

请求创建后，React Fizz 以任务的形式处理工作。

来源：packages/react-server/src/ReactFizzServer.js711-725 packages/react-server/src/ReactFizzServer.js1125-1340

Suspense 处理

React Fizz 对 Suspense 的处理是其最重要的功能之一，允许组件在数据获取或计算时暂停渲染。

Suspense 边界状态

状态管理描述
待处理 (PENDING)初始状态，边界仍在渲染中
已完成 (COMPLETED)内容已完全渲染
已刷新 (FLUSHED)内容已刷新到客户端
已中止 (ABORTED)因错误导致渲染中止
发生错误 (ERRORED)渲染过程中发生错误
已推迟 (POSTPONED)渲染被推迟

来源：packages/react-server/src/ReactFizzServer.js304-310

Suspense 边界流

来源：packages/react-server/src/ReactFizzServer.js1123-1370 packages/react-server/src/ReactFizzServer.js725-780

流式传输 HTML

React Fizz 在 HTML 可用时将其流式传输到客户端。这通过段和块进行处理。

分块管理

来源：packages/react-server/src/ReactFizzServer.js53-67 packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js1-95

错误处理

React Fizz 在服务器渲染期间提供了强大的错误处理功能。

错误处理流程

来源：packages/react-server/src/ReactFizzServer.js1023-1097 packages/react-server/src/ReactFizzServer.js1072-1097

渐进式分块

React Fizz 实现了渐进式分块策略以优化流式传输性能。

该值代表了以下方面的平衡：

  • 网络效率
  • 浏览器处理开销
  • 用户体验考量

来源：packages/react-server/src/ReactFizzServer.js384-399

与客户端水合的集成

一旦 React Fizz 将 HTML 流式传输到客户端，客户端 React 需要“水合”此 HTML 以使其具有交互性。

来源：packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js171-199 packages/react-dom/src/__tests__/ReactDOMServerRendering-test.js42-149

API

服务器 API

来源：packages/react-dom/src/server/ReactDOMFizzServerNode.js58-176 packages/react-dom/src/server/ReactDOMFizzServerBrowser.js43-100

客户端 API

React Fizz 结合标准 React 客户端 API 进行水合。

来源：packages/react-dom/src/__tests__/ReactServerRendering-test.js31-83 packages/react-dom/src/client/ReactDOMRoot.js179-208

常见用例

React Fizz 在以下场景中特别有用：

  1. 内容丰富的页面：允许浏览器更快地开始解析和渲染内容
  2. 数据依赖组件：与 Suspense 配合使用，在获取数据时流式传输可用内容
  3. 渐进式增强：可以快速流式传输功能核心体验，然后进行增强
  4. 对 SEO 至关重要的应用：提供具有最佳加载性能的服务器渲染

来源：packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js404-471 packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js201-256

与其他 React 系统的集成

来源：packages/react-dom/src/server/ReactDOMFizzServerNode.js1-45 packages/react-dom/src/server/ReactDOMFizzServerBrowser.js1-42 packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js1-95

测试和调试

调试 React Fizz 时，重点关注：

  1. Suspense 边界：检查组件是否正确暂停
  2. 水合不匹配：查找服务器和客户端渲染之间的差异
  3. 错误边界：测试错误处理和恢复路径

React 代码库包含了针对 Fizz 功能的广泛测试。

来源：packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js404-810 packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js41-166

结论

React Fizz 提供了一个强大的流式服务器渲染解决方案，通过逐步交付 HTML 内容显著改善用户体验。通过在服务器端支持 Suspense，它可以在保持性能的同时实现复杂的渲染模式。与 React 客户端水合系统的紧密集成确保了从服务器渲染到交互式客户端应用程序的无缝体验。