React Server Components渲染完成时机及回调实现方案问询

基础组件示例（含延迟加载内容） #

// 带延迟的模拟内容
async function content() {
    await (new Promise(resolve => setTimeout(resolve, Math.random() * 4000)));
    return "content";
}

export default function MyComponent() {
    // 嵌套任意数量的Suspense组件渲染延迟内容
    return (<>
                <Suspense> {content()} </Suspense>
                <Suspense>
                    {content()}
                    <Suspense> {content()} </Suspense>
                </Suspense>
            </>)
}

现有服务端实现思路（仅作用于服务端） #

通过遍历组件返回的JSX树，收集所有Suspense包裹的Promise，等待全部完成后执行回调。该方案可行，但不确定是否有更直接的内置方法：

// 遍历JSX树并返回扁平化节点数组的工具函数
function traverse (jsx) {
    if (jsx === undefined || jsx === null) return undefined;
    // 分支末端返回当前元素
    if (!jsx.props || !jsx.props.children) return jsx;
    // 递归遍历子节点
    return jsx.props.children.map((c) => traverse(c)).flat();
}

export default function MyComponent() {
    let result = (<>
                      <Suspense> {content()} </Suspense>
                      <Suspense>
                          {content()}
                        <Suspense> {content()} </Suspense>
                    </Suspense>
                  </>)

    let suspensePromises = traverse(result)
        .filter(e => e.then); // 仅保留Promise类型

    Promise.all(suspensePromises).then(() => {
        // 这里执行回调逻辑
        console.log("服务端：所有Suspense内容已加载完成");
    })

    // 返回结果给客户端进行渐进式渲染
    return result;
}

客户端场景解决方案 #

服务端组件无法使用React Hooks，客户端场景需要将MyComponent标记为客户端组件（添加'use client'指令），以下是两种可行方案：

方案1：函数组件用useEffect结合useRef追踪渲染状态 #

监听组件挂载/更新后，确认所有Suspense内容完成渲染：

'use client';

import { useEffect, useRef } from 'react';

async function content() {
    await (new Promise(resolve => setTimeout(resolve, Math.random() * 4000)));
    return "content";
}

export default function MyComponent() {
    const isFirstRender = useRef(true);

    useEffect(() => {
        if (isFirstRender.current) {
            isFirstRender.current = false;
            console.log("客户端：组件首次渲染完成");
        } else {
            console.log("客户端：组件更新完成");
        }
    }, []); // 空依赖确保仅在挂载时执行一次

    return (<>
                <Suspense fallback={<div>加载中...</div>}> {content()} </Suspense>
                <Suspense fallback={<div>加载中...</div>}>
                    {content()}
                    <Suspense fallback={<div>加载中...</div>}> {content()} </Suspense>
                </Suspense>
            </>)
}

方案2：类组件用生命周期钩子 #

若使用类组件，可通过componentDidMount/componentDidUpdate实现：

'use client';

import React from 'react';

async function content() {
    await (new Promise(resolve => setTimeout(resolve, Math.random() * 4000)));
    return "content";
}

class MyComponent extends React.Component {
    componentDidMount() {
        console.log("客户端：组件挂载完成");
    }

    componentDidUpdate(prevProps) {
        // 可根据props变化判断是否执行回调
        console.log("客户端：组件更新完成");
    }

    render() {
        return (<>
                    <Suspense fallback={<div>加载中...</div>}> {content()} </Suspense>
                    <Suspense fallback={<div>加载中...</div>}>
                        {content()}
                        <Suspense fallback={<div>加载中...</div>}> {content()} </Suspense>
                    </Suspense>
                </>)
    }
}

export default MyComponent;

关键说明 #

• 服务端场景：目前React无内置API直接监听服务端组件中所有Suspense内容加载完成，遍历JSX收集Promise是可行方案，但需注意条件渲染、动态子节点等边界情况。
• 客户端场景：必须标记为客户端组件才能使用Hooks或生命周期，useEffect是函数组件的首选方案，可准确监听渲染完成时机。

内容的提问来源于stack exchange，提问作者test1 test2