如何在SSR场景下实现React Suspense组件的条件式启用？

React原生Suspense组件没有内置的启用/禁用开关，要实现「禁用时像普通div一样在服务器端同步加载」的效果，我们可以封装自定义组件，通过*enabled*属性控制是否触发Suspense的异步等待逻辑：

import React, { Suspense, ReactElement } from 'react';

function ConditionalSuspense({ enabled = true, children }: { enabled?: boolean; children: React.ReactNode }): ReactElement {
  // 禁用状态下直接渲染子内容，跳过Suspense等待逻辑
  if (!enabled) {
    return <>{children}</>;
  }
  // 启用状态下渲染原生Suspense组件
  return <Suspense>{children}</Suspense>;
}

使用示例 #

在业务组件中，通过enabled={false}让外层内容在服务器端用renderToPipeableStream时直接同步输出，内部嵌套的原生Suspense仍保持客户端异步加载特性：

function MyPage(): ReactElement {
  return (
    <ConditionalSuspense enabled={false}>
      <div>
        <div>此内容会在服务器端同步加载，因为外层ConditionalSuspense已禁用</div>
        {/* 内部原生Suspense不受外层控制，依然保持客户端异步加载 */}
        <Suspense fallback={<div>加载中...</div>}>
          {/* 此处可放置React.lazy导入的异步组件 */}
        </Suspense>
      </div>
    </ConditionalSuspense>
  );
}

服务器端渲染代码 #

使用renderToPipeableStream渲染时，禁用状态的ConditionalSuspense会直接输出子内容，不会触发Suspense等待，实现立即加载：

import { renderToPipeableStream } from 'react-dom/server';
import { MyPage } from './ui';

const stream = renderToPipeableStream(<MyPage />, {
  onShellReady() {
    stream.pipe(response);
  },
  // 其他服务器渲染配置...
});

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