金融科技【免费下载链接】dinero.jsCreate, calculate, and format money in JavaScript and TypeScript项目地址https://gitcode.com/gh_mirrors/di/dinero.js点击查看免费下载在 React Server ComponentsRSC中服务端组件树是按顺序逐层执行的一个组件内部的await会阻塞其子树的渲染。如果页面、侧边栏、头部各自顺序等待各自的请求完成就会形成典型的服务端瀑布流server-side waterfall——总耗时等于所有请求耗时的累加而不是最长请求的耗时。本文基于当前仓库中 Vercel React 最佳实践技能包.agents/skills/vercel-react-best-practices的规则文件 server-parallel-fetching.md系统讲解如何通过**组件组合Component Composition**重构组件树让相互独立的请求同时发出。读完本文你将掌握三种可落地的并行取数写法组合拆分、childrenprop 透传、Promise 提前发起并理解它们与Promise.all、Suspense 边界等相邻规则的配合方式。问题的本质组件树内的顺序执行React Server Components 的核心特性是每个组件都可以是 async 的允许在渲染过程中直接await数据。但这条便利背后有一个容易被忽略的执行模型服务端渲染组件树时一个 async 组件内部的await会阻塞该组件 JSX 的返回而父组件只有拿到子组件返回的 JSX 之后才能继续渲染下一个兄弟节点。这意味着如果把取数逻辑直接写在页面的顶层、并在返回 JSX 之前await那么页面里所有依赖该请求的兄弟组件都必须等待它完成而这些兄弟组件自身的取数请求要到它们开始渲染时才会发起。于是请求 A → B → C 形成一条严格的串行链请求 A 完成 → 页面拿到结果页面开始渲染 Sidebar → 请求 B 才发出 → 等待Sidebar 渲染完毕 → 页面渲染下一个兄弟节点 → 请求 C 才发出 → 等待总耗时 ≈ A B C而不是max(A, B, C)。这在首屏取数多、每层都等待的典型页面里会直接放大首字节时间TTFB。该规则在技能包中被标记为impact: CRITICALimpactDescription 明确指出其作用就是eliminates server-side waterfalls消除服务端瀑布流。它归属于Server-Side Performance服务端性能分类前缀为server-是该分类下七条规则之一详见 SKILL.md 中的 Quick Reference。错误写法页面顶层 await 导致的串行链规则文件首先给出了最常见的错误形态页面组件在返回 JSX 之前先await头部数据而 Sidebar 作为子组件其自身的取数请求只能等页面渲染到它时才发起。export default async function Page() { const header await fetchHeader() return ( div div{header}/div Sidebar / /div ) } async function Sidebar() { const items await fetchSidebarItems() return nav{items.map(renderItem)}/nav }这段代码的执行时间线是Page开始执行发出fetchHeader()页面整体挂起等待fetchHeader()完成Page拿到header才开始渲染 JSX渲染到Sidebar /时Sidebar才开始发出fetchSidebarItems()等fetchSidebarItems()完成Sidebar才能返回nav。fetchHeader与fetchSidebarItems没有任何数据依赖却因为await 的位置被强制串行。串行不是数据依赖造成的而是组件树结构造成的——这是本规则最核心的洞察。正确写法把取数下沉到独立组件让兄弟节点并行修复思路非常简单让每个取数操作都发生在各自独立的组件内部页面组件不再亲自await只负责把组件组合起来。这样 React 在渲染Header /与Sidebar /时两个 async 组件会同时开始执行各自的取数逻辑请求并行发出。async function Header() { const data await fetchHeader() return div{data}/div } async function Sidebar() { const items await fetchSidebarItems() return nav{items.map(renderItem)}/nav } export default function Page() { return ( div Header / Sidebar / /div ) }关键变化有三点Page不再是 async 组件不再await任何请求只是纯组合compositionfetchHeader的await被下沉进Header组件内部fetchSidebarItems的await被下沉进Sidebar组件内部。此时时间线变为Page同步返回 JSX → React 同时挂载并执行Header与Sidebar→ 两个请求同时发出 → 各自完成各自渲染。总耗时从串行累加降为最长请求耗时。这也是规则标题 Parallel Data Fetching with Component Composition 的含义并行不是靠并发 API如Promise.all实现的而是靠组件树的结构重构实现的。进阶方案children prop 透传先渲染壳再流式填充内容对于布局壳已经确定、只有局部内容需要数据的场景规则文件给出了第二种方案把children作为 prop 传入布局组件。父组件先同步渲染出一个不含任何await的布局壳具体内容Sidebar由调用方作为children注入内容组件的取数同样并行发起。async function Header() { const data await fetchHeader() return div{data}/div } async function Sidebar() { const items await fetchSidebarItems() return nav{items.map(renderItem)}/nav } function Layout({ children }: { children: ReactNode }) { return ( div Header / {children} /div ) } export default function Page() { return ( Layout Sidebar / /Layout ) }这个模式的工程意义在于解耦布局与数据Layout是纯同步组件负责结构Header 内容区不关心内容是什么、数据从哪来Page负责组装决定布局壳与具体内容Sidebar的对应关系Sidebar依旧保持自包含的取数能力且与Header的请求并行。因此同一个Layout可以被复用于完全不同的内容组合侧边栏、主内容、详情区……而不会因为内容的取数把布局壳拖慢。这一模式在大型应用中通常与路由布局layout体系配合使用是布局立即渲染、内容流式到达的基础结构。原理深挖为什么下沉 await 组合就能并行要理解这条规则为什么有效需要回到 RSC 的执行机制。可以从以下几个层面把握async 组件的挂起粒度是组件自身一个 async 组件await时只有它自己挂起挂起结果交给最近的 Suspense 边界处理不会阻塞已经完成渲染的兄弟节点输出。请求的发起时机由组件执行时机决定把await下沉到Sidebar内部相当于把fetchSidebarItems()的调用时机从页面渲染到 Sidebar 时提前到Sidebar 组件开始执行时。在组合结构中Header与Sidebar几乎同时开始执行两个请求自然并行。结构决定调度而非调度决定结构如果数据本来就无依赖就不应该让组件树替我们排队。组合重构是在源头消除排队而不是事后用并发工具补救。补充一点如果两个请求都在同一个async 组件内部例如都在Page里仅靠拆分组件是不够的还需要配合Promise.all显式并发——这正是同技能包中 async-parallel.md 规则Promise.all() for Independent Operations同样标记为 CRITICAL覆盖的场景const [user, posts, comments] await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ])两种规则的分工是跨组件的并行靠本规则组合重构组件内的并行靠Promise.all。与相邻规则的联动依赖并行、API 路由与 Suspense本规则不是孤立的。技能包Eliminating Waterfalls消除瀑布流与Server-Side Performance服务端性能两个分类下的多条规则与本规则共同构成一套完整的并行取数方法论1. 部分依赖场景先发独立请求再并行依赖链当请求之间存在部分依赖例如 profile 需要 user.id但 config 完全独立时async-dependencies.md 给出了不引入额外依赖的写法先把所有 Promise 创建出来最后统一Promise.all——让独立的请求第一时间发出而不是在await中排队。const userPromise fetchUser() const profilePromise userPromise.then(user fetchProfile(user.id)) const [user, config, profile] await Promise.all([ userPromise, fetchConfig(), profilePromise ])这里fetchConfig()在fetchUser()完成之前就已发出profilePromise则通过.then链在 user 就绪后立即跟进——本质上是尽早发起 Promise、尽可能晚地 await。2. API 路由与 Server Actions提前创建 Promise同样的尽早发起原则也适用于服务端入口。规则 async-api-routes.md 指出在 API Route 或 Server Action 中应当先创建独立操作的 Promise即使暂时不 await 它们export async function GET(request: Request) { const sessionPromise auth() const configPromise fetchConfig() const session await sessionPromise const [config, data] await Promise.all([ configPromise, fetchData(session.user.id) ]) return Response.json({ data, config }) }auth()与fetchConfig()在函数入口处就同步发起config不再等待 auth 完成fetchData虽然依赖session.user.id但配置请求已经与认证请求并行。这与本规则在组件树中的下沉 组合是同一思想在不同层级的体现。3. Suspense 边界让布局立即渲染、数据流式到达组合重构解决了并行而界面何时呈现由 Suspense 决定。规则 async-suspense-boundaries.md 建议不要在 async 组件里 await 完再返回 JSX而是用 Suspense 边界包裹数据区让壳结构Sidebar、Header、Footer立即渲染只有数据区等待并流式填充function Page() { return ( div divSidebar/div divHeader/div div Suspense fallback{Skeleton /} DataDisplay / /Suspense /div divFooter/div /div ) } async function DataDisplay() { const data await fetchData() // Only blocks this component return div{data.content}/div }该规则还提到一个与并行强相关的进阶技巧在父组件同步创建 Promise不 await通过 prop 传给多个子组件共享配合use(promise)解包可以让多个组件复用同一次请求、共享同一次挂起。这与本规则的组合思想叠加后既能并行发起、又能按需渲染。何时使用、何时避免边界与取舍并非所有场景都适合组合 并行适合使用多个请求彼此独立且分别属于页面不同区域Header、Sidebar、主内容区、推荐区等页面存在稳定的布局壳内容区域可以流式填充首屏数据对 TTFB 敏感需要尽快输出 HTML 流。应避免或慎用数据之间存在真实依赖必须先拿到 A 才能请求 B此时组合无法改变依赖关系应使用 async-dependencies.md 的依赖并行写法数据是布局决策的关键输入影响定位与结构延迟渲染会导致明显的布局跳动layout shift首屏之上、SEO 关键内容流式渲染可能影响搜索引擎对首屏内容的抓取时机请求本身很小、很快组合拆分会增加组件数量与 Suspense 开销收益不抵复杂度。规则文件用一句话概括了取舍Faster initial paint vs potential layout shift——更快的首屏渲染与潜在的布局跳动按 UX 优先级选择。小结服务端瀑布流往往不是数据依赖造成的而是组件树结构造成的。本规则给出的修复路径是下沉把每个await收进各自独立的组件内部组合页面组件退化为纯组合只负责排列兄弟节点透传需要布局壳时用childrenprop 让内容组件并行取数、壳结构立即渲染。在 dinero.js 仓库的 Vercel React 最佳实践技能包中这条规则属于服务端性能Server-Side Performance分类的 CRITICAL 级别规则与async-parallel组件内Promise.all、async-dependencies部分依赖并行、async-api-routes入口处提前发起 Promise、async-suspense-boundariesSuspense 流式渲染共同构成完整的瀑布流消除工具箱。实际编码时可以先识别哪些请求无依赖却被组件树串行化再决定用组合拆分、children透传还是Promise.all——把串行等待改写为并行就绪是服务端性能优化中投入产出比最高的改动之一。赞分享金融科技【免费下载链接】dinero.jsCreate, calculate, and format money in JavaScript and TypeScript项目地址https://gitcode.com/gh_mirrors/di/dinero.js点击查看免费下载相关推荐Cherry Studio 仓库实战用组件组合消除 React Server Components 服务端数据瀑布Parallel Data FetchingCherry Studio 仓库实战用组件组合消除 React Server Components 服务端数据瀑布Parallel Data Fetchin人工智能大模型AI 应用交互助手本地部署深入解析 Go 语言 YAML 处理库 gopkg.in/yaml.v3在 wandb 中的实际应用与 API 全指南深入解析 Go 语言 YAML 处理库 gopkg.in/yaml.v3在 wandb 中的实际应用与 API 全指南 导读 gopkg.in/yaml.v3开发工具AI 应用代码智能体用组件组合消除服务端瀑布Sanity 仓库中 RSC 并行数据获取规则server-parallel-fetching详解用组件组合消除服务端瀑布Sanity 仓库中 RSC 并行数据获取规则server parallel fetching详解 在基于 React ServeCMS前端上一篇5分钟上手Kilo Code云函数AI开发全攻略下一篇根治Sherpa-onnx内存泄漏从根源分析到生产级解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用组件组合消除 React Server Components 服务端瀑布流：dinero.js 仓库中的 Parallel Data Fetching 实践规则
金融科技【免费下载链接】dinero.jsCreate, calculate, and format money in JavaScript and TypeScript项目地址https://gitcode.com/gh_mirrors/di/dinero.js点击查看免费下载在 React Server ComponentsRSC中服务端组件树是按顺序逐层执行的一个组件内部的await会阻塞其子树的渲染。如果页面、侧边栏、头部各自顺序等待各自的请求完成就会形成典型的服务端瀑布流server-side waterfall——总耗时等于所有请求耗时的累加而不是最长请求的耗时。本文基于当前仓库中 Vercel React 最佳实践技能包.agents/skills/vercel-react-best-practices的规则文件 server-parallel-fetching.md系统讲解如何通过**组件组合Component Composition**重构组件树让相互独立的请求同时发出。读完本文你将掌握三种可落地的并行取数写法组合拆分、childrenprop 透传、Promise 提前发起并理解它们与Promise.all、Suspense 边界等相邻规则的配合方式。问题的本质组件树内的顺序执行React Server Components 的核心特性是每个组件都可以是 async 的允许在渲染过程中直接await数据。但这条便利背后有一个容易被忽略的执行模型服务端渲染组件树时一个 async 组件内部的await会阻塞该组件 JSX 的返回而父组件只有拿到子组件返回的 JSX 之后才能继续渲染下一个兄弟节点。这意味着如果把取数逻辑直接写在页面的顶层、并在返回 JSX 之前await那么页面里所有依赖该请求的兄弟组件都必须等待它完成而这些兄弟组件自身的取数请求要到它们开始渲染时才会发起。于是请求 A → B → C 形成一条严格的串行链请求 A 完成 → 页面拿到结果页面开始渲染 Sidebar → 请求 B 才发出 → 等待Sidebar 渲染完毕 → 页面渲染下一个兄弟节点 → 请求 C 才发出 → 等待总耗时 ≈ A B C而不是max(A, B, C)。这在首屏取数多、每层都等待的典型页面里会直接放大首字节时间TTFB。该规则在技能包中被标记为impact: CRITICALimpactDescription 明确指出其作用就是eliminates server-side waterfalls消除服务端瀑布流。它归属于Server-Side Performance服务端性能分类前缀为server-是该分类下七条规则之一详见 SKILL.md 中的 Quick Reference。错误写法页面顶层 await 导致的串行链规则文件首先给出了最常见的错误形态页面组件在返回 JSX 之前先await头部数据而 Sidebar 作为子组件其自身的取数请求只能等页面渲染到它时才发起。export default async function Page() { const header await fetchHeader() return ( div div{header}/div Sidebar / /div ) } async function Sidebar() { const items await fetchSidebarItems() return nav{items.map(renderItem)}/nav }这段代码的执行时间线是Page开始执行发出fetchHeader()页面整体挂起等待fetchHeader()完成Page拿到header才开始渲染 JSX渲染到Sidebar /时Sidebar才开始发出fetchSidebarItems()等fetchSidebarItems()完成Sidebar才能返回nav。fetchHeader与fetchSidebarItems没有任何数据依赖却因为await 的位置被强制串行。串行不是数据依赖造成的而是组件树结构造成的——这是本规则最核心的洞察。正确写法把取数下沉到独立组件让兄弟节点并行修复思路非常简单让每个取数操作都发生在各自独立的组件内部页面组件不再亲自await只负责把组件组合起来。这样 React 在渲染Header /与Sidebar /时两个 async 组件会同时开始执行各自的取数逻辑请求并行发出。async function Header() { const data await fetchHeader() return div{data}/div } async function Sidebar() { const items await fetchSidebarItems() return nav{items.map(renderItem)}/nav } export default function Page() { return ( div Header / Sidebar / /div ) }关键变化有三点Page不再是 async 组件不再await任何请求只是纯组合compositionfetchHeader的await被下沉进Header组件内部fetchSidebarItems的await被下沉进Sidebar组件内部。此时时间线变为Page同步返回 JSX → React 同时挂载并执行Header与Sidebar→ 两个请求同时发出 → 各自完成各自渲染。总耗时从串行累加降为最长请求耗时。这也是规则标题 Parallel Data Fetching with Component Composition 的含义并行不是靠并发 API如Promise.all实现的而是靠组件树的结构重构实现的。进阶方案children prop 透传先渲染壳再流式填充内容对于布局壳已经确定、只有局部内容需要数据的场景规则文件给出了第二种方案把children作为 prop 传入布局组件。父组件先同步渲染出一个不含任何await的布局壳具体内容Sidebar由调用方作为children注入内容组件的取数同样并行发起。async function Header() { const data await fetchHeader() return div{data}/div } async function Sidebar() { const items await fetchSidebarItems() return nav{items.map(renderItem)}/nav } function Layout({ children }: { children: ReactNode }) { return ( div Header / {children} /div ) } export default function Page() { return ( Layout Sidebar / /Layout ) }这个模式的工程意义在于解耦布局与数据Layout是纯同步组件负责结构Header 内容区不关心内容是什么、数据从哪来Page负责组装决定布局壳与具体内容Sidebar的对应关系Sidebar依旧保持自包含的取数能力且与Header的请求并行。因此同一个Layout可以被复用于完全不同的内容组合侧边栏、主内容、详情区……而不会因为内容的取数把布局壳拖慢。这一模式在大型应用中通常与路由布局layout体系配合使用是布局立即渲染、内容流式到达的基础结构。原理深挖为什么下沉 await 组合就能并行要理解这条规则为什么有效需要回到 RSC 的执行机制。可以从以下几个层面把握async 组件的挂起粒度是组件自身一个 async 组件await时只有它自己挂起挂起结果交给最近的 Suspense 边界处理不会阻塞已经完成渲染的兄弟节点输出。请求的发起时机由组件执行时机决定把await下沉到Sidebar内部相当于把fetchSidebarItems()的调用时机从页面渲染到 Sidebar 时提前到Sidebar 组件开始执行时。在组合结构中Header与Sidebar几乎同时开始执行两个请求自然并行。结构决定调度而非调度决定结构如果数据本来就无依赖就不应该让组件树替我们排队。组合重构是在源头消除排队而不是事后用并发工具补救。补充一点如果两个请求都在同一个async 组件内部例如都在Page里仅靠拆分组件是不够的还需要配合Promise.all显式并发——这正是同技能包中 async-parallel.md 规则Promise.all() for Independent Operations同样标记为 CRITICAL覆盖的场景const [user, posts, comments] await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ])两种规则的分工是跨组件的并行靠本规则组合重构组件内的并行靠Promise.all。与相邻规则的联动依赖并行、API 路由与 Suspense本规则不是孤立的。技能包Eliminating Waterfalls消除瀑布流与Server-Side Performance服务端性能两个分类下的多条规则与本规则共同构成一套完整的并行取数方法论1. 部分依赖场景先发独立请求再并行依赖链当请求之间存在部分依赖例如 profile 需要 user.id但 config 完全独立时async-dependencies.md 给出了不引入额外依赖的写法先把所有 Promise 创建出来最后统一Promise.all——让独立的请求第一时间发出而不是在await中排队。const userPromise fetchUser() const profilePromise userPromise.then(user fetchProfile(user.id)) const [user, config, profile] await Promise.all([ userPromise, fetchConfig(), profilePromise ])这里fetchConfig()在fetchUser()完成之前就已发出profilePromise则通过.then链在 user 就绪后立即跟进——本质上是尽早发起 Promise、尽可能晚地 await。2. API 路由与 Server Actions提前创建 Promise同样的尽早发起原则也适用于服务端入口。规则 async-api-routes.md 指出在 API Route 或 Server Action 中应当先创建独立操作的 Promise即使暂时不 await 它们export async function GET(request: Request) { const sessionPromise auth() const configPromise fetchConfig() const session await sessionPromise const [config, data] await Promise.all([ configPromise, fetchData(session.user.id) ]) return Response.json({ data, config }) }auth()与fetchConfig()在函数入口处就同步发起config不再等待 auth 完成fetchData虽然依赖session.user.id但配置请求已经与认证请求并行。这与本规则在组件树中的下沉 组合是同一思想在不同层级的体现。3. Suspense 边界让布局立即渲染、数据流式到达组合重构解决了并行而界面何时呈现由 Suspense 决定。规则 async-suspense-boundaries.md 建议不要在 async 组件里 await 完再返回 JSX而是用 Suspense 边界包裹数据区让壳结构Sidebar、Header、Footer立即渲染只有数据区等待并流式填充function Page() { return ( div divSidebar/div divHeader/div div Suspense fallback{Skeleton /} DataDisplay / /Suspense /div divFooter/div /div ) } async function DataDisplay() { const data await fetchData() // Only blocks this component return div{data.content}/div }该规则还提到一个与并行强相关的进阶技巧在父组件同步创建 Promise不 await通过 prop 传给多个子组件共享配合use(promise)解包可以让多个组件复用同一次请求、共享同一次挂起。这与本规则的组合思想叠加后既能并行发起、又能按需渲染。何时使用、何时避免边界与取舍并非所有场景都适合组合 并行适合使用多个请求彼此独立且分别属于页面不同区域Header、Sidebar、主内容区、推荐区等页面存在稳定的布局壳内容区域可以流式填充首屏数据对 TTFB 敏感需要尽快输出 HTML 流。应避免或慎用数据之间存在真实依赖必须先拿到 A 才能请求 B此时组合无法改变依赖关系应使用 async-dependencies.md 的依赖并行写法数据是布局决策的关键输入影响定位与结构延迟渲染会导致明显的布局跳动layout shift首屏之上、SEO 关键内容流式渲染可能影响搜索引擎对首屏内容的抓取时机请求本身很小、很快组合拆分会增加组件数量与 Suspense 开销收益不抵复杂度。规则文件用一句话概括了取舍Faster initial paint vs potential layout shift——更快的首屏渲染与潜在的布局跳动按 UX 优先级选择。小结服务端瀑布流往往不是数据依赖造成的而是组件树结构造成的。本规则给出的修复路径是下沉把每个await收进各自独立的组件内部组合页面组件退化为纯组合只负责排列兄弟节点透传需要布局壳时用childrenprop 让内容组件并行取数、壳结构立即渲染。在 dinero.js 仓库的 Vercel React 最佳实践技能包中这条规则属于服务端性能Server-Side Performance分类的 CRITICAL 级别规则与async-parallel组件内Promise.all、async-dependencies部分依赖并行、async-api-routes入口处提前发起 Promise、async-suspense-boundariesSuspense 流式渲染共同构成完整的瀑布流消除工具箱。实际编码时可以先识别哪些请求无依赖却被组件树串行化再决定用组合拆分、children透传还是Promise.all——把串行等待改写为并行就绪是服务端性能优化中投入产出比最高的改动之一。赞分享金融科技【免费下载链接】dinero.jsCreate, calculate, and format money in JavaScript and TypeScript项目地址https://gitcode.com/gh_mirrors/di/dinero.js点击查看免费下载相关推荐Cherry Studio 仓库实战用组件组合消除 React Server Components 服务端数据瀑布Parallel Data FetchingCherry Studio 仓库实战用组件组合消除 React Server Components 服务端数据瀑布Parallel Data Fetchin人工智能大模型AI 应用交互助手本地部署深入解析 Go 语言 YAML 处理库 gopkg.in/yaml.v3在 wandb 中的实际应用与 API 全指南深入解析 Go 语言 YAML 处理库 gopkg.in/yaml.v3在 wandb 中的实际应用与 API 全指南 导读 gopkg.in/yaml.v3开发工具AI 应用代码智能体用组件组合消除服务端瀑布Sanity 仓库中 RSC 并行数据获取规则server-parallel-fetching详解用组件组合消除服务端瀑布Sanity 仓库中 RSC 并行数据获取规则server parallel fetching详解 在基于 React ServeCMS前端上一篇5分钟上手Kilo Code云函数AI开发全攻略下一篇根治Sherpa-onnx内存泄漏从根源分析到生产级解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考